/* ele — styles.css  (dark photo theme) */

:root {
  --bg:           #09090c;
  --surface:      #13141a;
  --surface-2:    #1a1b22;
  --border:       #252830;
  --border-subtle:#1d1f27;
  --text:         #eef0f5;
  --text-2:       #8a93a3;
  --text-3:       #4e5668;
  --accent:       #5b9cf6;
  --accent-hover: #78b0ff;
  --accent-muted: #1a2d4a;
  --accent-fg:    #07122a;
  --success:      #3fd068;
  --success-fg:   #041c10;
  --warn:         #f9b827;
  --error:        #f06a6a;
  --radius:       9px;
  --shadow:       0 1px 3px rgba(0,0,0,.60), 0 4px 16px rgba(0,0,0,.30);
  --shadow-card:  0 0 0 1px rgba(255,255,255,.03), 0 1px 3px rgba(0,0,0,.50), 0 6px 20px rgba(0,0,0,.25);
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ── Header ──────────────────────────────────────────────────────────────── */

.site-header {
  background: rgba(6,6,9,.96);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 0;
  flex-shrink: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.3px;
}
.logo:hover { color: #ffffff; text-decoration: none; }

.tagline {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: .01em;
}

/* ── Container ───────────────────────────────────────────────────────────── */

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

main {
  flex: 1;
  padding: 40px 0 64px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 16px 0;
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  flex-shrink: 0;
  letter-spacing: .01em;
}

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

/* ── Cards ───────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 26px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.025) 0%, transparent 60%);
  pointer-events: none;
}

.card-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-3);
  margin-bottom: 18px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  margin-bottom: 32px;
  padding-top: 8px;
}

.hero h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.5px;
  margin-bottom: 10px;
  color: var(--text);
  line-height: 1.25;
}

.hero .lead {
  font-size: 14px;
  color: var(--text-2);
  max-width: 560px;
  line-height: 1.7;
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */

.alert {
  border-radius: var(--radius);
  padding: 13px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
}

.alert a { font-weight: 600; }

.alert-error {
  background: #2a1212;
  border: 1px solid #4a1f1f;
  color: var(--error);
}
.alert-error a { color: #fca5a5; }

.alert-warn {
  background: #252010;
  border: 1px solid #44360e;
  color: var(--warn);
}
.alert-warn a { color: #fde68a; }

.alert-info {
  background: var(--accent-muted);
  border: 1px solid #1e3048;
  color: #89bfff;
}
.alert-info a { color: var(--accent-hover); }

/* ── Form ────────────────────────────────────────────────────────────────── */

.field-group { margin-bottom: 22px; }

.field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-2);
  margin-bottom: 8px;
}

/* Radio grid */
.radio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.radio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  user-select: none;
}

.radio-card:hover { border-color: var(--accent); background: var(--accent-muted); }

.radio-card input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.radio-card.checked {
  border-color: var(--accent);
  background: var(--accent-muted);
}

.radio-card strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  pointer-events: none;
}

.radio-card small {
  font-size: 12px;
  color: var(--text-2);
  pointer-events: none;
}

/* Select */
select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--surface-2);
  color: var(--text);
  width: 200px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
}

select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,156,246,.15);
}

/* Dropzone */
.dropzone {
  position: relative;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 44px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  margin-bottom: 22px;
  background: var(--surface-2);
}

.dropzone:hover, .dropzone.drag-over {
  border-color: var(--accent);
  background: var(--accent-muted);
  box-shadow: 0 0 0 3px rgba(91,156,246,.12);
}

.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.drop-icon {
  display: block;
  margin: 0 auto 12px;
  width: 36px;
  height: 36px;
  color: var(--text-3);
}

.drop-text   { font-size: 14px; font-weight: 600; color: var(--text); }
.drop-hint   { font-size: 12px; color: var(--text-2); margin-top: 5px; }
.file-chosen { font-size: 13px; color: var(--accent); font-weight: 500; margin-top: 12px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background .12s, box-shadow .12s, transform .08s, opacity .12s;
  white-space: nowrap;
  font-family: inherit;
  letter-spacing: -.01em;
}

.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }

.btn-primary   { background: var(--accent); color: #fff; }
.btn-primary:hover {
  background: var(--accent-hover);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(91,156,246,.22), 0 2px 8px rgba(0,0,0,.30);
}

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: #202230;
  border-color: #363a4a;
  color: var(--text);
}

.btn-success   { background: #166534; color: #fff; }
.btn-success:hover {
  background: #15803d;
  box-shadow: 0 0 0 3px rgba(63,208,104,.18);
}

.btn-lg { padding: 11px 26px; font-size: 14px; }

.btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ── Preview comparison ──────────────────────────────────────────────────── */

.preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.preview-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.preview-panel-head {
  background: var(--surface-2);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-2);
}

.preview-panel-head span {
  font-size: 11px;
  font-weight: 400;
  color: #4a5060;
}

.preview-panel img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 500px;
  object-fit: contain;
  background: #0b0b0d;
}

.no-preview {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: 13px;
  background: var(--surface-2);
}

/* ── Report ──────────────────────────────────────────────────────────────── */

.report-list   { display: flex; flex-direction: column; gap: 12px; }

.report-row { display: flex; flex-direction: column; gap: 4px; }

.report-row-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.report-row-label { font-weight: 500; color: var(--text); }
.report-row-val   { font-family: monospace; color: var(--text-2); }

.bar-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
}

.report-hint { font-size: 11px; color: #5a6270; }

.notes { margin-top: 12px; font-size: 13px; color: var(--warn); }
.notes li { margin-left: 18px; }

/* ── Target selector ─────────────────────────────────────────────────────── */

.target-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.target-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  user-select: none;
}

.target-card:hover { border-color: var(--accent); background: var(--accent-muted); }

.target-card input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
}

.target-card.checked { border-color: var(--accent); background: var(--accent-muted); }

.target-card.unavailable { opacity: .45; cursor: not-allowed; }
.target-card.unavailable:hover { border-color: var(--border); background: var(--surface-2); }

.target-icon { font-size: 20px; flex-shrink: 0; pointer-events: none; }

.target-text { pointer-events: none; }
.target-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.target-text small  { font-size: 12px; color: var(--text-2); }

/* ── Result page ─────────────────────────────────────────────────────────── */

.result-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.result-check {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #052e16;
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.result-title { font-size: 20px; font-weight: 700; color: var(--text); }
.result-sub   { font-size: 14px; color: var(--text-2); }

/* ── Metadata grid ───────────────────────────────────────────────────────── */

.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}

.meta-item { display: flex; flex-direction: column; gap: 2px; }
.meta-key  { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #5a6270; }
.meta-val  { font-size: 13px; font-weight: 500; font-family: monospace; color: var(--text); }

/* ── Loading overlay ─────────────────────────────────────────────────────── */

.loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6,6,9,.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.loading-overlay.active { display: flex; }

.spinner {
  width: 34px;
  height: 34px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .65s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-text { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.loading-sub  { font-size: 12px; color: var(--text-2); }

/* ── Divider ─────────────────────────────────────────────────────────────── */

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 22px 0;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */

.site-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.nav-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  transition: color .12s;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  letter-spacing: .01em;
}

.nav-link:hover { color: var(--text-2); text-decoration: none; }

.nav-btn-logout { line-height: inherit; }

.nav-lang {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-3);
}

.nav-signup { padding: 5px 13px; font-size: 12px; border-radius: 6px; }

/* ── Tone controls ───────────────────────────────────────────────────────── */

.tone-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tone-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  min-width: 82px;
  letter-spacing: .01em;
}

.tone-slider {
  flex: 1;
  height: 4px;
  accent-color: var(--accent);
  cursor: pointer;
}

.tone-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  min-width: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tone-slider-desc {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 5px;
  margin-left: 94px;
  line-height: 1.5;
}

/* ── Batch page ──────────────────────────────────────────────────────────── */

.batch-file-list {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.batch-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px;
}

.batch-file-row:last-child { border-bottom: none; }

.batch-file-name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.batch-file-size { color: var(--text-3); font-size: 12px; flex-shrink: 0; }
.batch-file-warn { color: var(--warn); font-size: 12px; justify-content: center; }

.batch-credit-hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-3);
  min-height: 18px;
}

.hero-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.2;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
}

.nav-badge-credits    { background: #0c1a30; color: #6fa8d8; border: 1px solid #1a3050; }
.nav-badge-pro        { background: #0c1a30; color: #5b9cf6; border: 1px solid #1a3050; }
.nav-badge-ambassador { background: #160e30; color: #b39cf0; border: 1px solid #2a1a50; }

/* ── Auth forms ──────────────────────────────────────────────────────────── */

.auth-wrap {
  display: flex;
  justify-content: center;
  padding: 48px 0;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 36px 40px;
  width: 100%;
  max-width: 400px;
}

.auth-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 22px;
  color: var(--text);
  letter-spacing: -.3px;
}

.auth-alt {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 18px;
  text-align: center;
}

.text-input {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  background: var(--surface-2);
  color: var(--text);
  transition: border-color .12s, box-shadow .12s;
  font-family: inherit;
}

.text-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,156,246,.15);
}
.text-input::placeholder { color: var(--text-3); }

.text-input-sm { padding: 6px 10px; font-size: 12px; }

.field-hint { font-size: 11px; color: var(--text-2); margin-top: 5px; }

/* ── Pricing page ────────────────────────────────────────────────────────── */

.pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.pack-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--surface-2);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pack-card-featured {
  border-color: var(--accent);
  background: var(--accent-muted);
}

.pack-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pack-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.5px;
}

.pack-price-sub {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 400;
}

.pack-amount {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.pack-desc {
  font-size: 13px;
  color: var(--text-2);
}

.pack-discount-row { margin-bottom: 2px; }

.pack-unavail {
  font-size: 13px;
  color: #4a5060;
  font-style: italic;
  text-align: center;
}

.pro-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.pro-details { flex: 1; min-width: 180px; }

.pro-label {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}

.pro-price {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.5px;
  margin-bottom: 12px;
}

.pro-price-sub {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 400;
  margin-left: 4px;
}

.pro-features {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
}

.pro-features li::before { content: "✓  "; color: var(--success); }
.pro-features li { margin-bottom: 4px; }

.pro-action {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
}

/* ── Ledger table ────────────────────────────────────────────────────────── */

.ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ledger-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5a6270;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.ledger-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.ledger-table tr:last-child td { border-bottom: none; }

.ledger-date  { color: var(--text-2); font-family: monospace; font-size: 12px; }
.ledger-delta { text-align: right; font-family: monospace; font-weight: 600; }
.ledger-positive { color: var(--success); }
.ledger-negative { color: var(--error); }

/* ── Crop comparison ─────────────────────────────────────────────────────── */

.crop-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 4px;
}

.crop-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crop-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5a6270;
}

.crop-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.crop-panel {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}

.crop-panel-head {
  background: var(--surface-2);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #5a6270;
  border-bottom: 1px solid var(--border);
}

.crop-panel img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: auto;
  background: #0b0b0d;
}

/* ── Editability metrics ─────────────────────────────────────────────────── */

.metric-disclaimer {
  font-size: 12px;
  color: #5a6270;
  font-style: italic;
  margin-bottom: 16px;
}

.metric-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.metric-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.metric-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.metric-label { font-weight: 500; color: var(--text); }

.metric-val {
  font-family: monospace;
  color: var(--text-2);
}

.metric-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.metric-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width .3s ease;
}

.metric-fill-warm { background: #f59e0b; }
.metric-fill-sky  { background: #38bdf8; }

.metric-hint {
  font-size: 11px;
  color: #5a6270;
}

/* ── Before / After slider ───────────────────────────────────────────────── */

.ba-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #0b0b0d;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  line-height: 0;
  margin-bottom: 16px;
  outline: none;
}

.ba-slider:focus-visible {
  box-shadow: 0 0 0 3px rgba(106,169,255,.35);
}

.ba-img-orig {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  background: #0b0b0d;
  pointer-events: none;
  user-select: none;
}

.ba-img-proc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0b0b0d;
  clip-path: inset(0 0 0 50%);
  pointer-events: none;
  user-select: none;
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

.ba-handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.80);
  box-shadow: 0 0 8px rgba(0,0,0,.60);
}

.ba-handle-knob {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 2px 14px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.30);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ba-handle-knob svg { display: block; }

.ba-label {
  position: absolute;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: rgba(0,0,0,.58);
  color: rgba(255,255,255,.88);
  pointer-events: none;
  line-height: 1.4;
}

.ba-label-l { left: 12px; }
.ba-label-r { right: 12px; }

/* ── Histogram ───────────────────────────────────────────────────────────── */

.hist-svg-wrap {
  position: relative;
  margin-bottom: 10px;
  border-radius: 4px;
  overflow: hidden;
}

.hist-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.hist-stat-block { display: flex; flex-direction: column; gap: 4px; }

.hist-stat-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  margin-bottom: 4px;
}

.hist-stat-label-orig   { color: #a9b1bc; }
.hist-stat-label-master { color: #6aa9ff; }

.hist-stat-line {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}

.hist-stat-val { color: #c8cdd4; font-weight: 600; }

.hist-clip-indicator {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: #5a6270;
  margin-top: 6px;
  flex-wrap: wrap;
}

.hist-clip-warn { color: var(--error); font-weight: 600; }

/* ── Responsive (non-LP pages) — kept for result/preview/pricing pages ──── */

@media (max-width: 620px) {
  .crop-pair { grid-template-columns: 1fr 1fr; }
}

/* ── LP ──────────────────────────────────────────────────────────────────── */

/* Hero -------------------------------------------------------------------- */

.lp-hero {
  position: relative;
  text-align: center;
  padding: 80px 0 68px;
  overflow: hidden;
}

.lp-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: max(720px, 100%);
  height: 480px;
  background: radial-gradient(ellipse at 50% 30%,
    rgba(91,156,246,.10) 0%,
    rgba(91,156,246,.03) 45%,
    transparent 70%);
  pointer-events: none;
}

.lp-hero > * { position: relative; }

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-muted);
  border: 1px solid rgba(91,156,246,.24);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 28px;
}

.lp-hero-title {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.08;
  color: #f5f7ff;
  margin-bottom: 22px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.lp-hero-title em {
  font-style: normal;
  color: var(--accent);
}

.lp-hero-sub {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.72;
  max-width: 500px;
  margin: 0 auto 36px;
}

.lp-cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: var(--surface);
  color: var(--text);
  border-color: rgba(255,255,255,.14);
  text-decoration: none;
}

.lp-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 100px;
  padding: 4px 12px;
}

.lp-pill-check { color: var(--success); font-size: 10px; font-weight: 700; }

/* Divider ------------------------------------------------------------------ */

.lp-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 0;
}

/* Sections ----------------------------------------------------------------- */

.lp-section {
  padding: 72px 0;
}

.lp-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  text-align: center;
  margin-bottom: 10px;
}

.lp-section-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
  text-align: center;
  line-height: 1.22;
  margin-bottom: 12px;
}

.lp-section-sub {
  font-size: 14px;
  color: var(--text-2);
  text-align: center;
  max-width: 480px;
  margin: 0 auto 48px;
  line-height: 1.72;
}

/* Steps -------------------------------------------------------------------- */

.lp-steps-grid {
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  align-items: start;
  gap: 0;
}

.lp-step { text-align: center; padding: 0 8px; }

.lp-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--accent);
  margin-bottom: 16px;
  box-shadow: 0 0 0 4px var(--bg), 0 0 20px rgba(91,156,246,.12);
}

.lp-step-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.lp-step-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.lp-step-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
}

.lp-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 22px;
  color: var(--text-3);
}

/* Features ----------------------------------------------------------------- */

.lp-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.lp-feat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}

.lp-feat-card:hover {
  border-color: rgba(91,156,246,.3);
  box-shadow: var(--shadow-card), 0 0 24px rgba(91,156,246,.07);
}

.lp-feat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.025) 0%, transparent 55%);
  pointer-events: none;
}

.lp-feat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--accent-muted);
  border: 1px solid rgba(91,156,246,.2);
  border-radius: 9px;
  color: var(--accent);
  margin-bottom: 16px;
  flex-shrink: 0;
}

.lp-feat-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 7px;
  letter-spacing: -.01em;
}

.lp-feat-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
}

/* Modes -------------------------------------------------------------------- */

.lp-modes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.lp-mode-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 14px;
  text-align: center;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.lp-mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.018) 0%, transparent 50%);
  border-radius: inherit;
  pointer-events: none;
}

.lp-mode-card.lp-mode-featured {
  border-color: rgba(91,156,246,.35);
  background: #0e1623;
}

.lp-mode-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -.01em;
}

.lp-mode-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: var(--accent-muted);
  color: var(--accent);
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lp-mode-badge-green {
  background: rgba(63,208,104,.12);
  color: var(--success);
}

.lp-mode-sep {
  height: 1px;
  background: var(--border-subtle);
  margin: 12px 0;
}

.lp-mode-detail {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
}

/* Pricing hint ------------------------------------------------------------- */

.lp-pricing-hint {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-2);
}

/* CTA ---------------------------------------------------------------------- */

.lp-cta-section {
  text-align: center;
  padding: 64px 0;
}

.lp-cta-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.25;
}

.lp-cta-sub {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 28px;
  line-height: 1.7;
}

/* Tool section ------------------------------------------------------------- */

.lp-tool {
  padding: 48px 0 8px;
}

.lp-tool-header {
  text-align: center;
  margin-bottom: 32px;
}

.lp-tool-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 8px;
}

.lp-tool-sub {
  font-size: 13px;
  color: var(--text-2);
}

/* LP Responsive ------------------------------------------------------------ */

@media (max-width: 780px) {
  .lp-hero-title  { font-size: 34px; }
  .lp-hero-sub    { font-size: 14px; }
  .lp-section-title { font-size: 24px; }
  .lp-feat-grid   { grid-template-columns: 1fr 1fr; }
  /* 5-col modes → 3+2 wrap via auto-fill */
  .lp-modes-grid  { grid-template-columns: repeat(3, 1fr); }
  .lp-steps-grid  { grid-template-columns: 1fr; gap: 32px; }
  .lp-step-arrow  { display: none; }
  /* align existing form cards with LP breakpoint */
  .radio-grid, .target-grid, .preview-grid, .meta-grid, .pack-grid { grid-template-columns: 1fr; }
  .card { padding: 20px; }
  .auth-card { padding: 24px 20px; }
  .site-nav { gap: 8px; }
  .nav-signup { display: none; }
}

@media (max-width: 500px) {
  .lp-hero-title  { font-size: 28px; letter-spacing: -.03em; }
  .lp-hero { padding: 56px 0 48px; }
  .lp-feat-grid   { grid-template-columns: 1fr; }
  .lp-modes-grid  { grid-template-columns: 1fr 1fr; }
  .lp-section     { padding: 48px 0; }
  .hist-stats-row { grid-template-columns: 1fr; }
  .ba-label { font-size: 10px; padding: 3px 8px; }
  .pack-grid { grid-template-columns: 1fr; }
  .pro-row { flex-direction: column; }
  .hero h1 { font-size: 21px; }
  .crop-pair { grid-template-columns: 1fr 1fr; }
}

/* Processing History ------------------------------------------------------- */

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.history-table thead tr {
  border-bottom: 1px solid var(--border);
}

.history-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--text-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.history-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.history-table tbody tr:last-child td {
  border-bottom: none;
}

.history-row-expired td {
  opacity: .5;
}

.history-filename {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: var(--text);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-date {
  color: var(--text-2);
  white-space: nowrap;
}

.history-action {
  text-align: right;
  white-space: nowrap;
}

.history-mode-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.history-mode-pro     { color: var(--accent);   border-color: var(--accent-muted); }
.history-mode-creator { color: var(--success);   border-color: #0a2e18; }

.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 6px;
}

.btn-disabled {
  background: var(--surface-2);
  color: var(--text-3);
  cursor: default;
  pointer-events: none;
}

@media (max-width: 680px) {
  .history-table th:nth-child(3),
  .history-table td:nth-child(3),
  .history-table th:nth-child(4),
  .history-table td:nth-child(4) { display: none; }
}