/* VoltricsImport — UI styles.
   The look borrows from airfield signage: near-black asphalt surfaces, one taxiway-sign yellow accent,
   squarer corners, mono labels, and ICAO codes set like location signs (yellow on black, yellow border).
   Dark is the house style: the base tokens are the dark palette and light is an override
   (<html data-theme="light">, or the system preference when the page has not set one).
   Type: Plus Jakarta Sans for everything, JetBrains Mono only for real codes (ICAO signs, file names, the
   log), from Google Fonts. Each stack falls back to system fonts, so the UI still works offline.
   Kept deliberately calm: flat fills, no glows, one accent colour. */

:root {
  /* type */
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui,
          "Helvetica Neue", Arial, sans-serif;
  --display: var(--sans);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

  /* surface */
  --bg: #1e2024;
  --surface: #26292e;
  --surface-2: #2d3036;
  --surface-3: #373b42;
  --border: rgba(255, 255, 255, .09);
  --border-soft: rgba(255, 255, 255, .05);
  --border-strong: rgba(255, 255, 255, .16);

  /* text */
  --text: #f2f1ec;
  --text-2: #b4b3ac;
  --text-3: #86857f;

  /* brand + state: taxiway yellow */
  --accent: #ffc629;
  --accent-strong: #ffd451;
  --accent-soft: rgba(255, 198, 41, .13);
  --accent-ink: #ffd45a;
  --on-accent: #15130b;
  --sign-bg: #0d0d0c;            /* location-sign black: stays black in the light theme too */
  --sign-fg: #ffc629;
  --ok: #5bd889;
  --ok-soft: rgba(91, 216, 137, .14);
  --warn: #ff9f45;
  --warn-soft: rgba(255, 159, 69, .14);
  --bad: #ff6b5e;
  --bad-soft: rgba(255, 107, 94, .14);
  --focus: rgba(255, 198, 41, .45);

  /* shape */
  --r-xl: 16px;
  --r-lg: 12px;
  --r-md: 9px;
  --r-sm: 6px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .32);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .5), 0 24px 64px rgba(0, 0, 0, .55);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .05);

  /* Must stay a solid colour: static/viewer.js feeds it to THREE.Color. */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* background texture: a fine chart grid and a little grain */
  --grid-dot: rgba(255, 255, 255, .075);
  --grain-opacity: .07;
  --grain-invert: 0;
  color-scheme: dark;
  interpolate-size: allow-keywords;   /* lets <details> animate to height: auto */
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --grid-dot: rgba(15, 20, 30, .12);
    --grain-opacity: .05;
    --grain-invert: 1;
    --bg: #e4e5e8;
    --surface: #f4f5f7;
    --surface-2: #ebecef;
    --surface-3: #dcdee2;
    --border: rgba(15, 20, 30, .11);
    --border-soft: rgba(15, 20, 30, .06);
    --border-strong: rgba(15, 20, 30, .19);
    --text: #17181a;
    --text-2: #4b4c4f;
    --text-3: #7a7b7e;
    --accent: #f5b800;
    --accent-strong: #ffc629;
    --accent-soft: rgba(245, 184, 0, .16);
    --accent-ink: #855c00;
    --on-accent: #17140a;
    --ok: #1b7f43;
    --ok-soft: rgba(27, 127, 67, .11);
    --warn: #b0500a;
    --warn-soft: rgba(230, 120, 20, .13);
    --bad: #c0291d;
    --bad-soft: rgba(220, 50, 40, .10);
    --focus: rgba(200, 140, 0, .40);
    --shadow-1: 0 1px 2px rgba(20, 18, 10, .05), 0 6px 20px rgba(20, 18, 10, .06);
    --shadow-2: 0 2px 6px rgba(20, 18, 10, .07), 0 18px 48px rgba(20, 18, 10, .12);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .5);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --grid-dot: rgba(15, 20, 30, .12);
  --grain-opacity: .05;
  --grain-invert: 1;
  --bg: #e4e5e8;
  --surface: #f4f5f7;
  --surface-2: #ebecef;
  --surface-3: #dcdee2;
  --border: rgba(15, 20, 30, .11);
  --border-soft: rgba(15, 20, 30, .06);
  --border-strong: rgba(15, 20, 30, .19);
  --text: #17181a;
  --text-2: #4b4c4f;
  --text-3: #7a7b7e;
  --accent: #f5b800;
  --accent-strong: #ffc629;
  --accent-soft: rgba(245, 184, 0, .16);
  --accent-ink: #855c00;
  --on-accent: #17140a;
  --ok: #1b7f43;
  --ok-soft: rgba(27, 127, 67, .11);
  --warn: #b0500a;
  --warn-soft: rgba(230, 120, 20, .13);
  --bad: #c0291d;
  --bad-soft: rgba(220, 50, 40, .10);
  --focus: rgba(200, 140, 0, .40);
  --shadow-1: 0 1px 2px rgba(20, 18, 10, .05), 0 6px 20px rgba(20, 18, 10, .06);
  --shadow-2: 0 2px 6px rgba(20, 18, 10, .07), 0 18px 48px rgba(20, 18, 10, .12);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* ---- base ---------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  position: relative;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--sans);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Texture, fixed behind everything: a fine dot grid like an aeronautical chart, strongest at the top and
   fading out, and a faint grain over the whole page. z-index -1 keeps both under all content. */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  background-image: radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 110% 75% at 50% 0%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 110% 75% at 50% 0%, #000 25%, transparent 80%);
}
body::after {
  opacity: var(--grain-opacity);
  filter: invert(var(--grain-invert));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.18; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; color: var(--text); }
h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.03em; }
h2 { font-size: 22px; letter-spacing: -.025em; }
h3 { font-size: 16.5px; letter-spacing: -.015em; }
h4 { font-size: 14px; }
p { margin: 0; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, .mono { font-family: var(--mono); font-size: .9em; font-variant-ligatures: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); border-radius: var(--r-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
::selection { background: var(--accent-soft); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border: 3px solid transparent; background-clip: content-box; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }
html, body { overflow-x: clip; }

/* ---- shared bits --------------------------------------------------------------------------- */
.sub { color: var(--text-2); font-size: 14.5px; margin-top: 6px; max-width: 64ch; }
.sub:empty { display: none; }
.lede { color: var(--text-2); font-size: 17px; line-height: 1.6; max-width: 62ch; }
.muted { color: var(--text-3); }
.small { font-size: 13px; }
.hint { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.error-text { color: var(--bad); font-size: 13px; }
.eyebrow {
  font: 600 11.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.stack { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.divider { height: 1px; background: var(--border); margin: 2px 0; }
.text-link { color: var(--accent-ink); font-weight: 600; font-size: 14.5px; }
.text-link span { display: inline-block; padding-left: 4px; transition: transform .2s var(--ease); }
.text-link:hover span { transform: translateX(3px); }

/* Location sign: the signature element (ICAO codes, section labels). */
.sign {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 9px; border-radius: 4px;
  background: var(--sign-bg); color: var(--sign-fg);
  border: 1.5px solid var(--sign-fg);
  font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
/* Direction sign: black on yellow, used sparingly. */
.sign-dir { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---- top bar ------------------------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  width: 100%; height: 62px; margin: 0 auto;
  padding: 0 max(16px, calc((100% - 1240px) / 2));
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--border-soft);
}
@supports (animation-timeline: scroll()) {
  .topbar { animation: bar-solid linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  @keyframes bar-solid {
    from { background-color: transparent; border-bottom-color: transparent; backdrop-filter: none; }
  }
}
.brand {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  font-size: 17px; font-weight: 700; letter-spacing: -.025em; color: var(--text); text-decoration: none;
}
.brand:hover { text-decoration: none; }
/* The supplied mark is pure alpha shapes, so it is used as a mask on a yellow sign plate. */
.brand-mark {
  position: relative; display: block; width: 28px; height: 28px; border-radius: 7px; flex: none;
  background: var(--accent);
}
.brand-mark::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; background: var(--on-accent);
  -webkit-mask: url("/static/logo.png") center / contain no-repeat;
  mask: url("/static/logo.png") center / contain no-repeat;
}
.brand em { font-style: normal; color: var(--text-3); font-weight: 500; letter-spacing: 0; }
.topbar .spacer { flex: 1; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  padding: 7px 11px; border-radius: var(--r-md);
  color: var(--text-2); font-size: 14px; font-weight: 550; white-space: nowrap;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

/* ---- pill top bar (landing): menu on the left, the mark in the middle, sign-in on the right ----------- */
.pillbar-wrap { position: sticky; top: 12px; z-index: 40; padding: 0 16px; margin-top: 12px; }
.pillbar {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  max-width: 760px; height: 56px; margin: 0 auto; padding: 0 8px 0 10px;
  border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22), var(--shadow-inset);
}
.pillbar .auth-bar { justify-self: end; }
.pillbar .auth-btn-discord, .pillbar .user-pill { border-radius: var(--r-pill); }
.pillbar-logo {
  display: block; width: 30px; height: 30px; background: var(--text);         /* white on the charcoal theme */
  -webkit-mask: url("/static/logo.png") center / contain no-repeat; mask: url("/static/logo.png") center / contain no-repeat;
  transition: opacity .2s var(--ease);
}
.pillbar-logo:hover { opacity: .8; }
.pillbar-menu-btn {
  justify-self: start; display: grid; align-content: center; gap: 5px; width: 40px; height: 40px; padding: 0 10px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text); cursor: pointer;
  transition: background .2s var(--ease);
}
.pillbar-menu-btn:hover { background: var(--surface-3); }
.pillbar-menu-btn span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease-out), opacity .2s var(--ease); }
.pillbar-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pillbar-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pillbar-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.pillbar-menu {
  position: absolute; left: 16px; right: 16px; top: 100%;             /* floats over the page, under the pill */
  display: grid; gap: 2px; max-width: 760px; margin: 8px auto 0; padding: 8px;
  border-radius: 20px; border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  transition: opacity .25s var(--ease-out), translate .25s var(--ease-out);
}
@starting-style { .pillbar-menu { opacity: 0; translate: 0 -6px; } }
.pillbar-menu a, .pillbar-theme {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px;
  color: var(--text); font: inherit; font-size: 15px; font-weight: 600; text-align: left;
  border: 0; background: transparent; cursor: pointer;
}
.pillbar-menu a:hover, .pillbar-theme:hover { background: var(--surface-3); text-decoration: none; }
.pillbar-theme { color: var(--text-2); border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; margin-top: 4px; padding-top: 13px; }
.pillbar-theme svg { width: 16px; height: 16px; }

/* ---- importer shell ------------------------------------------------------------------------ */
.shell {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto;
  padding: 28px 24px 64px;
  display: grid; gap: 24px;
  grid-template-columns: minmax(0, 1fr) 312px;
  align-items: start;
}
.main { display: grid; gap: 22px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.side { position: sticky; top: 86px; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1000px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 48px; gap: 16px; }
  .side { position: static; }
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}
.card-pad { padding: 26px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.card-head > div:first-child { flex: 1 1 280px; min-width: 0; }

/* ---- buttons ------------------------------------------------------------------------------- */
/* Buttons are flat: one fill, a hairline border, a gentle tint on hover. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600; font-size: 14px; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .25s var(--ease-out);
}
.btn:hover { background: var(--surface-3); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:active { background: color-mix(in srgb, var(--surface-3) 80%, var(--text) 6%); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-primary:active { background: color-mix(in srgb, var(--accent) 90%, #000); }
/* A top shine for a headline button: light across the upper half and a bright top edge. */
.btn-shine, .btn-shine:hover, .btn-shine:active {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, .12) 48%, rgba(255, 255, 255, 0) 52%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .08);
}
.btn-lg { min-height: 46px; padding: 0 20px; font-size: 15px; border-radius: 10px; }
.btn-sm { min-height: 30px; padding: 0 11px; font-size: 13px; border-radius: 7px; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); transform: none; }
.btn-icon { width: 36px; min-height: 36px; padding: 0; flex: none; }
.btn-icon.btn-sm { width: 30px; min-height: 30px; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-block { width: 100%; }

/* ---- upload -------------------------------------------------------------------------------- */
.drop {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 46px 24px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.drop:hover, .drop.is-over { border-color: var(--accent); background-color: var(--accent-soft); }
.drop svg { width: 34px; height: 34px; color: var(--accent); margin-bottom: 4px; }
.drop strong { font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; }
.drop .hint { max-width: 64ch; }
.file-chip {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--border);
}
.file-chip svg { color: var(--text-3); flex: none; }
.file-chip .name { font-weight: 600; word-break: break-all; }
.file-chip .grow { flex: 1; min-width: 0; }
.progress { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .35s var(--ease); }

/* ---- forms --------------------------------------------------------------------------------- */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; width: 100%; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field > label, .label { font-size: 12.5px; font-weight: 620; color: var(--text-2); letter-spacing: .01em; }
.input, .select {
  width: 100%; min-height: 42px; padding: 9px 13px;
  border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.input:hover, .select:hover { background: var(--surface-3); }
.input:focus, .select:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); outline: none; }
.input[aria-invalid="true"] { border-color: var(--bad); }
.input.upper { text-transform: uppercase; letter-spacing: .08em; font-family: var(--mono); font-weight: 700; }
.input-suffix { position: relative; }
.input-suffix .input { padding-right: 88px; }
.input-suffix span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--text-3); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.section-title h3 { display: flex; align-items: center; gap: 10px; }
.section-title h3::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--accent); }

.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.check {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 14px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.check:hover { border-color: var(--border-strong); }
.check:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.check input { margin: 2px 0 0; width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.check b { display: block; font-size: 14px; font-weight: 620; letter-spacing: -.005em; }
.check small { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 3px; line-height: 1.5; }
.check .tag { display: inline-block; margin-left: 6px; vertical-align: 1px; }
/* An option that adds uploads moderation can flag: warn colour when it is switched on. */
.check-risk:has(input:checked) { border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn-soft) 70%, var(--surface)); }
.check-risk input { accent-color: var(--warn); }
.check-group { grid-column: 1 / -1; margin: 8px 0 -2px; font: 600 11px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.check-group:first-child { margin-top: 0; }

.detected { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kv { padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border-soft); min-width: 0; }
.kv .k { font: 600 11px/1.4 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.kv .v { font-weight: 640; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font: 600 11px/1.4 var(--sans); color: var(--text-3); letter-spacing: .05em; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .select { min-height: 32px; padding: 4px 10px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(0,0,0,.18); vertical-align: -1px; }
.mat-map { display: block; width: 72px; height: 72px; object-fit: contain; border-radius: var(--r-sm);
           background: #3e6034; border: 1px solid var(--border); transition: transform .18s var(--ease); position: relative; z-index: 1; }
.mat-map:hover { transform: scale(2.6); transform-origin: left center; z-index: 5; box-shadow: var(--shadow-2); }

/* ---- alerts / badges ----------------------------------------------------------------------- */
.alert { display: flex; gap: 11px; padding: 14px 16px; border-radius: var(--r-lg); font-size: 14px; border: 1px solid transparent; }
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.alert-bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 26%, transparent); }
.alert-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 26%, transparent); }
.alert-ok { background: var(--ok-soft); color: var(--ok); }
.alert .alert-body { color: var(--text); }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 5px;
  font-size: 11.5px; font-weight: 640; letter-spacing: .01em;
  background: var(--surface-3); color: var(--text-2); white-space: nowrap;
}
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-accent { background: var(--accent-soft); color: var(--accent-ink); }

/* ---- progress ------------------------------------------------------------------------------ */
#progressCard { overflow: hidden; }
.progress-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.progress-title { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.pct { font: 700 40px/1 var(--sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.pct small { font-size: 16px; font-weight: 600; color: var(--text-3); margin-left: 2px; letter-spacing: 0; }
.pct.is-failed { color: var(--bad); font-size: 24px; letter-spacing: -.02em; }

.progress-meta { margin: -6px 0 0; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.meter { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.meter > i {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: inherit; overflow: hidden;
  background: var(--accent);
  transition: width .7s var(--ease);
}

/* Each step draws the connector from below its own dot to the next one (never through a dot or the active
   row's tint); it turns green once the step is done. */
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: relative; }
.stage:not(:last-child)::after {
  content: ""; position: absolute; left: 20px; top: 41px; bottom: -7px; width: 2px;
  background: var(--border); border-radius: 2px; pointer-events: none;
  transition: background-color .4s var(--ease);
}
.stage.is-done:not(:last-child)::after { background: color-mix(in srgb, var(--ok) 45%, transparent); }
.stage {
  position: relative;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 1px;
  padding: 10px 12px 10px 8px; border-radius: var(--r-md);
  background: transparent; min-width: 0;
  transition: background .2s var(--ease);
}
.stage .dot {
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  position: relative; z-index: 1;
  width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center;
  font: 700 12px/1 var(--mono);
  background: var(--surface-2); color: var(--text-3);
  border: 1px solid var(--border-strong);
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.stage .dot svg { width: 14px; height: 14px; }
.stage b { grid-column: 2; grid-row: 1; display: block; font-size: 14px; font-weight: 620; letter-spacing: -.005em; }
.stage small { grid-column: 2; grid-row: 2; font-size: 12.5px; color: var(--text-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.stage.is-active { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.stage.is-active .dot { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.stage.is-active b { color: var(--accent-ink); }
.stage.is-done .dot { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.stage.is-error { background: var(--bad-soft); }
.stage.is-error .dot { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.stage.is-error b { color: var(--bad); }

.spin { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

details.log summary { cursor: pointer; font-size: 13px; color: var(--text-2); padding: 4px 0; }
details.log summary:hover { color: var(--text); }
.log-box {
  margin-top: 10px; max-height: 200px; overflow: auto; padding: 12px 14px;
  border-radius: var(--r-md); background: var(--sign-bg); border: 1px solid var(--border);
  font: 12px/1.65 var(--mono); color: #c9c8c0;
}

.queue-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 11px 16px; border-radius: var(--r-md);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.queue-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 650; color: var(--accent-ink); }
.queue-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: queuePulse 1.8s infinite ease-in-out; }
@keyframes queuePulse { 0%, 100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.3); opacity: 1; } }
.queue-eta { font: 12.5px var(--mono); color: var(--text-2); padding: 4px 10px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); white-space: nowrap; }

/* ---- results ------------------------------------------------------------------------------- */
.result-head { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.result-title { display: flex; gap: 14px; align-items: center; min-width: 0; }
.icao {
  flex: none; padding: 9px 11px; border-radius: 5px;
  background: var(--sign-bg); color: var(--sign-fg); border: 2px solid var(--sign-fg);
  font: 800 15px/1 var(--mono); letter-spacing: .12em;
}
.stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.stat { padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border-soft); min-width: 0; }
.stat .n { font: 700 24px/1.1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.stat .x { font-size: 11.5px; color: var(--text-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* segmented control */
.tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; max-width: 100%;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; border: 0; background: none;
  padding: 7px 14px; border-radius: 7px;
  font-weight: 600; font-size: 13.5px; color: var(--text-2);
  cursor: pointer; white-space: nowrap;
  display: inline-flex; gap: 7px; align-items: center;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
:root[data-theme="light"] .tab[aria-selected="true"] { background: var(--surface); }
.tab .badge { font-size: 11px; }
.tabpanel { padding-top: 18px; }

/* previews */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.shot { margin: 0; display: grid; gap: 8px; }
.shot-frame {
  display: block; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface-2); aspect-ratio: 16 / 9; cursor: zoom-in;
  transition: border-color .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.shot-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot-frame:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.shot-frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shot figcaption { font-size: 13px; color: var(--text-2); }
#shotsHint { margin-top: 12px; }

.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 18px 22px;
  border: 0; background: rgba(8, 9, 11, .94); color: #f2f1ec;
  display: none; grid-template-rows: auto 1fr auto; gap: 14px;
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgba(0, 0, 0, .6); }
.lb-top, .lb-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lb-title { font-size: 15px; }
.lb-title span { color: rgba(242, 241, 236, .55); }
.lightbox .btn { background: rgba(255, 255, 255, .06); color: #f2f1ec; border-color: rgba(255, 255, 255, .16); }
.lightbox .btn:hover { background: rgba(255, 255, 255, .12); }
.lb-stage { min-height: 0; display: grid; place-items: center; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-lg); }
.lb-thumbs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lb-thumb { padding: 0; width: 88px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: none; cursor: pointer; opacity: .6; transition: opacity .2s var(--ease); }
.lb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb-thumb:hover { opacity: .9; }
.lb-thumb[aria-current="true"] { border-color: #fff; opacity: 1; }
@media (max-width: 640px) {
  .lightbox { padding: 12px 16px; }
  .lb-thumbs { display: none; }
}

/* texture review */
.review-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.review-head .sub { margin: 0; }
#reviewFilter .tab[aria-pressed="true"] { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
:root[data-theme="light"] #reviewFilter .tab[aria-pressed="true"] { background: var(--surface); }
#reviewHint { margin: 4px 0 16px; max-width: 90ch; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.rv-card { margin: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.rv-card.rv-changed { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.rv-card.is-edited { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rv-thumb { position: relative; aspect-ratio: 1; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 16px 16px; display: grid; place-items: center; }
.rv-thumb img { max-width: 100%; max-height: 100%; display: block; }
.chip {
  background: rgba(10, 11, 13, .7); color: #f2f1ec;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-sm); padding: 5px 9px; font: 600 11.5px/1.3 var(--sans);
  backdrop-filter: blur(12px) saturate(160%);
}
.rv-toggle { position: absolute; left: 8px; bottom: 8px; cursor: pointer; }
.rv-card figcaption { display: grid; gap: 7px; padding: 10px 12px 12px; min-width: 0; }
.rv-card figcaption > b { font-size: 13px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rv-used { margin-top: -4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-card .select { min-height: 32px; padding: 4px 10px; font-size: 13px; }

/* report */
.report { display: grid; gap: 12px; }
.report-sec { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.report-sec > header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface-2); }
.report-sec > header h4 { font: 700 11.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.report-sec > header svg { width: 17px; height: 17px; }
.report-sec.exact > header svg { color: var(--ok); }
.report-sec.approximate > header svg { color: var(--warn); }
.report-sec.skipped > header svg { color: var(--text-3); }
.report-sec ul { list-style: none; margin: 0; padding: 0; }
.report-sec li { padding: 12px 16px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; font-size: 13.5px; }
.report-sec li b { font-weight: 620; }
.report-sec li span { color: var(--text-2); }
.report-empty { padding: 12px 16px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 13.5px; }

/* downloads */
.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.dl {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface); min-width: 0;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.dl:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.dl.primary { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.dl h4 { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 14px; }
.dl p { font-size: 12.5px; color: var(--text-2); flex: 1; }
.dl .fname { font: 11.5px var(--mono); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl .row { margin-top: auto; }

/* studio steps */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 12px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.steps li::before {
  content: counter(s); width: 24px; height: 24px; border-radius: 5px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  font: 700 12px/1 var(--sans);
}
.steps li.no-num::before { visibility: hidden; }
.steps .snip { display: flex; gap: 6px; align-items: center; margin-top: 7px; flex-wrap: wrap; }
.steps code { padding: 4px 9px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); word-break: break-all; }

/* history */
.history { list-style: none; margin: 0; padding: 0; display: grid; }
.history li { border-top: 1px solid var(--border); }
.history li:first-child { border-top: 0; }
.hist-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; }
.hist-open { all: unset; cursor: pointer; display: grid; gap: 2px; min-width: 0; border-radius: var(--r-sm); padding: 5px 7px; transition: background .16s var(--ease); }
.hist-open:hover { background: var(--surface-2); }
.hist-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.hist-open .t { font-weight: 620; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-open .m { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-item.is-current .t { color: var(--accent-ink); }
.empty { padding: 20px 8px; text-align: center; color: var(--text-3); font-size: 13.5px; }

/* ---- login gate ---------------------------------------------------------------------------- */
.importer-gate { text-align: center; padding: 52px 28px 40px; overflow: hidden; }
.importer-gate h2 { font-size: 26px; letter-spacing: -.03em; margin: 14px 0 8px; }
.importer-gate .sub { margin: 0 auto 24px; font-size: 15px; line-height: 1.6; }
.importer-gate .auth-btn-discord { height: 46px; font-size: 15px; padding: 0 24px; margin: 0 auto; }
.gate-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 34px; text-align: left; }
.gate-feat { padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border-soft); font-size: 13px; color: var(--text-2); }
.gate-feat strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 2px; }

/* ---- toast / misc -------------------------------------------------------------------------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-2);
}
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: var(--r-sm); }
@keyframes sk { to { background-position: -200% 0; } }

/* ---- site pages: shared ------------------------------------------------------------------- */
.site { position: relative; z-index: 1; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.footer { position: relative; z-index: 1; border-top: 1px solid var(--border); margin-top: 40px; padding: 28px 0 36px; font-size: 13.5px; color: var(--text-3); }
.footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer a { color: var(--text-2); }
.footer a:hover { color: var(--text); }

/* ---- landing ------------------------------------------------------------------------------- */
/* Being rebuilt section by section. */
/* GradientASCII (React Bits, static/gradient-ascii.js) */
.gradient-ascii-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
.gradient-ascii-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* ...as the hero's background: full width behind the copy and the logo, fading out into the page */
.lp-hero-wrap { position: relative; isolation: isolate; margin-top: -68px; }   /* runs up under the pill bar */
/* a soft veil of the page colour behind the copy, so the headline and paragraph stay readable over the glow */
.lp-hero-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%,
              color-mix(in srgb, var(--bg) 62%, transparent) 38%, transparent 62%);
}
.lp-hero-bg {
  position: absolute; inset: 0; height: auto; min-height: 600px; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.lp-hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center;
  min-height: min(78vh, 760px); padding-top: 116px; padding-bottom: 64px;
}
.lp-intro { max-width: 660px; }
.lp-intro h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -.04em; margin: 20px 0 18px; }
.lp-intro h1 em { font-style: normal; color: var(--accent-ink); }
.lp-intro .lede { margin-bottom: 30px; font-size: 18px; }
/* The 3D logo (static/hero3d.js) draws into this square; the flat mark shows until it has rendered, or if it can't. */
.lp-logo { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; justify-self: center; }
.lp-logo canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.lp-logo-fallback {
  position: absolute; inset: 22%; border-radius: 18%; background: var(--accent); transition: opacity .6s var(--ease-out);
  transform: perspective(900px) rotateY(-24deg) rotateX(10deg); box-shadow: 0 40px 80px rgba(0, 0, 0, .35);
}
.lp-logo-fallback::before {
  content: ""; position: absolute; inset: 18%; background: var(--on-accent);
  -webkit-mask: url("/static/logo.png") center / contain no-repeat; mask: url("/static/logo.png") center / contain no-repeat;
}
.lp-logo.is-3d .lp-logo-fallback { opacity: 0; }
@media (max-width: 900px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 8px; padding-top: 92px; }
  .lp-logo { order: -1; max-width: 300px; }
}
.lp-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Scroll reveals. site.js marks <html class="js-reveal">, so without it nothing is ever hidden. A section's
   heading rises first, then its cards follow one by one (--i is the card's position). */
.js-reveal .reveal-on-scroll { opacity: 0; translate: 0 22px; transition: opacity .9s var(--ease-out), translate .9s var(--ease-out); }
.js-reveal .reveal-on-scroll.is-revealed { opacity: 1; translate: 0 0; }
.js-reveal .reveal-on-scroll [data-stagger] {
  opacity: 0; translate: 0 18px;
  transition: opacity .8s var(--ease-out) calc(var(--i, 0) * 80ms + 120ms), translate .8s var(--ease-out) calc(var(--i, 0) * 80ms + 120ms),
              border-color .25s var(--ease), transform .35s var(--ease-out);
}
.js-reveal .reveal-on-scroll.is-revealed [data-stagger] { opacity: 1; translate: 0 0; }

/* Sections */
.lp-section { padding-top: 72px; padding-bottom: 24px; }
.lp-head { max-width: 720px; margin-bottom: 32px; }
.lp-head h2 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.035em; line-height: 1.08; margin-bottom: 12px; }
.lp-head p { color: var(--text-2); font-size: 17px; line-height: 1.6; }

/* Get started in 4 steps: four plain columns under a rule */
.lp-steps { list-style: none; margin: 0; padding: 0; counter-reset: step;
            display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.lp-step { counter-increment: step; display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--border-strong); }
.lp-step::before { content: counter(step); font: 600 15px/1 var(--sans); color: var(--text-3); margin-bottom: 14px; }
.lp-step-ico { color: var(--accent-ink); margin-bottom: 4px; }
.lp-step-ico svg { display: block; width: 24px; height: 24px; }
.lp-step h3 { font-size: 18px; letter-spacing: -.02em; }
.lp-step p { color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.lp-steps-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; }
/* Pricing: two plans and what every conversion includes, side by side */
.lp-pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 14px; align-items: stretch; }
.lp-plan { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--r-xl); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.lp-plan-main { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.lp-plan h3 { font-size: 16px; color: var(--text-2); font-weight: 600; letter-spacing: -.01em; }
.lp-price { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 2px; }
.lp-price b { font-size: 48px; line-height: 1; letter-spacing: -.04em; font-weight: 700; color: var(--text); }
.lp-price span { color: var(--text-3); font-size: 15px; }
.lp-plan-note { color: var(--text-2); font-size: 14.5px; line-height: 1.6; flex: 1; margin-bottom: 8px; }
.lp-plan .btn { align-self: flex-start; }
.lp-included { padding: 26px 4px 26px 18px; }
.lp-included h3 { font-size: 16px; margin-bottom: 14px; }
.lp-included ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.lp-included li { display: flex; gap: 10px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.lp-included svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent-ink); }
/* FAQ: a card per question, two columns on desktop. The marker is replaced by a round + that turns into an x,
   and the answer eases in so opening one is not a jump. */
.lp-faq { max-width: 1040px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.lp-faq details {
  border: 1px solid var(--border); border-radius: var(--r-lg, 14px);
  background: color-mix(in srgb, var(--surface, #151517) 55%, transparent);
  transition: border-color .25s var(--ease, ease), background-color .25s var(--ease, ease);
}
.lp-faq details:hover { border-color: var(--border-strong, #3a3a40); }
.lp-faq details[open] {
  border-color: color-mix(in srgb, var(--accent, #d7ff3f) 45%, var(--border));
  background: color-mix(in srgb, var(--surface, #151517) 85%, transparent);
}
.lp-faq summary {
  list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 18px 20px; cursor: pointer; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
  border-radius: var(--r-lg, 14px);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--border-strong, #3a3a40); color: var(--text-2);
  font-size: 15px; font-weight: 500; line-height: 1;
  transition: transform .25s var(--ease-out, ease), color .25s, border-color .25s, background-color .25s;
}
.lp-faq details[open] summary::after {
  transform: rotate(45deg); color: var(--on-accent, #06080a); border-color: transparent; background: var(--accent, #d7ff3f);
}
.lp-faq summary:hover::after { border-color: var(--accent, #d7ff3f); color: var(--accent-ink, #d7ff3f); }
.lp-faq summary:focus-visible { outline: 2px solid var(--accent, #d7ff3f); outline-offset: 3px; }
.lp-faq details p {
  color: var(--text-2); font-size: 14.5px; line-height: 1.65; padding: 0 20px 18px; max-width: 62ch;
  animation: faqIn .3s var(--ease-out, ease) both;
}
.lp-faq details code { font-size: .92em; color: var(--text); }
@keyframes faqIn { from { opacity: 0; translate: 0 -4px; } }
@media (max-width: 860px) { .lp-faq { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1000px) {
  .lp-pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-included { grid-column: 1 / -1; padding: 8px 2px 0; }
}
@media (max-width: 600px) { .lp-pricing { grid-template-columns: minmax(0, 1fr); } }

/* AccordionGallery (React Bits, static/accordion-gallery.js): the features row */
.accordion-gallery {
  --ag-accent: #ffffff; --ag-overlay: #060010; --ag-text: #ffffff; --ag-gap: 10px; --ag-radius: 16px; --ag-media-size: 320px;
  display: flex; flex-direction: row; gap: var(--ag-gap); width: 100%; max-width: 100%;
  perspective: 1400px; perspective-origin: 50% 50%;
}
.accordion-gallery--vertical { flex-direction: column; }
.ag-panel {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; border-radius: var(--ag-radius);
  cursor: pointer; display: block; text-decoration: none; outline: none; transform-style: preserve-3d;
  transform-origin: center center; background: #0a0713; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
  will-change: flex-grow, transform; -webkit-tap-highlight-color: transparent;
}
.ag-panel:hover { text-decoration: none; }
.ag-panel:focus-visible { box-shadow: 0 0 0 2px var(--ag-accent), 0 10px 30px -18px rgba(0, 0, 0, .8); }
.ag-panel__frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.ag-panel__media {
  --ag-gray: 1; --ag-dim: .35;
  position: absolute; top: 50%; left: 50%; width: var(--ag-media-size); height: 100%;
  filter: grayscale(var(--ag-gray)); will-change: transform, filter;
}
.accordion-gallery--vertical .ag-panel__media { width: 100%; height: var(--ag-media-size); }
.ag-panel__media img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.ag-panel__overlay {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--ag-overlay) 88%, transparent) 100%),
    color-mix(in srgb, var(--ag-overlay) calc(var(--ag-dim, .35) * 100%), transparent);
}
.ag-panel__label {
  position: absolute; left: 22px; bottom: 22px; right: 22px; z-index: 2;
  display: flex; align-items: flex-start; gap: 12px; pointer-events: none;
}
.ag-panel__bar {
  flex: 0 0 auto; width: 3px; height: 26px; margin-top: 2px; border-radius: 3px; background: var(--ag-accent); opacity: 0;
  box-shadow: 0 0 12px color-mix(in srgb, var(--ag-accent) 60%, transparent);
}
.ag-panel__copy { display: grid; gap: 6px; min-width: 0; opacity: 0; }
.ag-panel__text {
  color: var(--ag-text); font-weight: 650; font-size: clamp(1.05rem, 1.5vw, 1.45rem); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}
.ag-panel__desc {
  color: color-mix(in srgb, var(--ag-text) 84%, transparent); font-size: 14.5px; line-height: 1.55; max-width: 46ch;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}
@media (prefers-reduced-motion: reduce) { .ag-panel, .ag-panel__media { will-change: auto; } }
@media (max-width: 1000px) {
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .lp-steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .accordion-gallery { flex-direction: column; perspective: none; height: auto !important; }
  .ag-panel { min-height: 84px; transform: none !important; transition: min-height .45s var(--ease-out); }
  .ag-panel--active { min-height: 300px; }
  .accordion-gallery .ag-panel__media { width: 100%; height: var(--ag-media-size); }
  .lp-section { padding-top: 48px; }
}

/* Page entrance: headings and intro copy rise line by line. */
@keyframes rise { from { opacity: 0; translate: 0 16px; } }
.lp-intro > *, .guide-head > * { animation: rise .9s var(--ease-out) both; }
.lp-intro > :nth-child(2), .guide-head > :nth-child(2) { animation-delay: .08s; }
.lp-intro > :nth-child(3), .guide-head > :nth-child(3) { animation-delay: .16s; }
.lp-intro > :nth-child(4), .guide-head > :nth-child(4) { animation-delay: .24s; }

/* Importer and account: cards, alerts and panels ease in whenever they appear (page load, or when the
   upload → progress → results steps swap). `translate` is used so hover transforms stay independent.

   The ease-in is a keyframe animation rather than `@starting-style`: a starting style only exists as the
   before-change value of a transition, so an element first rendered while its card is still `[hidden]` (the
   progress rows are built before the card is shown, and on the first poll while the card is display:none) can be
   left at opacity 0 — laid out, taking up its height, but invisible. An animation always runs to its end. */
.card, .alert, .tabpanel, .dl, .report-sec, .queue-banner { animation: easeIn .45s var(--ease-out) both; }
.stage { animation: stageIn .4s var(--ease-out) both; }
.toast { animation: toastIn .35s var(--ease-out) both; }
@keyframes easeIn { from { opacity: 0; translate: 0 10px; } }
@keyframes stageIn { from { opacity: 0; translate: -6px 0; } }
@keyframes toastIn { from { opacity: 0; translate: 0 8px; } }
.card, .alert, .tabpanel, .dl, .report-sec, .stage, .toast, .queue-banner {
  transition-property: border-color, background-color, transform;
  transition-duration: .2s, .2s, .2s;
  transition-timing-function: var(--ease-out);
}

/* ---- guide --------------------------------------------------------------------------------- */
.guide-head { padding-top: 56px; padding-bottom: 36px; }
.guide-head h1 { font-size: clamp(32px, 4.4vw, 48px); letter-spacing: -.035em; font-weight: 700; margin: 16px 0 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; align-items: start; }
.toc { position: sticky; top: 86px; padding: 18px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); }
.toc h2 { font: 700 11px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 10px; padding: 6px 8px; border-radius: 6px; color: var(--text-2); font-size: 13.5px; }
.toc a::before { content: counter(toc); font: 600 12px/1.6 var(--sans); color: var(--text-3); width: 12px; }
.toc a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.guide { display: grid; gap: 52px; min-width: 0; }
.guide section { scroll-margin-top: 86px; display: grid; gap: 14px; }
.guide h2 { font-size: 24px; letter-spacing: -.025em; display: flex; align-items: center; gap: 12px; }
.guide h2 .n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 5px; flex: none;
  background: var(--sign-bg); color: var(--sign-fg); border: 1.5px solid var(--sign-fg); font: 800 14px/1 var(--mono);
}
.guide h3 { font-size: 17px; margin-top: 8px; }
.guide p, .guide li { color: var(--text-2); font-size: 15px; line-height: 1.7; }
.guide ul, .guide ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.guide strong { color: var(--text); font-weight: 640; }
.guide code, .guide .snip code { padding: 2px 6px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: .86em; }
.snip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 8px 8px 8px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); max-width: 520px; }
.snip code { background: none !important; border: 0 !important; padding: 0 !important; word-break: break-all; }
.snip button { flex: none; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.snip button:hover { color: var(--text); background: var(--surface-3); }

.callout { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); font-size: 14px; color: var(--text-2); line-height: 1.6; }
.callout svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--accent-ink); }
.callout b { display: block; color: var(--text); margin-bottom: 2px; }
.callout-note { border-left: 3px solid var(--accent); }
.callout-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.callout-warn svg { color: var(--warn); }
.callout-ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.callout-ok svg { color: var(--ok); }

.steps-num { list-style: none !important; padding: 0 !important; counter-reset: sn; display: grid; gap: 14px !important; }
.steps-num > li { counter-increment: sn; position: relative; padding-left: 40px; }
.steps-num > li::before {
  content: counter(sn); position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 5px; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font: 700 12.5px/1 var(--sans);
}
.kv-list { display: grid; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.kv-list > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 14px 18px; border-top: 1px solid var(--border); }
.kv-list > div:first-child { border-top: 0; }
.kv-list dt, .kv-list b { font-size: 14px; font-weight: 640; color: var(--text); }
.kv-list dd, .kv-list span { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.6; }

/* ---- auth bar (rendered by auth.js) --------------------------------------------------------- */
.auth-bar { display: flex; align-items: center; gap: 10px; }
.auth-btn-discord {
  display: inline-flex; align-items: center; gap: 8px;
  background: #5865f2; color: #fff; font: inherit; font-size: 13px; font-weight: 600;
  padding: 0 13px; height: 34px; border-radius: var(--r-md); border: none; cursor: pointer; white-space: nowrap;
  transition: background .15s ease;
}
.auth-btn-discord:hover { background: #4f5bdc; }
.auth-btn-discord:active { background: #4752c4; }
.user-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px 5px 3px 4px; }
.user-credits-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-soft); color: var(--accent-ink);
  font: 700 12px/1 var(--sans); padding: 6px 8px; border-radius: 7px; white-space: nowrap; text-decoration: none;
}
.user-credits-badge:hover { text-decoration: none; }
.user-profile-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text); }
.user-avatar { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); }
.user-avatar-fallback { width: 24px; height: 24px; border-radius: 6px; background: var(--surface-3); color: var(--text); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.user-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-btn-signout { background: transparent; border: none; color: var(--text-3); padding: 5px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .15s ease, background .15s ease; }
.auth-btn-signout:hover { color: var(--bad); background: var(--surface-2); }

/* ---- ToS / ban modal (rendered by auth.js) --------------------------------------------------- */
.tos-modal-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(5, 5, 4, .78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: tosFadeIn .3s cubic-bezier(.16, 1, .3, 1) forwards;
}
.tos-modal-backdrop.closing { animation: tosFadeOut .25s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes tosFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tosFadeOut { from { opacity: 1; } to { opacity: 0; } }
.tos-modal-card {
  width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow: auto;
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-2);
  border-radius: var(--r-xl); padding: 30px 28px 26px;
  display: flex; flex-direction: column;
  animation: tosCardPop .35s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes tosCardPop { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
.tos-modal-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.tos-modal-card h2 { font-size: 22px; font-weight: 720; letter-spacing: -.025em; margin: 0 0 8px; }
.tos-modal-card p { color: var(--text-2); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.tos-bullets { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 20px; display: grid; gap: 10px; }
.tos-bullet-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.tos-bullet-item svg { color: var(--ok); flex-shrink: 0; margin-top: 2px; }
.tos-checkbox-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; cursor: pointer; user-select: none; }
.tos-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); margin-top: 2px; cursor: pointer; }
.tos-checkbox-row span { font-size: 13.5px; color: var(--text); line-height: 1.45; }
.tos-checkbox-row a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.tos-actions { display: flex; flex-direction: column; gap: 10px; }

/* ---- responsive ---------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .nav a.hide-md { display: none; }
  .form-grid, .checks { grid-template-columns: minmax(0, 1fr); }
  .detected { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gate-features { grid-template-columns: minmax(0, 1fr); }
  .report-sec li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .kv-list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 600px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .topbar { gap: 6px; height: 56px; }
  .topbar .hide-sm, .nav .hide-sm { display: none; }
  .brand .brand-text { display: none; }
  .nav a { padding: 7px 8px; font-size: 13.5px; }
  .card-pad { padding: 18px; }
  .pct { font-size: 32px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js-reveal .reveal-on-scroll, .js-reveal .reveal-on-scroll [data-stagger] { opacity: 1; translate: 0 0; }
}