/* Go Rocket — self-contained chrome + auth surface (design v2, engine orange).
   Loaded on every go-rocket host page (see base_wsk.html) AND standalone on the
   landing page (which does not load ugc.css). Chrome values are therefore
   hardcoded to the v2 design system — do not replace them with ugc.css vars:
   --bg deep #070a12 · line rgba(148,163,196,.14) · ink #f2f5fb · muted #9aa6bf
   · accent #ff5a1f · display font "Space Grotesk" · body "Instrument Sans".
   The product-console body styles in ugc.css stay untouched (cyan, until the
   product surface gets its own v2 pass). */

/* ---- Brand token override (go-rocket hosts only) ---------------------
   ugc.css ships the WirStartenKI look (navy #051C2C + cyan #00D4FF, Inter +
   Playfair). This file loads AFTER it and only on go-rocket hosts, so
   re-pointing the tokens here puts the whole product surface (upload
   console, jobs, progress) on the go-rocket landing design system —
   deep-space #070a12, engine orange, Space Grotesk display — without
   touching the WSK-host look. (Felix, 2026-06-10: the generation UI must
   match go-rocket.ai; same functionality as on WirStartenKI.) */
:root {
  --accent: #ff5a1f;
  --accent-hover: #e8480f;
  --accent-glow: rgba(255, 90, 31, 0.24);
  --accent-rgb: 255, 90, 31;
  --bg-primary: #070a12;
  --text-secondary: #9aa6bf;
  --text-muted: #5d6985;
  --border: rgba(148, 163, 196, 0.14);
  --card-bg: rgba(13, 19, 34, 0.6);
  --card-hover: rgba(17, 26, 46, 0.85);
  --font-serif: "Space Grotesk", sans-serif;
  --font-sans: "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
/* The decorative wave lines in base_wsk.html hardcode cyan strokes; CSS
   wins over SVG presentation attributes, so recolor them here. */
.bg-lines path { stroke: rgba(255, 90, 31, 0.30); }

/* ---- Header ---------------------------------------------------------- */
.gr-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(7, 10, 18, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(148, 163, 196, 0.14);
}
.gr-header__inner {
  max-width: 1160px; margin: 0 auto; padding: 0 28px;
  min-height: 68px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
}
.gr-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600; font-size: 18px; letter-spacing: -0.02em;
  color: #f2f5fb; text-decoration: none; white-space: nowrap;
}
.gr-brand__mark { width: 28px; height: 28px; color: #f2f5fb; }
.gr-nav { display: flex; align-items: center; gap: 16px; }
.gr-link {
  color: #9aa6bf; text-decoration: none;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 500; font-size: 14.5px; white-space: nowrap;
  padding: 8px 4px; border-radius: 8px;
  transition: color 120ms ease;
}
.gr-link:hover { color: #f2f5fb; }
.gr-link:focus-visible { outline: 2px solid #7dd0e8; outline-offset: 2px; }

/* Token-balance pill (authenticated header). */
.gr-wallet {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500; font-size: 13px; white-space: nowrap;
  color: #f2f5fb;
  background: rgba(255, 90, 31, 0.12);
  border: 1px solid rgba(255, 90, 31, 0.35);
  border-radius: 999px; padding: 5px 12px;
}
.gr-wallet--mobile { align-self: flex-start; margin: 4px 0 8px; }

.gr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 20px; border-radius: 999px;
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: -0.01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.gr-btn:focus-visible { outline: 2px solid #7dd0e8; outline-offset: 3px; }
.gr-btn--primary {
  background: #ff5a1f; color: #1a0e06;
  box-shadow: 0 8px 24px -8px rgba(255, 90, 31, 0.65);
}
.gr-btn--primary:hover { background: #e8480f; transform: translateY(-1px); }
.gr-btn--primary:active { background: #cf3d09; transform: translateY(0); }
.gr-btn--block { width: 100%; min-height: 48px; font-size: 15px; }
.gr-btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.gr-btn--ghost {
  background: transparent; color: #f2f5fb;
  border-color: rgba(148, 163, 196, 0.35);
}
.gr-btn--ghost:hover { border-color: rgba(148, 163, 196, 0.7); background: rgba(148, 163, 196, 0.08); }

/* Native-select language picker (no JS dependency, RTL-safe). */
.gr-lang { position: relative; display: inline-flex; }
.gr-lang select {
  appearance: none; -webkit-appearance: none;
  background: rgba(13, 19, 34, 0.6); color: #f2f5fb;
  border: 1px solid rgba(148, 163, 196, 0.14); border-radius: 999px;
  height: 40px; padding: 0 34px 0 16px;
  font-family: "Instrument Sans", sans-serif; font-size: 13px; font-weight: 500; cursor: pointer;
}
.gr-lang select:focus {
  outline: none; border-color: #ff5a1f;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.12);
}
.gr-lang::after {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.6px solid #9aa6bf;
  border-bottom: 1.6px solid #9aa6bf;
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}

/* ---- Auth surface ---------------------------------------------------- */
/* Rendered on product/auth pages over the ugc.css body — structural rules keep
   ugc.css vars; accent recolored to engine orange. */
.gr-auth {
  min-height: calc(100vh - 68px);
  display: flex; align-items: center; justify-content: center;
  padding: 48px 20px;
}
.gr-card {
  width: 100%; max-width: 432px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, rgba(148, 163, 196, 0.14)); border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}
.gr-card__head { text-align: center; margin-bottom: 24px; }
.gr-card__head h1 {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px;
}
.gr-card__head p { color: var(--text-muted, #9aa6bf); font-size: 0.95rem; margin: 0; }
.gr-field { margin-bottom: 16px; }
.gr-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text-secondary, #9aa6bf); margin-bottom: 6px;
}
.gr-input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--border, rgba(148, 163, 196, 0.14)); background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary, #f2f5fb); font-family: var(--font-sans, "Instrument Sans", sans-serif); font-size: 15px;
}
.gr-input:focus {
  outline: none; border-color: #ff5a1f;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.12);
}
.gr-error { color: #ff8a8a; font-size: 13px; margin: 6px 0 0; }
.gr-consent {
  display: flex; gap: 9px; align-items: flex-start; margin: 18px 0;
  font-size: 13px; color: var(--text-muted, #9aa6bf); line-height: 1.45;
}
.gr-consent input { margin-top: 3px; accent-color: #ff5a1f; }
.gr-alt { text-align: center; margin-top: 20px; color: var(--text-muted, #9aa6bf); font-size: 14px; }
.gr-alt a { color: #ff7a47; text-decoration: none; font-weight: 600; }
.gr-note { text-align: center; margin-top: 14px; font-size: 12px; color: var(--text-muted, #9aa6bf); }
.gr-msgs { list-style: none; padding: 0; margin: 0 0 16px; }
.gr-msgs li {
  padding: 10px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border, rgba(148, 163, 196, 0.14));
}
.gr-msgs li.error { border-color: rgba(255, 138, 138, 0.4); color: #ffb0b0; }
.gr-msgs li.success { border-color: rgba(52, 211, 153, 0.4); color: #34d399; }

/* ---- Footer ---------------------------------------------------------- */
.gr-footer {
  border-top: 1px solid rgba(148, 163, 196, 0.14);
  background: #070a12;
  margin-top: 0;
}
.gr-footer__inner {
  max-width: 1160px; margin: 0 auto; padding: 44px 28px 52px;
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center; justify-content: space-between;
}
.gr-footer__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600; font-size: 18px; letter-spacing: -0.02em;
  color: #f2f5fb; text-decoration: none; white-space: nowrap;
}
.gr-footer__legal { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; padding: 0; margin: 0; }
.gr-footer__legal a { color: #9aa6bf; text-decoration: none; font-size: 13.5px; font-family: "Instrument Sans", sans-serif; }
.gr-footer__legal a:hover { color: #f2f5fb; }
.gr-footer__copy {
  width: 100%;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; letter-spacing: 0.04em;
  color: #5d6985; margin: 0;
}

/* ---- Mobile menu (CSS-only checkbox toggle, no JS) ------------------- */
.gr-menu-checkbox { display: none; }
.gr-menu-btn {
  display: none; flex-direction: column; justify-content: center;
  align-items: center; gap: 4px;
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid rgba(148, 163, 196, 0.25); border-radius: 999px;
  background: rgba(13, 19, 34, 0.6); cursor: pointer;
}
.gr-menu-btn__line {
  width: 16px; height: 1.5px; border-radius: 999px;
  background: #f2f5fb;
  transition: transform 160ms ease, opacity 160ms ease;
}
.gr-menu-checkbox:checked ~ .gr-menu-btn .gr-menu-btn__line:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.gr-menu-checkbox:checked ~ .gr-menu-btn .gr-menu-btn__line:nth-child(2) { opacity: 0; }
.gr-menu-checkbox:checked ~ .gr-menu-btn .gr-menu-btn__line:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.gr-mobile-panel {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  padding: 12px 24px 16px;
  background: rgba(7, 10, 18, 0.96);
  border-bottom: 1px solid rgba(148, 163, 196, 0.14);
  backdrop-filter: blur(24px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}
.gr-mobile-link {
  display: flex; align-items: center;
  min-height: 44px; padding: 12px 16px; margin-bottom: 8px;
  border: 1px solid rgba(148, 163, 196, 0.14); border-radius: 12px;
  background: rgba(13, 19, 34, 0.6); color: #f2f5fb;
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.gr-lang--mobile { display: none; }

@media (max-width: 768px) {
  .gr-nav .gr-link,
  .gr-nav .gr-wallet,
  .gr-nav .gr-lang { display: none; }
  .gr-menu-btn { display: flex; }
  .gr-menu-checkbox:checked ~ .gr-mobile-panel { display: block; }
  .gr-lang--mobile { display: inline-flex; }
  .gr-lang--mobile select { width: 100%; }
}

@media (max-width: 560px) {
  .gr-card { padding: 28px 20px; }
}