/* ═══════════════════════════════════════════════════════════════════════
   PDFflow — master stylesheet
   Family identity: dark editorial + grid background.
   Brand: coral-red. Cross-promo accent: EuKosmos gold.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg:           #0a0d14;
  --bg-grid:      #11151f;
  --surface:      #141823;
  --surface-2:    #1c2130;
  --surface-3:    #252b3d;
  --hairline:     #1d2233;
  --border:       #2a3148;
  --border-2:     #3a4262;
  --ink:          #e7e9f0;
  --ink-soft:     #b0b5c4;
  --ink-mute:     #7d859a;

  /* Primary brand — coral red */
  --brand:        #ef4444;
  --brand-light:  #fb6e6e;
  --brand-dim:    #b73333;
  --brand-bg:     rgba(239, 68, 68, 0.10);
  --brand-glow:   rgba(239, 68, 68, 0.35);

  /* Secondary accent — cyan (links to esignmypdf family identity) */
  --cyan:         #22d3ee;
  --cyan-bg:      rgba(34, 211, 238, 0.10);

  /* EuKosmos accent — gold/orange */
  --gold:         #f5a44e;
  --gold-light:   #ffc079;
  --gold-bg:      rgba(245, 164, 78, 0.12);
  --gold-glow:    rgba(245, 164, 78, 0.30);

  --rose:         #f87171;
  --rose-bg:      rgba(248, 113, 113, 0.10);
  --emerald:      #34d399;
  --emerald-bg:   rgba(52, 211, 153, 0.10);

  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Times New Roman", Georgia, serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Courier New", monospace;

  --content-w:    1200px;
  --gutter:       28px;
  --radius:       8px;
  --radius-lg:    14px;
  --ease:         cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body {
  min-height: 100vh;
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px),
    radial-gradient(ellipse 1400px 700px at 50% -200px, var(--brand-bg), transparent 60%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  background-color: var(--bg);
}

a { color: var(--brand-light); text-decoration: none; transition: color 120ms; }
a:hover { color: var(--brand); }
em { font-style: italic; color: var(--gold); font-family: var(--font-serif); }
strong { color: var(--ink); font-weight: 600; }
code {
  font-family: var(--font-mono); font-size: 0.92em;
  color: var(--brand-light); background: var(--brand-bg);
  padding: 1px 6px; border-radius: 3px;
}
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-mute); }
.small { font-size: 12.5px; }

/* ──────────────────── Masthead ──────────────────── */
.masthead {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap; gap: 12px;
  position: relative;
  z-index: 10;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--brand);
  color: #fff;
  border-radius: 8px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
  font-size: 19px;
  box-shadow: 0 4px 16px -6px var(--brand-glow);
}
.brand-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-style: italic;
  color: var(--ink);
}
.brand-name__suffix { color: var(--brand-light); }
.nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.nav__link {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 6px;
  color: var(--ink-soft);
  font-size: 13px;
  transition: all 120ms var(--ease);
}
.nav__link:hover {
  color: var(--ink); background: var(--surface-2); border-color: var(--brand); text-decoration: none;
}
.nav__link--primary {
  background: var(--brand); color: #fff; border-color: var(--brand);
  font-weight: 600;
}
.nav__link--primary:hover { background: var(--brand-light); color: #fff; }

/* ──────────────────── Hero ──────────────────── */
.hero {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: clamp(60px, 9vh, 110px) var(--gutter) 36px;
  text-align: center;
  position: relative;
}
.hero__kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brand-light);
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero__kicker::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--brand);
  border-radius: 2px;
  box-shadow: 0 0 12px var(--brand-glow);
}
.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5.5vw, 60px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}
.hero__title em { color: var(--brand); }
.hero__lede {
  max-width: 720px;
  margin: 0 auto 24px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.55;
}
.hero__badges {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.badge--success { border-color: var(--emerald); color: var(--emerald); background: var(--emerald-bg); }
.badge--success::before { content: '●'; color: var(--emerald); }
.badge--privacy { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-bg); }

/* ──────────────────── Layout ──────────────────── */
.layout {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ──────────────────── Tool grid (home) ──────────────────── */
.tools-section {
  margin: 50px 0 30px;
}
.tools-section__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 22px;
}
.tools-section__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand);
  margin: 0;
  flex-shrink: 0;
  padding-right: 18px;
  border-right: 1px solid var(--border);
}
.tools-section__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 14px;
}
.tool-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  text-decoration: none;
  color: inherit;
  transition: all 180ms var(--ease);
  display: flex;
  flex-direction: column;
  min-height: 140px;
  overflow: hidden;
}
.tool-card:hover {
  border-color: var(--brand);
  background: var(--surface-2);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px var(--brand-glow);
  text-decoration: none;
}
.tool-card__icon {
  width: 36px; height: 36px;
  background: var(--brand-bg);
  border: 1px solid var(--brand-dim);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-light);
  margin-bottom: 14px;
  transition: all 180ms var(--ease);
}
.tool-card:hover .tool-card__icon {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 4px 12px -2px var(--brand-glow);
}
.tool-card__title {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
}
.tool-card__desc {
  margin: 0;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.tool-card__badge {
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 3px 7px;
  border-radius: 4px;
}
.tool-card__badge--new {
  background: var(--emerald-bg);
  border: 1px solid var(--emerald);
  color: var(--emerald);
}
.tool-card__badge--soon {
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  color: var(--ink-mute);
}
.tool-card--soon { opacity: 0.7; pointer-events: none; }

/* SVG icons inside cards */
.tool-card__icon svg { width: 18px; height: 18px; stroke-width: 1.8; }

/* ──────────────────── EuKosmos Card (3 variants) ──────────────────── */
/* Variant 1: slim — for home page top-right */
.euk-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  position: relative;
  overflow: hidden;
}
.euk-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, var(--gold-bg), transparent 60%);
  pointer-events: none;
}
.euk-card > * { position: relative; z-index: 1; }
.euk-card__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.euk-card__kicker::before {
  content: '◆';
  font-size: 10px;
  color: var(--gold);
}
.euk-card__title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.2;
}
.euk-card__lede {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.euk-card__lede em { color: var(--gold); }
.euk-card__list {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.euk-card__list li {
  padding: 5px 0 5px 22px;
  position: relative;
  color: var(--ink-soft);
  font-size: 14px;
}
.euk-card__list li::before {
  content: '◆';
  position: absolute;
  left: 0; top: 6px;
  color: var(--gold);
  font-size: 11px;
}
.euk-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #1a1208;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  border: 1px solid var(--gold);
  transition: all 150ms var(--ease);
  box-shadow: 0 4px 14px -4px var(--gold-glow);
}
.euk-card__cta:hover {
  background: var(--gold-light);
  color: #1a1208;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px var(--gold-glow);
}

/* Variant 2: compact (for home page top corner) */
.euk-card--slim {
  padding: 18px 20px;
}
.euk-card--slim .euk-card__title { font-size: 18px; margin-bottom: 6px; }
.euk-card--slim .euk-card__lede { font-size: 13px; margin-bottom: 12px; }
.euk-card--slim .euk-card__cta { padding: 8px 16px; font-size: 13px; }

/* ──────────────────── EuKosmos Featured Banner (between hero and tools) ──────────────────── */
.euk-banner {
  max-width: var(--content-w);
  margin: 20px auto 12px;
  padding: 0 var(--gutter);
}
.euk-banner__inner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 28px 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  box-shadow: 0 10px 40px -20px var(--gold-glow);
}
.euk-banner__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, var(--gold-bg) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(245, 164, 78, 0.06) 0%, transparent 50%);
  pointer-events: none;
}
.euk-banner__content { position: relative; z-index: 1; }
.euk-banner__cta-col { position: relative; z-index: 1; }
.euk-banner__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin: 0 0 10px;
}
.euk-banner__kicker::before { content: '◆ '; }
.euk-banner__title {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.25;
}
.euk-banner__title em { color: var(--gold); font-style: italic; }
.euk-banner__lede {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  max-width: 760px;
}
.euk-banner__bullets {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 22px;
}
.euk-banner__bullets li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 13px;
}
.euk-banner__bullets li::before {
  content: '◆';
  position: absolute;
  left: 0; top: 2px;
  color: var(--gold);
  font-size: 9px;
}

@media (max-width: 800px) {
  .euk-banner__inner { grid-template-columns: 1fr; padding: 22px 22px; }
  .euk-banner__bullets { grid-template-columns: 1fr; }
}

/* ──────────────────── Tool page layout (sidebar) ──────────────────── */
.tool-layout {
  max-width: var(--content-w);
  margin: 30px auto 60px;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 30px;
  align-items: start;
}
.tool-main { min-width: 0; }
.tool-sidebar { position: sticky; top: 20px; }

@media (max-width: 900px) {
  .tool-layout { grid-template-columns: 1fr; }
  .tool-sidebar { position: static; }
}

/* ──────────────────── Tool header ──────────────────── */
.tool-head {
  margin-bottom: 24px;
}
.tool-head__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand-light);
  margin: 0 0 8px;
}
.tool-head__title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 10px;
}
.tool-head__title em { color: var(--brand); }
.tool-head__lede {
  color: var(--ink-soft);
  font-size: 15.5px;
  max-width: 640px;
  margin: 0;
}

/* ──────────────────── Drop zone ──────────────────── */
.drop-zone {
  background: var(--surface);
  border: 2px dashed var(--border-2);
  border-radius: var(--radius-lg);
  padding: 50px 30px;
  text-align: center;
  cursor: pointer;
  transition: all 200ms var(--ease);
  position: relative;
}
.drop-zone:hover, .drop-zone--active {
  border-color: var(--brand);
  background: var(--surface-2);
  box-shadow: 0 0 30px -10px var(--brand-glow);
}
.drop-zone__icon {
  margin: 0 auto 16px;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-bg);
  border: 1px solid var(--brand-dim);
  border-radius: 14px;
  color: var(--brand-light);
}
.drop-zone__icon svg { width: 28px; height: 28px; stroke-width: 1.6; }
.drop-zone__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 6px;
}
.drop-zone__sub {
  color: var(--ink-mute);
  font-size: 14px;
  margin: 0 0 16px;
}
.drop-zone__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  padding: 11px 22px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  transition: all 150ms var(--ease);
}
.drop-zone__btn:hover {
  background: var(--brand-light);
  border-color: var(--brand-light);
}
.drop-zone__formats {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
}

/* ──────────────────── File list (after upload) ──────────────────── */
.file-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 18px;
}
.file-list__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.file-list__item:last-child { border-bottom: 0; }
.file-list__item:hover { background: var(--surface-2); }
.file-list__icon {
  width: 36px; height: 36px;
  background: var(--brand-bg);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-light);
  flex-shrink: 0;
}
.file-list__icon svg { width: 16px; height: 16px; }
.file-list__info { flex: 1; min-width: 0; }
.file-list__name {
  font-weight: 500;
  margin: 0 0 2px;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-list__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
}
.file-list__actions { display: flex; gap: 6px; flex-shrink: 0; }
.file-list__btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-mute);
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 120ms;
}
.file-list__btn:hover { color: var(--ink); border-color: var(--brand); }
.file-list__btn--danger:hover { color: var(--rose); border-color: var(--rose); }

/* ──────────────────── Options panel ──────────────────── */
.options {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.options__title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand-light);
  margin: 0 0 16px;
}
.options__row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.options__row:last-child { margin-bottom: 0; }
.options__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 180px;
}
.options__label {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 500;
}
.options__hint {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: -3px;
}
input[type="text"], input[type="number"], input[type="password"], select, textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 13px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  width: 100%;
  transition: all 120ms var(--ease);
  color-scheme: dark;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-bg);
}
select {
  appearance: none; -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--brand-light) 50%),
    linear-gradient(135deg, var(--brand-light) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}

/* Radio + checkbox groups */
.radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 120ms;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.radio-pill input { display: none; }
.radio-pill:hover { border-color: var(--brand); color: var(--ink); }
.radio-pill--active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  font-weight: 600;
}

/* ──────────────────── Primary action button ──────────────────── */
.action-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms var(--ease);
}
.btn--primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 4px 14px -4px var(--brand-glow);
}
.btn--primary:hover { background: var(--brand-light); border-color: var(--brand-light); box-shadow: 0 6px 18px -4px var(--brand-glow); }
.btn--primary:disabled { background: var(--surface-3); color: var(--ink-mute); border-color: var(--border); cursor: not-allowed; box-shadow: none; }
.btn--secondary {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border);
}
.btn--secondary:hover { border-color: var(--brand); color: var(--brand-light); }
.btn--ghost {
  background: transparent;
  color: var(--ink-mute);
  border-color: var(--border);
  font-size: 13px;
  padding: 8px 14px;
}
.btn--ghost:hover { color: var(--ink); border-color: var(--brand); }
.btn--lg { padding: 14px 28px; font-size: 16px; }

/* ──────────────────── Progress ──────────────────── */
.progress {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 18px 0;
}
.progress__label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13.5px;
}
.progress__bar {
  height: 6px;
  background: var(--bg);
  border-radius: 100px;
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-dim), var(--brand), var(--brand-light));
  border-radius: 100px;
  transition: width 250ms var(--ease);
  box-shadow: 0 0 14px var(--brand-glow);
}

/* ──────────────────── Result (success state) ──────────────────── */
.result {
  background: var(--surface);
  border: 1px solid var(--emerald);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.result::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, var(--emerald-bg), transparent 60%);
  pointer-events: none;
}
.result > * { position: relative; }
.result__check {
  width: 56px; height: 56px;
  background: var(--emerald-bg);
  border: 2px solid var(--emerald);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: var(--emerald);
  box-shadow: 0 0 24px -6px var(--emerald);
}
.result__check svg { width: 28px; height: 28px; stroke-width: 2.5; }
.result__title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--ink);
}
.result__sub {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0 0 22px;
}
.result__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ──────────────────── About + Footer ──────────────────── */
.about-section {
  max-width: var(--content-w);
  margin: 70px auto 50px;
  padding: 0 var(--gutter);
}
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 22px;
}
.about-grid h3 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brand-light);
  margin: 0 0 10px;
}
.about-grid p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; margin: 0; }

.footer {
  max-width: var(--content-w);
  margin: 50px auto 30px;
  padding: 26px var(--gutter);
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.footer__brand-links { display: flex; gap: 14px; flex-wrap: wrap; }
.footer__brand-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}
.footer__brand-link:hover { color: var(--gold); }

/* ──────────────────── Drag-reorder helpers ──────────────────── */
.file-list__item--dragging {
  opacity: 0.4;
}
.file-list__item--drag-over {
  border-top: 2px solid var(--brand) !important;
}
.file-list__handle {
  cursor: grab;
  color: var(--ink-mute);
  padding: 4px;
}
.file-list__handle:active { cursor: grabbing; }

/* ──────────────────── Error state ──────────────────── */
.error-msg {
  background: var(--rose-bg);
  border: 1px solid var(--rose);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 12px 16px;
  color: var(--rose);
  font-size: 14px;
  margin: 14px 0;
}

/* ──────────────────── Page preview thumbs ──────────────────── */
.page-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.page-thumb {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  transition: all 150ms;
  position: relative;
  text-align: center;
}
.page-thumb:hover { border-color: var(--brand); }
.page-thumb--selected {
  border-color: var(--brand);
  background: var(--brand-bg);
}
.page-thumb canvas {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 3px;
  display: block;
}
.page-thumb__num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 6px;
}
.page-thumb--selected .page-thumb__num { color: var(--brand-light); font-weight: 600; }
.page-thumb__rotation { font-size: 9.5px; color: var(--brand); margin-top: 2px; }

/* Thumb interaction states (reorder/delete/extract) */
.page-thumb--dragging { opacity: 0.4; }
.page-thumb--drop-target { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-bg); }
.page-thumb--delete {
  border-color: var(--rose) !important;
  background: var(--rose-bg);
  position: relative;
}
.page-thumb--delete::after {
  content: '✕';
  position: absolute;
  top: 6px; right: 8px;
  font-size: 18px;
  color: var(--rose);
  font-weight: 700;
  text-shadow: 0 0 8px var(--bg);
}
.page-thumb--delete canvas { opacity: 0.5; }
.page-thumb--delete .page-thumb__num { color: var(--rose); font-weight: 600; }

/* Color picker styling */
input[type="color"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

/* Range slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--surface-3);
  border-radius: 100px;
  outline: none;
  padding: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: var(--brand);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px -2px var(--brand-glow);
  transition: transform 120ms;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--brand);
  border-radius: 50%;
  cursor: pointer;
  border: 0;
}

/* Textarea */
textarea {
  resize: vertical;
  font-family: var(--font-mono);
}

@media (max-width: 600px) {
  .hero__title { font-size: 32px; }
  .tools-grid { grid-template-columns: 1fr; }
}