/* Self-hosted brand fonts, latin subset (covers EN and ES).

   Do NOT go back to `@import url('https://fonts.googleapis.com/...')`. The site's
   own CSP sends `style-src 'self'`, so the browser refuses that stylesheet and
   both fonts silently fall back to system-ui / ui-monospace on every page — the
   failure is invisible unless you read the console. Self-hosting also keeps
   visitor IPs away from Google, which is what privacy.html promises.

   Both files are variable fonts, so one file covers the whole weight range. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-variable.woff2') format('woff2');
}

/* ==========================================================================
   High-Voltage Audio — design tokens
   Dark-Mode Modern with Hardware Accents. See DESIGN.md.
   ========================================================================== */

:root {
  /* Tonal surfaces (elevation by tone, not shadow) */
  --color-bg: #131313;
  --color-surface-lowest: #0e0e0e;
  --color-surface-low: #1c1b1b;
  --color-surface: #201f1f;
  --color-surface-high: #2a2a2a;
  --color-surface-highest: #353534;

  /* Signal Orange */
  --color-signal: #ff6600;
  --color-on-signal: #561d00;
  --color-primary: #ffb596;
  --color-primary-bright: #ffdbcd;
  --color-on-primary: #581e00;
  --color-signal-rgb: 255, 102, 0;
  --color-primary-rgb: 255, 181, 150;

  /* Text */
  --color-text: #e5e2e1;
  --color-text-muted: #c6c6c7;
  --color-text-dim: #aa8a7d;

  /* Lines */
  --color-border: #333333;
  --color-border-strong: #5a4136;
  --color-border-accent: rgba(var(--color-signal-rgb), 0.35);

  /* Functional */
  --color-success: #3ddc84;
  --color-error: #ffb4ab;
  --color-on-error: #690005;

  /* Type */
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Shape — technical & structured, no pills except chips */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* 8px grid */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;

  --container-max: 1200px;
  --gutter: 24px;
  --margin-mobile: 16px;

  --glow-focus: 0 0 8px rgba(var(--color-signal-rgb), 0.55);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Legacy aliases — keep older page styles resolving to the new palette */
  --color-base: var(--color-bg);
  --color-base-lighter: var(--color-surface-low);
  --color-accent: var(--color-primary);
  --color-accent-secondary: var(--color-primary-bright);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  min-height: 100vh;
  color: var(--color-text);
  padding-top: 96px;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Navigation */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(19, 19, 19, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  z-index: 50;
  padding: 0 var(--space-3);
}

.nav-container {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  gap: var(--space-3);
  align-items: center;
  height: 64px;
  position: relative;
}

.nav-container .nav-links {
  flex: 1;
}

/* Hamburger Button */
.hamburger-btn {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  position: relative;
  z-index: 51;
}

.hamburger-btn span {
  width: 24px;
  height: 2px;
  background: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  display: block;
}

.hamburger-btn:hover span {
  background: var(--color-signal);
}

.hamburger-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.hamburger-btn.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

.nav-brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-signal);
  text-decoration: none;
  transition: color var(--transition);
}

.nav-brand:hover {
  color: var(--color-primary-bright);
}

.nav-links {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color var(--transition);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-signal);
  transition: width var(--transition);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-text);
}

/* Back link (pages) */
.back-link {
  display: inline-block;
  color: var(--color-primary);
  text-decoration: none;
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: color var(--transition);
}

.back-link:hover {
  color: var(--color-primary-bright);
}

/* Language Switcher */
.lang-switcher {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}

.lang-btn {
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: all var(--transition);
}

.lang-btn:hover {
  border-color: var(--color-signal);
  color: var(--color-text);
}

.lang-btn.active {
  border-color: var(--color-signal);
  background: rgba(var(--color-signal-rgb), 0.12);
  color: var(--color-signal);
}

/* Container */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Typography */
h1 {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1.125;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}

h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

p {
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-primary-bright);
}

:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}

code,
.mono {
  font-family: var(--font-mono);
}

/* Chips / status — mono, the one place pills are allowed */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-high);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.05em;
}

.chip.accent {
  border-color: var(--color-border-accent);
  color: var(--color-signal);
}

.chip.success {
  border-color: rgba(61, 220, 132, 0.35);
  color: var(--color-success);
}

/* Header */
header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.tagline {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.subtitle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-signal);
  margin-bottom: var(--space-5);
}

/* Features */
.features {
  display: flex;
  gap: var(--space-5);
  justify-content: center;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.feature {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.feature::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--color-signal);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--color-on-signal);
}

/* Tools Section */
.tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.tool-card {
  background: var(--color-surface-low);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  overflow: hidden;
}

.tool-card:hover {
  border-color: var(--color-signal);
  background: var(--color-surface);
  transform: translateY(-4px);
}

.tool-icon {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-signal);
}

.tool-card h2 {
  font-size: 1.5rem;
  margin: 0;
  margin-top: var(--space-1);
}

.tool-card p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.tool-link {
  display: inline-block;
  margin-top: auto;
  color: var(--color-signal);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--transition);
}

.tool-link:hover {
  color: var(--color-primary-bright);
  transform: translateX(4px);
}

.tool-card.coming-soon {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.coming-soon-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--color-surface-high);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-dim);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Waveform */
.waveform-container {
  position: relative;
  height: 200px;
  margin: var(--space-5) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.waveform {
  width: 100%;
  height: 100%;
  max-width: 800px;
}

.waveform-bar {
  fill: var(--color-signal);
  opacity: 0.8;
  animation: waveFloat 1.8s ease-in-out infinite;
}

@keyframes waveFloat {
  0%,
  100% {
    opacity: 0.6;
    transform: scaleY(0.8);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* Footer */
footer {
  margin-top: var(--space-10);
  text-align: center;
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}

/* Site-wide legal links footer (rendered by layout.html on every page) */
.site-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  max-width: var(--container-max);
  margin: var(--space-5) auto var(--space-3);
  padding: var(--space-3);
  border-top: none;
}

.site-footer a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-primary-bright);
}

/* ==========================================================================
   Browser-extension notice — built in JS by app/src/extension-notice.js, once
   per local calendar day until the visitor dismisses it with OK.
   Corner-anchored and non-modal on purpose: it is a hint, not an interruption,
   so it never covers a tool's controls and never takes focus.
   z-index sits above the nav (50/51) and below the mobile menu (100) and the
   modals (1000) — the notice must not float over a dialog.
   ========================================================================== */

.extension-notice {
  position: fixed;
  left: var(--space-2);
  bottom: var(--space-2);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 24rem;
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface-high);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-signal);
  border-radius: var(--radius);
}

.extension-notice-text {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.extension-notice-btn {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  color: var(--color-on-signal);
  background: var(--color-signal);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.extension-notice-btn:hover {
  background: var(--color-primary);
}

.extension-notice-btn:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
  box-shadow: var(--glow-focus);
}

@media (max-width: 768px) {
  .extension-notice {
    left: var(--margin-mobile);
    right: var(--margin-mobile);
    max-width: none;
  }
}

.site-footer .sep {
  color: var(--color-border);
}

/* ==========================================================================
   Legal & policy documents — legal / privacy / cookies (EN + ES)
   Applied as `<div class="container doc">`.
   ========================================================================== */

.doc {
  max-width: 800px;
}

.doc .section {
  margin-bottom: var(--space-4);
}

.doc .section h2 {
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.doc .section p {
  margin-bottom: var(--space-1);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.doc .section ul,
.doc .section ol {
  margin-left: var(--space-3);
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.doc .section li {
  margin-bottom: 4px;
}

/* A paragraph that introduces or follows a list needs the extra breathing room */
.doc .section ul + p,
.doc .section ol + p {
  margin-top: var(--space-2);
}

/* Closing note at the bottom of a policy document */
.doc .doc-note {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  margin-top: var(--space-4);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-2) 0;
  font-size: 0.9375rem;
}

.cookie-table th,
.cookie-table td {
  border: 1px solid var(--color-border);
  padding: var(--space-1);
  text-align: left;
  color: var(--color-text-muted);
}

.cookie-table th {
  background: rgba(var(--color-signal-rgb), 0.1);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Sections */
.section {
  background: var(--color-surface-low);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  transition: all var(--transition);
}

.section:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
}

/* Buttons */
.btn,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 12px var(--space-3);
  background: var(--color-signal);
  border: 1px solid var(--color-signal);
  border-radius: var(--radius-md);
  color: var(--color-on-signal);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}

.btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.15);
}

.btn:active:not(:disabled),
.btn-primary:active:not(:disabled) {
  transform: scale(0.98);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 12px var(--space-3);
  background: transparent;
  border: 1px solid var(--color-signal);
  border-radius: var(--radius-md);
  color: var(--color-signal);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-secondary:hover:not(:disabled) {
  background: rgba(var(--color-signal-rgb), 0.12);
  color: var(--color-primary-bright);
}

.btn-secondary:active:not(:disabled) {
  transform: scale(0.98);
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
  background: var(--color-surface-high);
  border-color: var(--color-border);
  color: var(--color-text-dim);
  cursor: not-allowed;
  filter: none;
}

/* Responsive */
@media (max-width: 768px) {
  body {
    padding-top: 96px;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.5rem;
    line-height: 1.33;
  }

  h3 {
    font-size: 1.125rem;
  }

  .container {
    padding: 0 var(--margin-mobile);
  }

  .hamburger-btn {
    display: flex;
  }

  .nav-links {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--color-surface-lowest);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    gap: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
    list-style: none;
    z-index: 100;
  }

  .nav-links.active {
    max-height: 400px;
    padding: var(--space-2) var(--space-3);
  }

  .nav-links li {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-links li:last-child {
    border-bottom: none;
  }

  .nav-links a {
    font-size: 0.9375rem;
    display: block;
  }

  .nav-links a::after {
    display: none;
  }

  .nav-container .nav-links {
    flex: none;
  }

  .lang-switcher {
    gap: 4px;
  }

  .lang-btn {
    padding: 4px 10px;
  }

  .features {
    gap: var(--space-2);
    flex-direction: column;
    align-items: center;
  }

  .features .feature {
    font-size: 0.875rem;
  }

  .tools {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .tool-card {
    padding: var(--space-3);
  }

  .tool-icon {
    font-size: 2rem;
  }

  .tool-card h2 {
    font-size: 1.25rem;
  }

  .tool-card p {
    font-size: 0.875rem;
  }

  .waveform-container {
    height: 120px;
    margin: var(--space-4) 0;
  }

  .section {
    padding: var(--space-3);
    margin-bottom: var(--space-2);
  }

  .tool-container {
    padding: 0 var(--margin-mobile);
  }

  .article-container {
    padding: 0 var(--margin-mobile);
  }

  .tagline {
    font-size: 1rem;
  }

  footer {
    padding: var(--space-3) 0;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  .container {
    padding: 0 12px;
  }

  .nav-brand {
    font-size: 1.0625rem;
  }

  .nav-links {
    gap: 10px;
  }

  .tool-card {
    padding: var(--space-2);
  }

  .section {
    padding: var(--space-2);
  }
}

/* Article & Guide Content */
.article-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.tool-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.content-header {
  margin-bottom: var(--space-5);
}

.content-header h1 {
  font-size: 2.5rem;
  margin-bottom: var(--space-2);
}

.article-meta {
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.article {
  line-height: 1.6;
  color: var(--color-text-muted);
}

.article h2 {
  font-size: 1.5rem;
  color: var(--color-text);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.article p {
  margin-bottom: var(--space-3);
}

.article ul,
.article ol {
  margin-left: var(--space-3);
  margin-bottom: var(--space-3);
}

.article li {
  margin-bottom: var(--space-1);
}

.article code {
  background: var(--color-surface-high);
  border: 1px solid var(--color-border);
  padding: 2px 6px;
  border-radius: var(--radius);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.tool-header {
  margin-bottom: var(--space-6);
}

.tool-header h1 {
  font-size: 3rem;
  margin-bottom: var(--space-2);
}

.tool-description {
  color: var(--color-text-muted);
  font-size: 1.0625rem;
}

/* ==========================================================================
   Tool page components — shared by convert / analyze / visual-generator
   ========================================================================== */

/* Eyebrow labels that title a step or a sidebar panel */
.section-title,
.sidebar-section h3 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-signal);
  margin-bottom: var(--space-2);
}

/* File pickers — the <input type=file> is hidden, the label is the drop target */
.file-input-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.file-input-wrapper input[type='file'] {
  display: none;
}

.file-input-label,
.upload-dropzone {
  display: block;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-low);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
}

.uploads-sidebar .upload-dropzone {
  padding: var(--space-2) var(--space-1);
}

.uploads-sidebar .upload-dropzone strong {
  font-size: 0.875rem;
}

.uploads-sidebar .upload-hint {
  font-size: 0.625rem;
}

.file-input-label:hover,
.upload-dropzone:hover {
  border-color: var(--color-signal);
  background: var(--color-surface);
}

.file-input-label.dragover,
.upload-dropzone.dragover {
  border-color: var(--color-signal);
  background: rgba(var(--color-signal-rgb), 0.1);
  box-shadow: var(--glow-focus);
}

.file-input-icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.file-input-text {
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 4px;
}

.file-input-hint,
.upload-hint {
  /* A span inside <label> (phrasing content only) still has to stack like the
     block-level <p> it replaced. */
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 16px;
  letter-spacing: 0.05em;
  color: var(--color-text-dim);
}

/* Selected-file readout */
.file-info {
  background: rgba(var(--color-signal-rgb), 0.1);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  margin-top: var(--space-2);
  display: none;
}

.file-info.active {
  display: block;
}

.file-name {
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 4px;
  word-break: break-word;
}

.file-details,
.file-list {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 16px;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  word-break: break-word;
}

/* Choice tiles — target format, frequency scale, and other radio/toggle rows */
.format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-1);
}

.format-option {
  position: relative;
}

.format-option input {
  display: none;
}

.format-option label,
.control-btn {
  display: block;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  padding: var(--space-2);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.format-option label:hover,
.control-btn:hover {
  border-color: var(--color-signal);
  color: var(--color-text);
}

.format-option input:checked + label,
.control-btn.active {
  border-color: var(--color-signal);
  background: rgba(var(--color-signal-rgb), 0.15);
  color: var(--color-signal);
}

.format-option input:focus-visible + label {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}

/* Neutral ghost button — secondary actions that must not compete with a CTA */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 12px var(--space-3);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-ghost:hover:not(:disabled) {
  border-color: var(--color-signal);
  color: var(--color-text);
}

.btn-ghost:active:not(:disabled) {
  transform: scale(0.98);
}

/* ==========================================================================
   Visual Generator Page
   ========================================================================== */

/* Editor Layout */

.editor-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

/* Preview + Uploads Row */

.preview-uploads-row {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--space-3);
  align-items: stretch;
}

/* Preview Section */

.preview-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.preview-section .section-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-signal);
  margin: 0;
}

/* Uploads Sidebar */

.uploads-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
}

.uploads-sidebar .control-group {
  gap: var(--space-1);
}

.uploads-sidebar .control-label {
  font-size: 0.8125rem;
}

.uploads-sidebar .quality-toggle label {
  padding: var(--space-1) var(--space-1);
  font-size: 0.7rem;
}

.uploads-sidebar .export-btn-sidebar {
  padding: 10px var(--space-2);
  font-size: 0.875rem;
}

/* Editor Section (Controls) */

.editor-section {
  background: var(--color-surface-low);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.upload-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-3);
}

/* Canvas Preview */

.canvas-container {
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas-container canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Upload Dropzones */

.upload-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Visually hidden: the wrapping .upload-dropzone label still opens the picker. */
.file-input {
  display: none;
}

/* Logo Controls */

.logo-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.control-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.control-value {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-signal);
}

.control-hint {
  font-size: 0.75rem;
  color: var(--color-text-dim);
  margin: 0;
}

.slider {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-highest);
  outline: none;
  accent-color: var(--color-signal);
  cursor: pointer;
}

.position-input {
  padding: var(--space-1);
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  transition: all var(--transition);
}

.position-input:focus {
  outline: none;
  border-color: var(--color-signal);
  box-shadow: var(--glow-focus);
}

/* Action Buttons — scoped to .button-group so the shared nav buttons
   (.hamburger-btn, .lang-btn) and the convert/analyze page buttons
   keep their own styling. */

.button-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.button-group button {
  padding: 12px;
  background: var(--color-signal);
  border: 1px solid var(--color-signal);
  border-radius: var(--radius-md);
  color: var(--color-on-signal);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}

.button-group button:hover:not(:disabled) {
  filter: brightness(1.15);
}

.button-group button:active:not(:disabled) {
  transform: scale(0.98);
}

.button-group button:disabled {
  background: var(--color-surface-high);
  border-color: var(--color-border);
  color: var(--color-text-dim);
  cursor: not-allowed;
  filter: none;
}

/* Export Button */

.export-btn {
  width: 100%;
  padding: 16px;
  background: var(--color-signal);
  border: 1px solid var(--color-signal);
  border-radius: var(--radius-md);
  color: var(--color-on-signal);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}

.export-btn:hover:not(:disabled) {
  filter: brightness(1.15);
}

.export-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.export-btn:disabled {
  background: var(--color-surface-high);
  border-color: var(--color-border);
  color: var(--color-text-dim);
  cursor: not-allowed;
  filter: none;
}

.export-btn-sidebar {
  padding: 12px;
  font-size: 0.9375rem;
}

/* Preview sits directly above Export in the sidebar. Same geometry, outline
   treatment — the orange fill stays on the one primary CTA. */
.export-btn-outline {
  background: transparent;
  color: var(--color-signal);
}

.export-btn-outline:hover:not(:disabled) {
  background: rgba(var(--color-signal-rgb), 0.12);
  color: var(--color-primary-bright);
  filter: none;
}

/* Progress + Messages */

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-surface-highest);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: var(--space-2);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-signal);
  transition: width 0.1s ease;
}

.progress-text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.message {
  margin-top: var(--space-2);
  padding: 12px var(--space-2);
  border-radius: var(--radius);
  background: var(--color-surface-low);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-signal);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.message.success {
  background: rgba(var(--color-signal-rgb), 0.1);
  border-color: var(--color-border-accent);
  border-left-color: var(--color-success);
  color: var(--color-success);
}

.message.error {
  background: rgba(105, 0, 5, 0.25);
  border-color: rgba(255, 180, 171, 0.35);
  border-left-color: var(--color-error);
  color: var(--color-error);
}

/* Preview Modal */

.preview-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 14, 14, 0.92);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.preview-modal.open {
  display: flex;
}

.preview-modal-content {
  position: relative;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-surface-high);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.preview-video {
  display: block;
  width: 100%;
  max-height: 70vh;
  border-radius: var(--radius);
  background: #000;
}

.preview-status {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  text-align: center;
}

.close-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color var(--transition);
}

.close-btn:hover {
  color: var(--color-signal);
}

/* Confirm dialog — reuses .preview-modal for the backdrop and the panel, so a
   dialog is a dialog everywhere on the site. Only the contents differ. */
.confirm-dialog-content {
  max-width: 460px;
}

.confirm-dialog-message {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.5;
}

.confirm-dialog-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* .export-btn is full-width by default; in a dialog the two buttons share a row. */
.confirm-dialog-actions .export-btn,
.confirm-dialog-actions .btn-secondary {
  width: auto;
  padding: 12px var(--space-3);
  font-size: 0.9375rem;
}

/* Responsive */

@media (max-width: 768px) {
  .preview-uploads-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .uploads-sidebar {
    gap: var(--space-2);
  }

  .controls-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .canvas-container {
    aspect-ratio: 16 / 9;
  }

  .preview-modal-content {
    width: 95%;
    padding: var(--space-2);
  }

  .editor-section {
    padding: var(--space-3);
  }

  .export-btn {
    padding: 12px;
    font-size: 0.9375rem;
  }
}

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

  .waveform-bar {
    animation: none !important;
  }
}