:root {
  color-scheme: dark;
  --bg-gradient:
    radial-gradient(
      circle at 20% 20%,
      rgba(32, 120, 255, 0.25),
      transparent 45%
    ),
    radial-gradient(
      circle at 80% 0%,
      rgba(255, 94, 188, 0.25),
      transparent 40%
    ),
    linear-gradient(160deg, #070b1a 0%, #0a0f2a 55%, #09132f 100%);
  --card-bg: rgba(12, 19, 48, 0.84);
  --card-border: rgba(255, 255, 255, 0.08);
  --surface-2: rgba(17, 26, 61, 0.6);
  --text-primary: #f6f8ff;
  --text-secondary: rgba(224, 229, 255, 0.72);
  --text-muted: rgba(186, 198, 255, 0.65);
  --accent: #5f8bff;
  --accent-strong: #9d7cff;
  --success: #50f5c6;
  --danger: #ff7f9c;
  --shadow-elevated: 0 32px 64px rgba(4, 7, 25, 0.48);
  font-family:
    'Inter',
    'Segoe UI',
    Roboto,
    system-ui,
    -apple-system,
    sans-serif;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-gradient);
  color: var(--text-primary);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* Dedicated /auth layout: push footer down when content is short */
body.page-auth {
  min-height: 100vh;
}

body.page-auth .auth-page {
  flex: 1;
}

body.page-tools .tools-main,
body.page-tool-run .tool-run-main {
  flex: 1;
}

.noise-layer {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.08'/%3E%3C/svg%3E");
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

main {
  padding: 128px clamp(24px, 4vw, 80px) 96px;
  width: min(1100px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.top-nav {
  position: sticky;
  top: 0;
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 16px clamp(20px, 4vw, 32px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 3vw, 24px);
  z-index: 20;
  backdrop-filter: blur(18px);
  background: linear-gradient(
    140deg,
    rgba(9, 14, 40, 0.88),
    rgba(9, 16, 48, 0.52)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  margin-top: 12px;
}

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

.logo-spark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #5f8bff, #68f9f2);
  position: relative;
}

.logo-spark::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.4);
  mix-blend-mode: screen;
}

.logo-text {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.brand-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 12px;
}

.top-nav__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}

.nav-auth-guest {
  display: flex;
  align-items: center;
}

.nav-user-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-account-entry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(95, 139, 255, 0.45);
  background: rgba(95, 139, 255, 0.18);
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.nav-account-entry__icon {
  display: flex;
  color: var(--accent);
}

.nav-account-entry:hover,
.nav-account-entry:focus-visible {
  background: rgba(95, 139, 255, 0.15);
  border-color: rgba(95, 139, 255, 0.45);
}

.nav-account-entry:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-profile-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(95, 139, 255, 0.18);
  color: var(--text-primary);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.nav-profile-trigger:hover,
.nav-profile-trigger:focus-visible {
  background: rgba(95, 139, 255, 0.28);
  border-color: rgba(157, 124, 255, 0.55);
}

.nav-profile-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.nav-profile-trigger[aria-expanded='true'] {
  box-shadow: 0 0 0 2px rgba(95, 139, 255, 0.45);
}

.nav-profile-trigger__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: min(280px, calc(100vw - 32px));
  padding: 12px;
  border-radius: 16px;
  background: rgba(12, 19, 48, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-elevated);
  z-index: 30;
}

.nav-profile-menu__email {
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 0.82rem;
  color: var(--text-muted);
  word-break: break-all;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-profile-menu__link {
  display: block;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.15s ease;
}

.nav-profile-menu__link:hover,
.nav-profile-menu__link:focus-visible {
  background: rgba(95, 139, 255, 0.15);
}

.nav-profile-menu__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.nav-profile-menu__danger {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--danger);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.nav-profile-menu__danger:hover,
.nav-profile-menu__danger:focus-visible {
  background: rgba(255, 127, 156, 0.12);
}

.nav-profile-menu__danger:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 1px;
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-burger__bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  border-radius: 1px;
  background: var(--text-primary);
}

.nav-burger:hover,
.nav-burger:focus-visible {
  background: rgba(95, 139, 255, 0.12);
  border-color: rgba(95, 139, 255, 0.35);
}

.nav-burger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-burger[aria-expanded='true'] {
  background: rgba(95, 139, 255, 0.2);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

.mobile-nav:not([hidden]) {
  pointer-events: auto;
}

.mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(4, 7, 20, 0.55);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 92vw);
  max-width: 100%;
  padding: 20px 20px 28px;
  background: linear-gradient(
    165deg,
    rgba(12, 18, 44, 0.98),
    rgba(8, 12, 30, 0.99)
  );
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: mobileNavSlide 0.22s ease both;
}

@keyframes mobileNavSlide {
  from {
    transform: translateX(100%);
    opacity: 0.96;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav__panel {
    animation: none;
  }
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-nav__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.mobile-nav__close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.mobile-nav__close:hover,
.mobile-nav__close:focus-visible {
  background: rgba(95, 139, 255, 0.15);
}

.mobile-nav__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mobile-nav__search {
  padding: 0 20px 12px;
}

.mobile-nav__search-input {
  width: 100%;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
}

.mobile-nav__search-input::placeholder {
  color: var(--text-muted);
}

.mobile-nav__search-input:focus {
  border-color: rgba(95, 139, 255, 0.5);
  background: rgba(95, 139, 255, 0.08);
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav__links a {
  padding: 14px 12px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.mobile-nav__links a:hover,
.mobile-nav__links a:focus-visible {
  background: rgba(95, 139, 255, 0.12);
  color: var(--text-primary);
}

.mobile-nav__links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.mobile-nav__group-label {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem 0.2rem;
}

.mobile-nav__cta {
  margin-top: auto;
  text-align: center;
  justify-content: center;
}

.nav-auth-link {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
}

.nav-auth-link:hover,
.nav-auth-link:focus-visible {
  color: var(--text-primary);
}

.nav-auth-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.nav-auth-link--active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.nav-signup {
  padding: 10px 18px;
  font-size: 0.88rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-demo {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  padding: 10px 18px;
}

.nav-logout-btn {
  padding: 10px 16px;
  font-size: 0.85rem;
}

.upload-auth-callout--compact {
  padding: 10px 14px;
}

body.nav-no-scroll {
  overflow: hidden;
}

.upload-auth-strip {
  margin-bottom: 4px;
}

.upload-auth-callout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(11, 19, 47, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.upload-auth-callout--signed {
  background: rgba(95, 139, 255, 0.1);
  border-color: rgba(95, 139, 255, 0.22);
}

.upload-auth-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.upload-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.upload-auth-actions .cta {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.guest-badge {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #d9e8ff;
  background: rgba(95, 139, 255, 0.2);
  border: 1px solid rgba(95, 139, 255, 0.4);
}

.auth-page {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 96px clamp(24px, 4vw, 48px) 64px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.auth-page-inner {
  width: min(440px, 100%);
}

.auth-page-kicker {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.auth-page-title {
  margin: 0 0 8px;
  font-size: clamp(1.65rem, 3vw, 2rem);
  line-height: 1.15;
}

.auth-page-lead {
  margin: 0 0 24px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.auth-page-card {
  width: 100%;
}

.auth-inline-link {
  text-decoration: none;
}

.footer--auth {
  margin-top: auto;
}

.top-nav--auth {
  margin-bottom: 8px;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 24px);
  font-size: 0.95rem;
  justify-content: center;
}

.nav-links--desktop {
  justify-self: center;
  align-items: center;
  flex-wrap: nowrap;
}

.nav-links a,
.nav-tools-trigger {
  color: var(--text-secondary);
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
  background: transparent;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.nav-tools-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-tools-trigger__caret {
  font-size: 0.78em;
  line-height: 1;
  transform-origin: 50% 45%;
  transition: transform 0.2s ease;
}

.nav-tools-trigger[aria-expanded='true'] .nav-tools-trigger__caret {
  transform: rotate(180deg);
}

.nav-links a::after,
.nav-tools-trigger::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.nav-links a:focus-visible,
.nav-links a:hover,
.nav-tools-trigger:focus-visible,
.nav-tools-trigger:hover {
  color: #fff;
}

.nav-links a:focus-visible::after,
.nav-links a:hover::after,
.nav-tools-trigger:focus-visible::after,
.nav-tools-trigger:hover::after,
.nav-tools-trigger[aria-expanded='true']::after {
  transform: scaleX(1);
}

.nav-tools-dropdown {
  position: relative;
}

.nav-tools-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 190px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(10, 16, 42, 0.96);
  box-shadow: 0 18px 36px rgba(3, 6, 18, 0.46);
  padding: 0.4rem;
  display: grid;
  gap: 0.2rem;
  z-index: 40;
}

.nav-tools-menu[hidden] {
  display: none !important;
}

.nav-tools-menu:not([hidden]) {
  display: grid;
}

.nav-tools-menu a {
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
}

.nav-tools-menu a::after {
  display: none;
}

.nav-tools-menu a:hover,
.nav-tools-menu a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.cta {
  border-radius: 999px;
  padding: 12px 22px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.3s ease;
}

.cta.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #081029;
}

.cta.primary:focus-visible,
.cta.primary:hover {
  transform: translateY(-1px);
}

.cta.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.cta.secondary:focus-visible,
.cta.secondary:hover {
  background: rgba(255, 255, 255, 0.18);
}

.cta.is-loading {
  opacity: 0.65;
  pointer-events: none;
  cursor: wait;
}

.cta:disabled,
.cta[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

#tool-submit.is-loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid rgba(8, 16, 41, 0.3);
  border-top-color: #081029;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}

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

/* Spinner on the Run tool button while aria-busy */
#tool-submit[aria-busy="true"] {
  position: relative;
  color: transparent;
  pointer-events: none;
  cursor: wait;
  opacity: 1 !important;
}

#tool-submit[aria-busy="true"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  margin-left: -9px;
  border: 2.5px solid rgba(8, 16, 41, 0.25);
  border-top-color: #081029;
  border-radius: 50%;
  animation: cta-spin 0.7s linear infinite;
}

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

.cta.tertiary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(95, 139, 255, 0.18);
  color: #ffffff;
  text-decoration: none;
  padding-inline: 18px;
}

.cta.ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 6vw, 64px);
  align-items: center;
  align-content: start;
  min-height: calc(100svh - 220px);
}

@media (max-height: 900px), (orientation: portrait) {
  .hero {
    min-height: 0;
  }
}

.hero-copy h1 {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  margin-bottom: 12px;
  line-height: 1.1;
}

.accent {
  color: var(--accent);
}

.subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 560px;
}

.hero-toolkit-lede {
  margin: 1.25rem 0 0;
  font-size: 1rem;
}

.hero-toolkit-link {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.hero-toolkit-link:hover,
.hero-toolkit-link:focus-visible {
  text-decoration: underline;
}

.hero-toolkit-muted {
  color: var(--text-muted);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 1.75rem;
  font-size: 1rem;
}

.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  padding: 0.7rem 1.4rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s;
}
.hero-cta-btn:hover {
  background: #4a7ae8;
  box-shadow: 0 4px 16px rgba(95, 139, 255, 0.35);
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 1.25rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.79rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  white-space: nowrap;
}

.hero-badge svg {
  color: var(--accent);
  flex-shrink: 0;
}

a.hero-badge {
  text-decoration: none;
  color: var(--accent);
  background: rgba(95, 139, 255, 0.08);
  border-color: rgba(95, 139, 255, 0.25);
}

a.hero-badge:hover {
  background: rgba(95, 139, 255, 0.15);
  border-color: rgba(95, 139, 255, 0.4);
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 1.75rem 0 0;
  padding: 0;
}

.hero-stat {
  text-align: center;
  padding: 0 1.25rem;
}

.hero-stat:first-child {
  padding-left: 0;
}

.hero-stat dt {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  font-family: 'Space Grotesk', sans-serif;
}

.hero-stat dd {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero-stat-divider {
  width: 1px;
  height: 2rem;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .hero-badges { gap: 6px; }
  .hero-badge { padding: 3px 8px 3px 6px; font-size: 0.75rem; }
}

.how-it-works {
  margin-top: clamp(64px, 8vw, 96px);
}

.section-heading-center {
  text-align: center;
  margin: 0 auto 1.75rem;
  max-width: 40rem;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(1.65rem, 3.5vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.how-it-works .features {
  margin-top: 0;
}

/* ── How it works — step arrows ──────────────────────────────────── */
/* Explicit 7-column grid: 4 cards (1fr) separated by 3 arrow slots (auto).
   Compound selector beats the generic .features rule that comes later. */
.features.features--steps {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
}

.step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  color: rgba(186, 198, 255, 0.3);
  font-size: 0.8rem;
  user-select: none;
  pointer-events: none;
}

.step-arrow::before {
  content: '→';
}

/* On narrow screens the cards stack; arrows point down */
@media (max-width: 862px) {
  .features.features--steps {
    grid-template-columns: 1fr;
  }
  .step-arrow::before {
    content: '↓';
  }
  .step-arrow {
    padding: 2px 0;
  }
}

.feature-card a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.feature-card a:hover,
.feature-card a:focus-visible {
  text-decoration: underline;
}

.subtitle--contact {
  max-width: 520px;
  margin-bottom: 20px;
}


.mobile-nav__foot {
  margin: 0.5rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-nav__secondary-link {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.mobile-nav__secondary-link:hover,
.mobile-nav__secondary-link:focus-visible {
  text-decoration: underline;
}

.trust-badges {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.badge {
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(12, 21, 52, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 140px;
}

.badge-value {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
}

.badge-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 28px;
  padding: 28px;
  box-shadow: var(--shadow-elevated);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(99, 203, 255, 0.35),
    transparent 70%
  );
  pointer-events: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.card-header h2 {
  margin: 0;
  font-size: 1.4rem;
}

.card-header p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.auth-panel {
  background: rgba(11, 19, 47, 0.9);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 18px;
}

.auth-guest {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.auth-tab {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  margin: 0 0 -1px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.auth-tab:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

.auth-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.auth-tab[aria-selected='true'] {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
  background: rgba(99, 203, 255, 0.08);
}

.auth-tabpanel {
  padding-top: 4px;
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-form-stack {
  gap: 8px;
}

.auth-field-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.auth-field-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: -4px;
}

.auth-submit {
  margin-top: 8px;
  width: 100%;
}

.auth-switch {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.auth-text-button {
  display: inline;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-text-button:hover {
  color: #8fd6ff;
}

.auth-text-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.auth-lead {
  margin: 0 0 14px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.auth-subsection {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-subsection-title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
}

.auth-session {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-session-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.auth-status {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  flex: 1 1 160px;
}

.auth-logout-btn {
  flex-shrink: 0;
}

.auth-form input {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  padding: 10px 12px;
  font: inherit;
}

.auth-form input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.hidden-inline {
  display: none;
}

.hidden {
  display: none !important;
}

.admin-panel {
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
}

.admin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-overview {
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.audit-preview {
  margin: 10px 0 0;
  max-height: 200px;
  overflow: auto;
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.legal-main {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 120px clamp(24px, 4vw, 48px) 80px;
  color: var(--text-primary);
}

.legal-back {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 24px;
}

.legal-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.legal-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.legal-section {
  margin-top: 28px;
}

.legal-section h2 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.legal-section p,
.legal-section ul {
  color: var(--text-secondary);
  line-height: 1.6;
}

.legal-section a {
  color: var(--accent);
}

.contact-section {
  margin-top: clamp(64px, 8vw, 96px);
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
  padding: 32px;
  background: rgba(13, 21, 52, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
}

.contact-section h2 {
  margin-top: 0;
}

.contact-form {
  display: grid;
  gap: 14px;
  max-width: 520px;
}

.contact-form label {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.contact-form input,
.contact-form textarea {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  padding: 10px 12px;
  font-family: inherit;
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.status-pill {
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.status-pill[data-status='processing'] {
  background: rgba(95, 139, 255, 0.24);
  border-color: rgba(95, 139, 255, 0.6);
}

.status-pill[data-status='completed'] {
  background: rgba(80, 245, 198, 0.24);
  border-color: rgba(80, 245, 198, 0.6);
  color: var(--success);
}

.status-pill[data-status='failed'] {
  background: rgba(255, 127, 156, 0.2);
  border-color: rgba(255, 127, 156, 0.5);
  color: var(--danger);
}

.drop-zone {
  border: 2px dashed rgba(113, 147, 255, 0.4);
  border-radius: 24px;
  padding: 42px 24px;
  background: rgba(12, 21, 52, 0.6);
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
  transition:
    border 0.2s ease,
    transform 0.2s ease,
    background 0.3s ease;
}

.drop-zone:focus-visible {
  outline: 2px solid rgba(95, 139, 255, 0.8);
  outline-offset: 4px;
}

.drop-zone.dragover {
  border-color: rgba(95, 139, 255, 0.9);
  transform: translateY(-2px);
  background: rgba(12, 21, 52, 0.85);
}

.drop-illustration svg {
  width: 72px;
  height: 72px;
  color: rgba(113, 147, 255, 0.84);
}

.drop-primary {
  font-size: 1.2rem;
  font-weight: 600;
}

.drop-secondary,
.supporting {
  color: var(--text-muted);
  margin: 0;
}

.supporting {
  font-size: 0.8rem;
}

.progress-area {
  background: rgba(11, 19, 47, 0.9);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.progress-track {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(19, 31, 64, 0.9);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #67f2cc);
  transition: width 0.4s ease;
}

.status-message {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.result-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(15, 24, 58, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  animation: fadeIn 0.35s ease;
}

.result-card.hidden {
  display: none;
}

.result-details {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.features {
  margin-top: clamp(64px, 8vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px;
}

.feature-card {
  padding: 28px;
  background: rgba(13, 21, 52, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  transition:
    transform 0.25s ease,
    border 0.25s ease;
  position: relative;
  overflow: hidden;
}

.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top right,
    rgba(111, 154, 255, 0.35),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:focus-within,
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(143, 176, 255, 0.5);
}

.feature-card:hover::after {
  opacity: 1;
}

.feature-card h3 {
  margin-top: 0;
  font-size: 1.2rem;
}

.feature-card p {
  margin-bottom: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.workflow {
  margin-top: clamp(72px, 9vw, 120px);
  text-align: center;
}

.workflow h2 {
  font-size: 2rem;
  margin-bottom: 32px;
}

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 28px;
}

.steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  background: rgba(15, 24, 58, 0.7);
  border-radius: 20px;
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.step-number {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.snapshot {
  position: relative;
  display: grid;
  place-items: center;
}

.glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(103, 150, 255, 0.4),
    transparent 70%
  );
  filter: blur(6px);
  animation: pulse 6s ease-in-out infinite;
}

.snapshot-card {
  position: relative;
  background: rgba(14, 22, 55, 0.92);
  border-radius: 24px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 40px rgba(8, 12, 32, 0.45);
  width: min(320px, 100%);
}

.snapshot-card h3 {
  margin-top: 0;
}

.snapshot-card dl {
  margin: 0;
  display: grid;
  gap: 16px;
}

.snapshot-card dt {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.snapshot-card dd {
  margin: 6px 0 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.footer {
  margin-top: auto;
  padding: 32px clamp(24px, 5vw, 80px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--text-muted);
  font-size: 0.9rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 540px) {
  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.footer-links {
  display: flex;
  gap: 18px;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--text-secondary);
}

.toast {
  position: fixed;
  bottom: 32px;
  right: 32px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(17, 25, 58, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(5, 10, 30, 0.45);
  max-width: 320px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  transform: translateY(8px);
  color: var(--text-secondary);
  z-index: 20;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.toast.error {
  background: rgba(255, 127, 156, 0.16);
  border-color: rgba(255, 127, 156, 0.45);
  color: #ffd7e1;
}

.toast.success {
  background: rgba(80, 245, 198, 0.16);
  border-color: rgba(80, 245, 198, 0.45);
  color: #ddfff4;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .nav-links--desktop {
    display: none;
  }

  .nav-burger {
    display: inline-flex;
  }

  .top-nav {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .top-nav__end {
    grid-column: 3;
  }
}

@media (max-width: 400px) {
  .hero-stat dt {
    letter-spacing: 0.03em;
    font-size: 0.62rem;
  }
}

@media (max-width: 420px) {
  .nav-account-entry__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .nav-account-entry {
    padding: 9px 11px;
  }

  .logo-text {
    display: none;
  }
}

@media (max-width: 720px) {
  main {
    padding: 112px 20px 72px;
  }

  .card {
    padding: 24px;
  }

  .trust-badges {
    justify-content: center;
  }
}

/* Visually hidden labels for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Cookie consent (stored in localStorage; non-essential analytics not loaded here) */
.cookie-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 16px 20px;
  background: rgba(8, 12, 28, 0.92);
  border-top: 1px solid rgba(120, 200, 255, 0.2);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}

.cookie-consent-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.cookie-consent-inner p {
  margin: 0;
  flex: 1 1 240px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(230, 238, 255, 0.9);
}

.cookie-consent-inner a {
  color: #7ecbff;
}

.cookie-consent-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.privacy-tools {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.privacy-tools h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.privacy-tools-hint {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: rgba(220, 230, 255, 0.75);
}

.privacy-tools-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.privacy-delete-input {
  flex: 1 1 160px;
  min-width: 140px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
}

/* PDF tools hub (/tools) */
.tools-main {
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 100px 28px 80px;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 0 2.5rem;
  align-items: start;
}

/* Sticky left-rail category filter */
.tools-sidebar {
  position: sticky;
  top: 88px;
  grid-column: 1;
  padding: 0;
}

.tools-sidebar__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

.tools-sidebar__link {
  display: block;
  padding: 0.42rem 0.75rem;
  margin-bottom: 2px;
  border-radius: 7px;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(200, 210, 255, 0.75);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.tools-sidebar__link:hover {
  background: rgba(95, 139, 255, 0.1);
  color: #fff;
}
.tools-sidebar__link.active {
  background: rgba(95, 139, 255, 0.14);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--accent);
}

.tools-content {
  grid-column: 2;
  min-width: 0;
}

.tools-page-header {
  max-width: 100%;
  margin-bottom: 2rem;
}

.tools-page-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tools-page-title {
  margin: 0 0 0.5rem;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(1.85rem, 4vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.tools-page-lead {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.tools-jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}
.tools-jump-links a {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(95, 139, 255, 0.25);
  background: rgba(95, 139, 255, 0.06);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.tools-jump-links a:hover {
  background: rgba(95, 139, 255, 0.15);
  border-color: rgba(95, 139, 255, 0.45);
}

.tools-inline-search {
  margin-bottom: 1.75rem;
}
.tools-inline-search form {
  position: relative;
  display: flex;
  align-items: center;
}
.tools-inline-search__icon {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
}
.tools-inline-search__input {
  width: 100%;
  padding: 0.7rem 1rem 0.7rem 2.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.tools-inline-search__input::placeholder { color: var(--text-muted); }
.tools-inline-search__input:focus {
  border-color: rgba(95, 139, 255, 0.5);
  background: rgba(95, 139, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(95, 139, 255, 0.12);
}

.tools-search-empty {
  margin: 1.25rem 0 0;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  font-size: 0.98rem;
  color: var(--text-secondary);
  line-height: 1.55;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tools-search-empty a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tools-search-empty a:hover {
  color: var(--text-primary);
}

.tools-section-title {
  margin: 2.25rem 0 1rem;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.tools-section-title:first-of-type {
  margin-top: 1.25rem;
}

.tools-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.25rem;
}

.tools-grid__item {
  margin: 0;
}

.tool-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 200px;
  padding: 1.35rem 1.4rem 1.25rem;
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-elevated);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

a.tool-card:hover {
  border-color: rgba(120, 160, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 36px 72px rgba(4, 7, 25, 0.55);
}

a.tool-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.tool-card--soon {
  opacity: 0.92;
  cursor: default;
  box-shadow: none;
}

.tool-card__status {
  align-self: flex-start;
  margin-bottom: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
}

.tool-card__status--live {
  color: var(--success);
  background: rgba(80, 245, 198, 0.12);
}

.tool-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.tool-card__desc {
  margin: 0;
  flex: 1;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.tool-card__cta {
  margin-top: 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
}

.tools-bottom-cta {
  margin-top: 1rem;
  padding: 1.25rem 1.75rem;
  background: rgba(95, 139, 255, 0.08);
  border: 1px solid rgba(95, 139, 255, 0.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.tools-bottom-cta__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(95, 139, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
.tools-bottom-cta__icon svg {
  width: 20px;
  height: 20px;
}
.tools-bottom-cta__text {
  flex: 1;
  min-width: 0;
}
.tools-bottom-cta__heading {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.tools-bottom-cta__sub {
  margin: 3px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.tools-bottom-cta__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.2rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, box-shadow 0.15s;
}
.tools-bottom-cta__btn:hover {
  background: #4a7ae8;
  box-shadow: 0 4px 14px rgba(95, 139, 255, 0.35);
}
@media (max-width: 600px) {
  .tools-bottom-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

.tools-page-footnote {
  margin: 2.5rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.tools-page-footnote a {
  color: var(--accent);
}

.tool-back-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.tool-back-link:hover {
  text-decoration: underline;
}

.tool-run-main {
  position: relative;
  z-index: 1;
  width: min(860px, 100%);
  margin: 0 auto;
  padding: 100px 28px 80px;
}

.tool-preview-region {
  width: 100%;
  margin: 1rem 0 1.25rem;
}

.tool-banner {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.tool-banner--warn {
  border: 1px solid rgba(255, 200, 120, 0.35);
  background: rgba(255, 200, 120, 0.1);
  color: var(--text-secondary);
}

.tool-banner--neutral {
  border: 1px solid rgba(120, 160, 255, 0.25);
  background: rgba(120, 160, 255, 0.08);
  color: var(--text-secondary);
}

.tool-inline-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tool-run-form {
  margin: 1.5rem 0;
}

.tool-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.tool-field-group label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.tool-help {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.tool-crop-editor {
  position: relative;
  width: 100%;
  max-width: 760px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
}

.tool-crop-editor__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
}

.tool-crop-editor__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.tool-crop-editor__poly {
  fill: rgba(0, 200, 255, 0.18);
  stroke: rgba(0, 200, 255, 0.95);
  stroke-width: 2.5;
}

.tool-crop-editor__handle {
  fill: rgba(255, 255, 255, 0.95);
  stroke: rgba(0, 200, 255, 0.95);
  stroke-width: 2;
  cursor: grab;
}

.tool-crop-editor__handle:focus {
  outline: none;
  stroke: rgba(255, 220, 110, 0.98);
}

.editor-shell {
  position: relative;
  width: 100%;
  max-width: 760px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
}

.editor-shell--dragging .editor-shell__handle {
  cursor: grabbing;
}

.editor-shell__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
}

.editor-shell__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Allow vertical page scrolling when swiping the image itself;
     the handles below opt out so corner drags never scroll. */
  touch-action: pan-y;
}

.editor-shell__handle,
.editor-shell__midhandle,
.editor-shell__hit {
  touch-action: none;
}

.editor-shell__poly {
  fill: rgba(95, 139, 255, 0.2);
  stroke: rgba(95, 139, 255, 0.98);
  stroke-width: 2.5;
  cursor: move;
  touch-action: none;
}

.editor-shell--dragging .editor-shell__poly {
  cursor: grabbing;
}

.editor-shell__handle {
  fill: rgba(255, 255, 255, 0.95);
  stroke: rgba(95, 139, 255, 0.98);
  stroke-width: 2;
  cursor: grab;
}

.editor-shell__handle:focus {
  outline: none;
  stroke: rgba(255, 220, 110, 0.98);
}

/* Mid-edge handles — drag to move a whole edge (CamScanner-style) */
.editor-shell__midhandle {
  fill: rgba(95, 139, 255, 0.95);
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.5;
  cursor: grab;
}

/* Invisible enlarged hit targets layered over handles */
.editor-shell__hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
  cursor: grab;
}

/* Magnifier loupe shown while dragging a handle */
.editor-shell__loupe {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid rgba(95, 139, 255, 0.95);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 20;
  will-change: transform;
}
.editor-shell__loupe canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Touch devices: bigger handles + thicker outline (28-32px effective targets) */
@media (pointer: coarse) {
  .editor-shell__handle { r: 13; stroke-width: 3; }
  .editor-shell__midhandle { r: 9; }
  .editor-shell__hit[data-idx] { r: 30; }
  .editor-shell__hit[data-edge] { r: 24; }
  .editor-shell__poly { stroke-width: 3; }
}

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 0.55rem;
  margin-top: 0.5rem;
}

.thumb-tile {
  min-height: 76px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: grab;
}

.tool-input,
.tool-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
}

select.tool-input {
  background: #131828;
  color: var(--text-primary);
}

select.tool-input option {
  background: #131828;
  color: var(--text-primary);
}

.tool-textarea {
  resize: vertical;
  min-height: 4rem;
}

.tool-range {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

.tool-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0.75rem;
  font-size: 0.9rem;
}

.tool-selected-name {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.tool-merge-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.tool-merge-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.tool-merge-item__name {
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-merge-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex-shrink: 0;
}

.tool-merge-item__actions button {
  font: inherit;
  font-size: 0.75rem;
  padding: 0.25rem 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  cursor: pointer;
}

.tool-merge-item__actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tool-merge-remove {
  border-color: rgba(255, 120, 120, 0.35) !important;
}

/* Drag handle grip icon */
.tool-merge-grip {
  flex-shrink: 0;
  cursor: grab;
  opacity: 0.35;
  font-size: 1rem;
  line-height: 1;
  user-select: none;
  padding: 0 2px;
  transition: opacity 0.15s;
}
.tool-merge-grip:hover { opacity: 0.75; }
.tool-merge-grip:active { cursor: grabbing; }

/* Drag-and-drop visual states */
.tool-merge-item.is-dragging {
  opacity: 0.38;
  background: rgba(95, 139, 255, 0.04);
}
.tool-merge-item.drag-over {
  border-color: rgba(95, 139, 255, 0.7);
  background: rgba(95, 139, 255, 0.1);
  outline: none;
}

/* Over-limit warning banner */
.tool-merge-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
  color: #fbbf24;
  font-size: 0.82rem;
  line-height: 1.4;
}
.tool-merge-warning svg { flex-shrink: 0; }
.tool-merge-warning[hidden] { display: none; }

.tool-or-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tool-or-divider::before,
.tool-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* ── Tool upload drop zone ─────────────────────────────────────── */
.tool-upload-zone {
  border: 2px dashed rgba(113, 147, 255, 0.35);
  border-radius: 16px;
  padding: 2.5rem 1.5rem 2rem;
  text-align: center;
  background: rgba(12, 21, 52, 0.45);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  margin-bottom: 0.25rem;
}
.tool-upload-zone:hover {
  border-color: rgba(95, 139, 255, 0.6);
  background: rgba(12, 21, 52, 0.65);
}
.tool-upload-zone.drag-over {
  border-color: var(--accent);
  background: rgba(95, 139, 255, 0.08);
  transform: scale(1.015);
}
.tool-upload-zone__icon {
  display: block;
  margin: 0 auto 1rem;
  width: 48px;
  height: 48px;
  color: rgba(95, 139, 255, 0.7);
}
.tool-upload-zone__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
  margin-bottom: 0.75rem;
}
.tool-upload-zone__btn:hover {
  background: #4a7aee;
  transform: translateY(-1px);
}
.tool-upload-zone__drop-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.tool-upload-zone__name {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  word-break: break-all;
}
.tool-trust-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
  margin: 0.5rem 0 1.25rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.tool-trust-line svg { flex-shrink: 0; }

/* Options revealed after upload */
.tool-options-panel {
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 0.75rem;
}

.tool-field-error {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: #ff8a8a;
}

.tool-run-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.tool-scroll-to-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 8px;
  padding: 0.55rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.tool-scroll-to-download:hover {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.6);
}

.tool-scroll-to-download.hidden {
  display: none;
}

.tool-progress-wrap {
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tool-progress-track {
  flex: 1;
  height: 8px;
}

.tool-progress-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  min-width: 2.5rem;
  text-align: right;
}

.tool-status-line {
  margin: 0.5rem 0 0;
  min-height: 1.25rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.tool-result-card {
  margin: 1.5rem 0 0;
  padding: 1.25rem;
  border-radius: 14px;
  border: 1px solid rgba(80, 245, 198, 0.28);
  background: rgba(80, 245, 198, 0.08);
}

.tool-result-title {
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.tool-copy-row {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.6rem;
}

.tool-copy-preview {
  margin: 0;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.45;
}

.nav-search {
  margin-right: 8px;
}

.nav-search__input {
  width: 220px;
  max-width: 32vw;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.86rem;
}

.nav-search__input::placeholder {
  color: var(--text-muted);
}

.workspace {
  margin-top: 0.8rem;
  padding: 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(120, 160, 255, 0.25);
  background: rgba(120, 160, 255, 0.08);
  width: 100%;
  display: block;
}

.workspace__title {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
}

.workspace__toolbar,
.workspace__file-nav {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.workspace__btn {
  min-height: 2rem;
  padding: 0.35rem 0.7rem;
}

.workspace__zoom,
.workspace__file-label {
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
}

.workspace__canvas {
  display: block;
  width: 100%;
  min-height: 320px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(11, 19, 47, 0.95);
  cursor: grab;
}

.workspace__canvas--panning {
  cursor: grabbing;
}

.workspace__pager {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.workspace__pager-label,
.workspace__pager-total {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.workspace__pager-input {
  width: 76px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  font: inherit;
}

.workspace__hint {
  margin: 0.45rem 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.workspace--fullpage {
  position: fixed;
  inset: 88px 1rem 1rem;
  z-index: 15;
  margin-top: 0;
  border: 1px solid rgba(120, 160, 255, 0.36);
  background: rgba(7, 14, 36, 0.98);
  max-height: calc(100vh - 89px);
  overflow: auto;
}

.workspace--fullpage .workspace__toolbar,
.workspace--fullpage .workspace__file-nav,
.workspace--fullpage .workspace__pager {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.45rem 0;
  background: linear-gradient(
    180deg,
    rgba(7, 14, 36, 0.98),
    rgba(7, 14, 36, 0.82)
  );
}

.workspace--fullpage .workspace__canvas {
  min-height: min(74vh, 960px);
}

@media (max-width: 860px) {
  .tools-main {
    grid-template-columns: 1fr;
    padding: 100px 16px 72px;
  }
  .tools-sidebar {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.35rem;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0.5rem;
    align-items: center;
  }
  .tools-sidebar::-webkit-scrollbar { display: none; }
  /* Make the <nav> itself a horizontal flex strip so <a> links flow inline */
  .tools-sidebar nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    align-items: center;
    min-width: 0;
  }
  .tools-sidebar nav::-webkit-scrollbar { display: none; }
  .tools-sidebar__label {
    display: inline-flex;
    align-self: center;
    white-space: nowrap;
    margin: 0 0.4rem 0 0;
    flex-shrink: 0;
    font-size: 0.72rem;
  }
  .tools-sidebar__link {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    border: 1px solid rgba(95, 139, 255, 0.22);
    font-size: 0.82rem;
  }
  .tools-content {
    grid-column: 1;
  }
  /* Jump links are redundant with the chip sidebar on mobile */
  .tools-jump-links {
    display: none;
  }
  /* Tighten up the header block on mobile */
  .tools-page-header {
    margin-bottom: 1rem;
  }
  .tools-page-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  .tools-page-lead {
    font-size: 0.95rem;
  }
}
/* Desktop with sidebar: narrow viewport (861-1000px) → 2-col so cards aren't cramped */
@media (min-width: 861px) and (max-width: 1000px) {
  .tools-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .tools-grid-v2__spacer--3only {
    display: none;
  }
}
/* Small mobile: tighten top padding */
@media (max-width: 480px) {
  .tools-main {
    padding-top: 78px;
  }
}

@media (max-width: 960px) {
  .nav-search {
    display: none;
  }
}

@media (max-width: 720px) {
  .tools-main {
    padding: 90px 14px 60px;
  }

  .workspace--fullpage {
    inset: 72px 0.5rem 0.5rem;
    max-height: calc(100vh - 72px);
  }
}

/* ── Tool run page (Sejda-style) ────────────────────────────── */
.tool-run-header {
  max-width: 640px;
  margin: 0 auto 2rem;
  text-align: center;
}

.tool-breadcrumb {
  margin-bottom: 0.85rem;
}

.tool-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.13s;
}
.tool-back-link:hover { color: var(--accent); }

.tool-run-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.tool-run-desc {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}

.tool-run-body {
  max-width: 680px;
  margin: 0 auto;
}

.tool-result-card.hidden { display: none; }

.tool-result-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  text-align: center;
  margin: 1.5rem auto;
  max-width: 400px;
}

.tool-result-check {
  width: 48px;
  height: 48px;
}

.tool-result-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.tool-result-card .cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Hero quick-tool chips ───────────────────────────────────── */
.hero-quick-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 1.1rem;
}

.hero-quick-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(210,220,255,0.85);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.hero-quick-tool:hover {
  background: rgba(95, 139, 255, 0.14);
  border-color: rgba(95, 139, 255, 0.5);
  color: var(--text-primary);
}
.hero-quick-tool--all {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.hero-quick-tool--all:hover {
  background: #4a78ff;
  border-color: transparent;
  color: #fff;
}

/* ── Hero popular-tools panel (replaces upload card) ────────── */
.hero-tools-panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  overflow: hidden;
}

.hero-tools-panel__heading {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.hero-tools-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-tools-panel__grid--single {
  grid-template-columns: 1fr;
}

.htp-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 0.83rem;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
  min-width: 0;
}

.htp-card:hover {
  background: rgba(95, 139, 255, 0.12);
  border-color: rgba(95, 139, 255, 0.4);
}

.htp-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.htp-card__icon--red    { background: rgba(239, 68, 68, 0.14); }
.htp-card__icon--green  { background: rgba(74, 222, 128, 0.14); }
.htp-card__icon--purple { background: rgba(192, 132, 252, 0.14); }
.htp-card__icon--teal   { background: rgba(45, 212, 191, 0.14); }
.htp-card__icon--pink   { background: rgba(244, 114, 182, 0.14); }
.htp-card__icon--orange { background: rgba(251, 146, 60, 0.14); }
.htp-card__icon--yellow { background: rgba(250, 204, 21, 0.14); }
.htp-card__icon--blue   { background: rgba(59, 130, 246, 0.14); }

.htp-card__icon svg {
  width: 18px;
  height: 18px;
}
.htp-card__icon--red svg    { color: #f87171; }
.htp-card__icon--green svg  { color: #4ade80; }
.htp-card__icon--purple svg { color: #c084fc; }
.htp-card__icon--teal svg   { color: #2dd4bf; }
.htp-card__icon--pink svg   { color: #f472b6; }
.htp-card__icon--orange svg { color: #fb923c; }
.htp-card__icon--yellow svg { color: #facc15; }
.htp-card__icon--blue svg   { color: #60a5fa; }

.htp-card__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.htp-card--all {
  justify-content: center;
  background: rgba(95, 139, 255, 0.22);
  border-color: rgba(95, 139, 255, 0.55);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
}

.htp-card--all:hover {
  background: rgba(95, 139, 255, 0.2);
  border-color: rgba(95, 139, 255, 0.6);
  color: #fff;
}

@media (max-width: 900px) {
  .how-it-works .features:not(.features--steps) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero-tools-panel__grid {
    grid-template-columns: 1fr;
  }

  .how-it-works .features {
    grid-template-columns: 1fr;
  }

  .htp-card__label {
    white-space: normal;
  }
}

@media (max-width: 1100px) {
  .hero-tools-panel__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Section visual differentiation ─────────────────────────── */
.how-it-works + .how-it-works {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: clamp(48px, 6vw, 72px);
}

/* "What makes DocFlow different" — subtle accent tint */
#differentiators {
  background: rgba(95, 139, 255, 0.03);
  border-radius: 28px;
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px);
  margin-left: -clamp(24px, 3vw, 40px);
  margin-right: -clamp(24px, 3vw, 40px);
}

/* "How it works" — numbered step kicker */
#how-it-works .section-heading-center::before {
  content: 'How it works';
  display: none; /* heading text is already in the HTML */
}

/* ── Mobile search toggle ─────────────────────────────────────── */
.nav-search-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.nav-search-toggle:hover {
  background: rgba(95, 139, 255, 0.14);
  border-color: rgba(95, 139, 255, 0.4);
  color: var(--text-primary);
}

@media (max-width: 960px) {
  .nav-search-toggle {
    display: inline-flex;
  }
}

.nav-search-overlay {
  display: none; /* shown only when .is-open is added by JS */
}

.nav-search-overlay.is-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Must be above nav (z-index:20) AND mobile-nav drawer (z-index:100) */
  z-index: 110;
  /* Match nav vertical padding so the overlay fully covers it */
  padding: 16px clamp(20px, 4vw, 32px);
  min-height: 72px;
  background: rgba(7, 14, 36, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(95, 139, 255, 0.18);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  display: flex;
  gap: 0.75rem;
  align-items: center;
  animation: slideDown 0.18s ease;
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.nav-search-overlay form {
  flex: 1;
  display: flex;
}

.nav-search-overlay__input {
  flex: 1;
  /* Kill browser-default search input styling (WebKit adds white bg + border) */
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  min-height: 40px;
}

.nav-search-overlay__input:focus {
  border-color: rgba(95, 139, 255, 0.55);
  background: rgba(95, 139, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(95, 139, 255, 0.12);
}
/* Remove WebKit's injected search cancel button */
.nav-search-overlay__input::-webkit-search-cancel-button,
.nav-search-overlay__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.nav-search-overlay__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.nav-search-overlay__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* ── Tool category section ──────────────────────────────────── */
.tool-category-section {
  margin-bottom: 2.75rem;
  scroll-margin-top: 90px;
}

.tool-category-heading {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--accent);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tool-category-heading__icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ── Tool card v2 — horizontal row design ────────────────────── */
.tools-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 88px; /* uniform height for every row */
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tools-grid-v2--compact {
  grid-template-columns: repeat(2, 1fr);
}

/* li is the grid item — stretch it to fill the fixed row height */
.tools-grid-v2 > li {
  display: flex;
}

/* Invisible slot filler — keeps rows complete without adding fake content */
.tools-grid-v2__spacer {
  visibility: hidden;
  pointer-events: none;
}

.tool-card-v2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  cursor: pointer;
  min-width: 0;
  width: 100%;   /* fill the li horizontally */
  height: 100%;  /* fill the li vertically (= grid-auto-rows height) */
  overflow: hidden;
  box-sizing: border-box;
}
.tool-card-v2:hover {
  border-color: rgba(95, 139, 255, 0.5);
  background: rgba(15, 24, 68, 0.92);
  box-shadow: 0 4px 20px rgba(95, 139, 255, 0.08);
}
.tool-card-v2--disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.7);
}


.tool-card-v2__icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tool-card-v2__icon-wrap--blue   { background: rgba(59, 130, 246, 0.14); }
.tool-card-v2__icon-wrap--red    { background: rgba(239, 68,  68, 0.14); }
.tool-card-v2__icon-wrap--green  { background: rgba(34, 197, 94, 0.14); }
.tool-card-v2__icon-wrap--purple { background: rgba(168, 85, 247, 0.14); }
.tool-card-v2__icon-wrap--orange { background: rgba(249,115,  22, 0.14); }
.tool-card-v2__icon-wrap--teal   { background: rgba(20, 184, 166, 0.14); }
.tool-card-v2__icon-wrap--pink   { background: rgba(236, 72, 153, 0.14); }
.tool-card-v2__icon-wrap--yellow { background: rgba(234,179,   8, 0.14); }

.tool-card-v2__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.tool-card-v2__icon--blue   { color: #60a5fa; }
.tool-card-v2__icon--red    { color: #f87171; }
.tool-card-v2__icon--green  { color: #4ade80; }
.tool-card-v2__icon--purple { color: #c084fc; }
.tool-card-v2__icon--orange { color: #fb923c; }
.tool-card-v2__icon--teal   { color: #2dd4bf; }
.tool-card-v2__icon--pink   { color: #f472b6; }
.tool-card-v2__icon--yellow { color: #facc15; }

/* Text block sits to the right of the icon */
.tool-card-v2__text {
  min-width: 0;
  flex: 1;
}

.tool-card-v2__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.15rem;
  line-height: 1.3;
}

.tool-card-v2__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 0.4rem;
}

.tool-card-v2__badge--soon {
  background: rgba(249, 115, 22, 0.18);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.tool-card-v2__desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Tool card v2 — mobile overrides (must come after base styles) ── */
@media (max-width: 860px) {
  .tools-grid-v2,
  .tools-grid-v2--compact {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 0.6rem;
  }
  .tools-grid-v2__spacer {
    display: none;
  }
  .tool-card-v2 {
    padding: 0.9rem 1rem;
    height: auto;
    gap: 0.9rem;
  }
  .tool-card-v2__icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }
  .tool-card-v2__icon {
    width: 22px;
    height: 22px;
  }
  .tool-card-v2__title {
    font-size: 0.95rem;
  }
  .tool-card-v2__desc {
    font-size: 0.8rem;
  }
}

/* ── Crop editor UI ──────────────────────────────────────────── */
.crop-mode-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.crop-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 1rem 0.75rem;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
  color: var(--text-primary);
}
.crop-mode-card:hover { border-color: rgba(95, 139, 255, 0.45); }
.crop-mode-card.selected {
  border-color: var(--accent);
  background: rgba(95, 139, 255, 0.08);
}
.crop-mode-card__icon { font-size: 1.4rem; }
.crop-mode-card__label { font-size: 0.8rem; font-weight: 600; }
.crop-mode-card__sub { font-size: 0.7rem; color: var(--text-secondary); }

.crop-preview-modes {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  overflow: hidden;
}
.crop-preview-tab {
  flex: 1;
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  transition: background 0.13s, color 0.13s;
}
.crop-preview-tab.active {
  background: var(--accent);
  color: #fff;
}

.crop-controls {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}
.crop-controls__label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.crop-controls__input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 5px;
  color: var(--text-primary);
  padding: 0.3rem 0.5rem;
  font-size: 0.82rem;
  font-family: inherit;
  width: 100%;
}
.crop-unit-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--card-border);
  border-radius: 5px;
  overflow: hidden;
}
.crop-unit-btn {
  flex: 1;
  padding: 0.25rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.13s, color 0.13s;
}
.crop-unit-btn.active {
  background: var(--accent);
  color: #fff;
}

.crop-action-row {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

/* ── Scan Document editor — 3-zone layout ───────────────────── */
.scan-editor {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.5rem;
  position: relative; /* for undo toast */
}

/* ZONE 1 — Toolbar */
.scan-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.scan-doc-name {
  flex: 1;
  min-width: 160px;
  max-width: 340px;
}
.scan-export-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.scan-bar-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.scan-fmt-sel {
  padding: 4px 8px;
  font-size: 0.8rem;
  width: auto !important;
}
.scan-sub-sel {
  padding: 4px 8px;
  font-size: 0.78rem;
  width: auto !important;
  color: var(--text-secondary);
}

/* ZONE 3 Row A — Filters + Rotate */
.scan-filter-rotate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scan-filter-rotate-row::-webkit-scrollbar { display: none; }
.scan-preset-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.scan-rotate-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.scan-rot-btn {
  padding: 4px 10px !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}
.scan-rot-degrees {
  font-size: 0.78rem;
  color: var(--text-secondary);
  min-width: 2.2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ZONE 3 Row B — Sliders */
.scan-adj-panel {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
}
.scan-slider-col {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 110px;
}
.scan-slider-hdr {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.scan-apply-all {
  white-space: nowrap;
  align-self: flex-end;
  flex-shrink: 0;
}

/* ZONE 3 Row C — Strip header */
.scan-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Crop editor + live preview — two columns on desktop, stacked on mobile */
.scan-page-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  min-height: 200px;
}
.scan-page-layout > div {
  display: flex;
  flex-direction: column;
}

/* ── Page strip label ────────────────────────────────────────── */
.scan-strip-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.scan-page-strip {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 0.25rem 0.1rem 0.45rem;
  flex: 1;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 139, 255, 0.4) transparent;
}
.scan-page-strip::-webkit-scrollbar { height: 6px; }
.scan-page-strip::-webkit-scrollbar-thumb {
  background: rgba(95, 139, 255, 0.4);
  border-radius: 3px;
}

.scan-strip-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  cursor: grab;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.15s, opacity 0.15s, transform 0.15s;
  flex: 0 0 auto;
  scroll-snap-align: start;
  touch-action: pan-x;
  user-select: none;
  -webkit-user-select: none;
}
.scan-strip-card.is-active {
  border-color: var(--accent);
}

/* Floating ghost that follows the pointer while reordering */
.scan-strip-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.92;
  transform-origin: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  border-color: var(--accent);
  background: rgba(22, 22, 32, 0.95);
  will-change: transform;
}

.scan-strip-thumb {
  width: 52px;
  height: 68px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  pointer-events: none;
}

.scan-card-num {
  font-size: 0.7rem;
  color: var(--text-secondary);
  pointer-events: none;
}

.scan-card-actions {
  display: flex;
  gap: 2px;
}

.scan-card-btn {
  font-size: 0.65rem;
  padding: 1px 3px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  line-height: 1.4;
  font-family: inherit;
}
.scan-card-btn.danger { color: #f87171; }
.scan-card-btn:disabled { opacity: 0.35; cursor: default; }
.scan-card-btn:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--accent);
}
.scan-card-btn.danger:not(:disabled):hover {
  border-color: #f87171;
  color: #f87171;
}
.scan-preset-btn {
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.13s, background 0.13s, color 0.13s;
}
.scan-preset-btn.active, .scan-preset-btn:hover {
  border-color: var(--accent);
  background: rgba(95, 139, 255, 0.1);
  color: var(--accent);
}

/* Undo toast */
.scan-undo-toast {
  position: absolute;
  bottom: .75rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(22, 22, 32, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: .45rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .82rem;
  color: #fff;
  z-index: 100;
  white-space: nowrap;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .45);
  animation: scanToastIn .18s ease;
}
@keyframes scanToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Rotation badge on strip thumbnails */
.scan-rotation-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: .58rem;
  padding: 1px 4px;
  border-radius: 4px;
  pointer-events: none;
  line-height: 1.4;
  white-space: nowrap;
}

/* Strip drag-to-reorder */
.scan-drag-active {
  opacity: 0.45;
  cursor: grabbing;
}
.scan-drag-over {
  border-color: var(--accent) !important;
  transform: scale(1.06);
  background: rgba(95, 139, 255, 0.1) !important;
}

/* ── Touch devices: comfortable 40px+ targets ─────────────────── */
@media (pointer: coarse) {
  .scan-editor .cta.small {
    min-height: 40px;
    padding: 0.45rem 0.9rem;
  }
  .scan-preset-btn {
    min-height: 40px;
  }
  .scan-strip-thumb {
    width: 64px;
    height: 84px;
  }
  .scan-card-btn {
    font-size: 0.8rem;
    min-width: 30px;
    min-height: 30px;
    padding: 3px 6px;
  }
  .scan-editor .tool-range {
    height: 32px; /* easier slider thumb grabbing */
  }
  .scan-editor select.tool-input {
    min-height: 40px;
  }
}

/* ── Zone separators — subtle visual dividers between rows ─────── */
.scan-filter-rotate-row,
.scan-adj-panel,
.scan-strip-header {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 0.65rem;
}

/* ── Mobile / tablet layout ───────────────────────────────────── */
@media (max-width: 860px) {
  /* Stack crop editor above live preview — full width each */
  .scan-page-layout {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  /* Sliders stack full-width */
  .scan-adj-panel { gap: 0.6rem; }
  .scan-adj-panel > div { min-width: 100% !important; }
  .scan-adj-panel > button { align-self: stretch !important; }

  /* Strip label sits above the scrolling strip */
  .scan-strip-wrap { align-items: center; }
  .scan-strip-label { flex: 0 0 auto; }

  /* Taller crop area on phones */
  .editor-shell__img { max-height: 56vh; }
}

/* ── Narrow mobile (≤600px) ───────────────────────────────────── */
@media (max-width: 600px) {
  /* Toolbar: stack doc name above export row */
  .scan-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .scan-doc-name {
    max-width: none;
  }
  .scan-export-group {
    margin-left: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .scan-export-group::-webkit-scrollbar { display: none; }

  /* Filter chips: smaller on narrow screens */
  .scan-preset-btn {
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
  }

  /* Strip header: label left, button right — no stretching */
  .scan-strip-header {
    align-items: center;
  }
  .scan-strip-header .cta {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Strip cards: compact size, hide move buttons */
  .scan-strip-thumb {
    width: 44px;
    height: 58px;
  }
  .scan-card-btn[title="Move left"],
  .scan-card-btn[title="Move right"] {
    display: none;
  }
}

/* Sticky run button on small screens — always reachable */
@media (max-width: 768px) {
  body.page-tool-run .tool-run-actions {
    position: sticky;
    bottom: 0;
    z-index: 60;
    margin: 0.5rem -4px 0;
    padding: 0.6rem 4px calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(7, 11, 26, 0.97) 65%, rgba(7, 11, 26, 0));
  }
  body.page-tool-run .tool-run-actions .cta {
    width: 100%;
    min-height: 48px;
  }
}

/* ── Tool page loading state ──────────────────────────────────── */
.tool-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 3.5rem 1rem;
  color: var(--text-secondary);
  font-size: 0.88rem;
}
.tool-loading__spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(95, 139, 255, 0.2);
  border-top-color: var(--accent, #5f8bff);
  animation: toolLoadSpin 0.8s linear infinite;
}
@keyframes toolLoadSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tool-loading__spinner { animation-duration: 2.4s; }
}
/* Hide the empty form until initPage() has populated it */
body.page-tool-run:not(.tool-ready) .tool-run-body,
body.page-tool-run:not(.tool-ready) .tool-preview-region {
  display: none;
}
body.page-tool-run.tool-ready .tool-loading {
  display: none;
}

/* ── BG-remove canvas editor ─────────────────────────────────── */
.bgr-editor {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

/* toolbar */
.bgr-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}
.bgr-tbar-grp {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.bgr-tbar-lbl {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* tool buttons */
.bgr-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.bgr-tool-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.bgr-tool-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.bgr-erase.active { background: #e74c3c; border-color: #e74c3c; }
.bgr-keep.active  { background: #27ae60; border-color: #27ae60; }
.bgr-pan.active   { background: var(--accent); border-color: var(--accent); color: #fff; }

/* hints bar */
.bgr-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0.3rem 0.1rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.bgr-hints kbd {
  display: inline-block;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.7rem;
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
}

/* brush slider */
.bgr-brush-slider {
  width: 90px;
  accent-color: var(--accent);
  cursor: pointer;
}
.bgr-brush-val {
  font-size: 0.75rem;
  color: var(--text-secondary);
  min-width: 2.8rem;
}

/* zoom / icon buttons */
.bgr-icon-btn {
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
  line-height: 1;
}
.bgr-icon-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.bgr-zoom-val {
  font-size: 0.75rem;
  color: var(--text-secondary);
  min-width: 2.8rem;
  text-align: center;
}

/* single-canvas viewport with overlay split slider */
.bgr-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  height: 520px;
  background: #111827;
  user-select: none;
}
.bgr-canvas,
.bgr-orig-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}
.bgr-orig-canvas { pointer-events: none; }

/* brush cursor ring */
.bgr-cursor-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.bgr-cursor-ring.bgr-cursor-keep { border-color: rgba(80,220,110,0.9); }

/* split slider */
.bgr-split-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 40px;
  transform: translateX(-50%);
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.bgr-split-line::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255,255,255,0.75);
  transform: translateX(-50%);
  pointer-events: none;
}
.bgr-split-handle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: 0.7rem;
  border: none;
  cursor: ew-resize;
  box-shadow: 0 2px 10px rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative; z-index: 1;
  transition: transform 0.1s;
}
.bgr-split-handle:hover { transform: scale(1.12); }

/* controls */
.bgr-controls {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.bgr-ctrl-row,
.bgr-dl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
}
.bgr-ctrl-lbl {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* background pill buttons */
.bgr-bg-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.6rem;
  border-radius: 20px;
  border: 1px solid var(--card-border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.bgr-bg-pill:hover { background: rgba(255,255,255,0.07); color: var(--text-primary); }
.bgr-bg-pill.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(95,139,255,0.1);
}
.bgr-check-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: repeating-conic-gradient(#888 0% 25%, #555 0% 50%) 0 0 / 8px 8px;
  flex-shrink: 0;
}
.bgr-color-pick {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 2px solid var(--card-border);
  padding: 1px;
  cursor: pointer;
  background: transparent;
}

/* download row */
.bgr-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
}

/* status line */
.bgr-status {
  font-size: 0.78rem;
  color: var(--text-secondary);
  min-height: 1.2em;
}

@media (max-width: 600px) {
  .bgr-toolbar { gap: 0.3rem 0.6rem; padding: 0.4rem 0.5rem; }
  .bgr-brush-slider { width: 64px; }
  .bgr-viewport { height: 360px; }
}

/* ── Compress result ring ───────────────────────────────────── */
.compress-result-panel {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 1.5rem 1.75rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.compress-ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.compress-ring {
  display: block;
  transform: rotate(-90deg);
}

.compress-ring__bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 10;
}

.compress-ring__fill {
  fill: none;
  stroke: #e53e3e;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.compress-ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.compress-ring__pct {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.compress-ring__saved-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.compress-stats {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.compress-stats__msg {
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
}

.compress-stats__sizes {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.compress-stats__arrow {
  color: var(--text-secondary);
  font-weight: 400;
  margin: 0 0.25em;
}

/* ── PDF Editor page ────────────────────────────────────────── */
.pdf-editor-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: #1a1a2e;
}

.pdf-editor-topbar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 1rem;
  height: 52px;
  background: #0f0f23;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  overflow-x: auto;
}

.pdf-editor-brand {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1rem;
  white-space: nowrap;
  margin-right: 1.5rem;
  text-decoration: none;
}

.pdf-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.pdf-editor-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(224, 229, 255, 0.82);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}

.pdf-editor-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.pdf-editor-btn.active {
  background: rgba(95, 139, 255, 0.18);
  color: var(--accent);
}

.pdf-editor-btn--apply {
  background: var(--accent);
  color: #fff;
  margin-left: auto;
  font-weight: 600;
}

.pdf-editor-btn--apply:hover {
  background: #4a76f0;
  color: #fff;
}

.pdf-editor-btn--apply:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pdf-editor-btn-sep {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.1);
  margin: 0 6px;
  flex-shrink: 0;
}

.pdf-editor-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.pdf-editor-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: #0f0f23;
  border-right: 1px solid rgba(255,255,255,0.07);
  overflow-y: auto;
  padding: 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pdf-editor-thumb {
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  padding: 4px;
  transition: border-color 0.15s;
  text-align: center;
}

.pdf-editor-thumb.active {
  border-color: var(--accent);
}

.pdf-editor-thumb img {
  width: 100%;
  display: block;
  border-radius: 3px;
}

.pdf-editor-thumb-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.pdf-editor-canvas-area {
  flex: 1;
  overflow: auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  background: #1a1a2e;
}

.pdf-editor-page-wrap {
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  border-radius: 4px;
  overflow: visible;
  background: #fff;
}

.pdf-editor-page-canvas {
  display: block;
  position: relative;
  z-index: 0;
}

.pdf-editor-draw-canvas {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.pdf-editor-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5; /* above editor-block-overlay (4); pointer-events:none so clicks pass through */
}

.pdf-editor-overlay.interactive {
  pointer-events: all;
  cursor: crosshair;
}

/* PDF.js text runs — aligned to glyph geometry; Edit text tool enables interaction */
.pdf-editor-text-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.pdf-editor-text-layer.interactive {
  pointer-events: auto;
  cursor: text;
}

/* Invisible in normal view (canvas shows glyphs); visible only while editing (PDF.js pattern) */
.pdf-editor-text-run {
  position: absolute;
  white-space: pre-wrap;
  transform-origin: 0 100%;
  color: transparent;
  caret-color: #111;
  line-height: 1;
  pointer-events: none;
  user-select: text;
  min-width: 2px;
  min-height: 0.5em;
}

.pdf-editor-text-run::selection {
  background: rgba(95, 139, 255, 0.35);
}

.pdf-editor-text-layer.interactive .pdf-editor-text-run {
  pointer-events: auto;
  cursor: text;
}

/* Hover highlight — shows the clickable text region (like Sejda's blue hover) */
.pdf-editor-text-layer.interactive .pdf-editor-text-run:hover {
  background: rgba(95, 139, 255, 0.15);
  outline: 1.5px solid rgba(95, 139, 255, 0.6);
  outline-offset: 2px;
  border-radius: 2px;
  cursor: text;
}

.pdf-editor-text-run[contenteditable='true'],
.pdf-editor-text-run:focus {
  color: #111;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  min-width: 60px;
  min-height: 1em;
  background: #fff;
  border-radius: 2px;
  padding: 0;
  /* Each span is a single PDF text run — prevent CSS font width mismatch from wrapping it */
  white-space: nowrap;
  overflow: visible;
}

/* Placeholder hint while the edit field is empty */
.pdf-editor-text-run[contenteditable='true']:empty::before {
  content: attr(data-placeholder);
  color: rgba(95, 139, 255, 0.7);
  font-style: italic;
  pointer-events: none;
}

/* Pending edit — show replacement text with amber underline; canvas still visible behind */
.pdf-editor-text-run.is-dirty {
  color: #111;
  background: #fff;
  border-radius: 2px;
  padding: 0;
  white-space: nowrap;
  overflow: visible;
  box-shadow: 0 2px 0 rgba(255, 184, 76, 0.95);
  outline: 1px dashed rgba(255, 184, 76, 0.7);
  outline-offset: 1px;
}

/* Unmodified span — fully transparent so only canvas glyphs show */
.pdf-editor-text-run.is-committed {
  /* intentionally empty – color: transparent inherited from base rule */
}

.pdf-editor-text-run.is-editing {
  color: #111;
  background: #fff;
  border-radius: 2px;
  padding: 0;
  white-space: nowrap;
  overflow: visible;
  box-shadow: 0 2px 0 rgba(95, 139, 255, 0.95);
}

.pdf-editor-element {
  position: absolute;
  pointer-events: all;
  cursor: move;
  user-select: none;
}

/* Legacy text element (kept for any old elements still in the DOM) */
.pdf-editor-element--text {
  border: 1.5px dashed rgba(95, 139, 255, 0.7);
  padding: 2px 4px;
  background: transparent;
  min-width: 40px;
  min-height: 20px;
  outline: none;
  color: #000;
  font-size: 14px;
  resize: none;
  overflow: hidden;
  white-space: nowrap;
  cursor: text;
}
.pdf-editor-element--text:focus { border-color: var(--accent); outline: none; }

/* New text wrapper — outer draggable shell */
.pdf-editor-element--text-wrap {
  border: 1.5px dashed rgba(95, 139, 255, 0.55);
  padding: 2px 4px;
  background: transparent;
  min-width: 40px;
  box-sizing: border-box;
  cursor: grab;
}
.pdf-editor-element--text-wrap:active { cursor: grabbing; }
.pdf-editor-element--text-wrap.selected,
.pdf-editor-element--text-wrap.is-editing {
  border-color: var(--accent);
  outline: none;
}

/* Inner editable text — no border of its own */
.pdf-editor-added-text {
  outline: none;
  min-height: 1.2em;
  word-break: keep-all;
  overflow: visible;
}

.pdf-editor-element--whiteout {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
}

.pdf-editor-element--shape-rect {
  border: 2px solid #e53e3e;
  background: transparent;
}

.pdf-editor-element--shape-ellipse {
  border: 2px solid #e53e3e;
  background: transparent;
  border-radius: 50%;
}

.pdf-editor-element--image {
  object-fit: contain;
  display: block;
}

.pdf-editor-element--signature {
  object-fit: contain;
  display: block;
}

.pdf-editor-element--link {
  color: #3b82f6;
  text-decoration: underline;
  background: rgba(59, 130, 246, 0.08);
  border: 1px dashed #3b82f6;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 13px;
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

.pdf-editor-element--formfield {
  border: 1.5px solid #5f8bff;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  background: rgba(255,255,255,0.95);
  color: #111;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

.pdf-editor-element--formfield:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(95,139,255,0.25);
}

.pdf-editor-element-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border: 1px solid #fff;
  border-radius: 2px;
  cursor: se-resize;
  bottom: -4px;
  right: -4px;
  pointer-events: all;
}

.pdf-editor-element.selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.pdf-editor-toolbar-sub {
  display: none;
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  background: #0a0a1a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0.5rem 1rem;
  gap: 0.5rem;
  align-items: center;
  z-index: 20;
  flex-wrap: wrap;
}

.pdf-editor-toolbar-sub.visible {
  display: flex;
}

.pdf-editor-sub-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.pdf-editor-sub-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 5px;
  color: var(--text-primary);
  padding: 0.25rem 0.5rem;
  font-size: 0.82rem;
  font-family: inherit;
  width: auto;
}

.pdf-editor-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.3);
  cursor: pointer;
  padding: 0;
  background: #000;
}

.pdf-editor-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 1.25rem;
  color: var(--text-secondary);
}

.pdf-editor-upload-zone h2 {
  color: var(--text-primary);
  font-size: 1.3rem;
  margin: 0;
}

/* Author `display: flex` must not override the HTML `hidden` attribute (see .nav-tools-menu). */
.pdf-editor-sign-panel[hidden],
.pdf-editor-page-bar[hidden],
.pdf-editor-upload-zone[hidden] {
  display: none !important;
}

.pdf-editor-sign-panel {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.pdf-editor-sign-dialog {
  background: #141428;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 1.5rem;
  width: min(520px, 95vw);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pdf-editor-sign-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 0.5rem;
}

.pdf-editor-sign-tab {
  padding: 0.35rem 0.9rem;
  border-radius: 6px 6px 0 0;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.pdf-editor-sign-tab.active {
  background: rgba(95, 139, 255, 0.18);
  color: var(--accent);
}

.pdf-editor-sign-canvas {
  width: 100%;
  height: 180px;
  background: #fff;
  border-radius: 8px;
  touch-action: none;
  cursor: crosshair;
}

.pdf-editor-sign-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.pdf-editor-page-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #0f0f23;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.pdf-editor-page-bar button {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-primary);
  border-radius: 5px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: inherit;
}

.pdf-editor-page-bar button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Annotate highlight overlay ─────────────────────────────── */
.pdf-editor-element--highlight {
  background: rgba(255, 220, 0, 0.4);
  pointer-events: all;
  cursor: move;
}

.pdf-editor-element--strikeout {
  /* background color set via inline style from color picker */
  cursor: move;
}

/* ── Drawing canvas ─────────────────────────────────────────── */
.pdf-editor-draw-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pdf-editor-draw-canvas.active {
  pointer-events: all;
  cursor: crosshair;
}

/* ── PDF Editor toast notification ──────────────────────────────── */
.editor-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: #1a2340;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  font-size: 0.85rem;
  padding: 0.65rem 1.2rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0;
  white-space: nowrap;
}

.editor-toast--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.editor-toast--success {
  border-color: rgba(74, 222, 128, 0.4);
  color: #4ade80;
}

.editor-toast--error {
  border-color: rgba(248, 113, 113, 0.4);
  color: #f87171;
}

.editor-toast--info {
  border-color: rgba(95, 139, 255, 0.4);
  color: var(--accent);
}

.hero-upload-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin: 6px 0 0;
}

.hero-upload-meta a {
  color: var(--accent);
  text-decoration: none;
}

/* ── Block-based text editor overlay (pdf-editor 2 approach) ─────── */

/* Origin-cover layer: below user elements (z:3) but above canvas */
.origin-cover-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.editor-block-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4; /* above .pdf-editor-overlay (3) so blocks are always hittable */
}

/* blocks are only interactive when the overlay has the .active class
   (set by updateOverlayMode when activeTool === 'native_text') */
/* Blocks hittable in Edit-text mode */
.editor-block-overlay.active .editor-text-block {
  pointer-events: all;
  cursor: grab;
}
.editor-block-overlay.active .editor-text-block:active {
  cursor: grabbing;
}
/* Edited (committed) blocks are ALWAYS draggable — even outside Edit-text mode.
   Exclude the --editing state so the inline editor keeps full mouse control. */
.editor-block-overlay .editor-text-block--edited:not(.editor-text-block--editing) {
  pointer-events: all;
  cursor: grab;
}
.editor-block-overlay .editor-text-block--edited:not(.editor-text-block--editing):active {
  cursor: grabbing;
}
/* drag handle sibling must receive events even though overlay parent is pointer-events:none */
.editor-block-overlay .editor-text-block__drag-handle {
  pointer-events: all;
}

.editor-text-block {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none; /* default off; enabled via .active parent */
  cursor: default;
  border-radius: 2px;
  line-height: 1.2;
  white-space: pre-wrap;
  overflow: visible;
  z-index: 2; /* always above origin-cover (z-index:1) */
}

/* origin cover sits below all blocks */
.editor-text-origin-cover {
  z-index: 1 !important;
}

.editor-text-block:hover {
  outline: 1px dashed rgba(88, 101, 242, 0.55);
  background: rgba(88, 101, 242, 0.06);
}

.editor-text-block--edited {
  background: #fff; /* covers original canvas text beneath the edited block */
}

.editor-text-block--edited:hover {
  outline: 1.5px dashed rgba(88, 101, 242, 0.6);
  background: #fff; /* keep opaque — prevents original canvas text from bleeding through */
}

.editor-text-block__text {
  display: inline;
  white-space: pre-wrap;
}

.editor-block-popup {
  position: absolute;
  z-index: 200;
  background: #fff;
  border: 1.5px solid #5865f2;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  padding: 8px;
  min-width: 210px;
  pointer-events: all;
}

.editor-block-popup__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}

.editor-block-popup__font {
  font-size: 0.72rem;
  color: #555;
  background: #f0f0f0;
  border-radius: 3px;
  padding: 2px 6px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-block-popup__size {
  width: 48px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 0.8rem;
  text-align: center;
}

.editor-block-popup__style {
  padding: 3px 7px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
}

.editor-block-popup__style.active { background: #5865f2; color: #fff; border-color: #5865f2; }

.editor-block-popup__textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 60px;
  border: 1.5px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  font-size: 0.9rem;
  resize: vertical;
  margin-bottom: 6px;
}

.editor-block-popup__textarea:focus { outline: none; border-color: #5865f2; }

.editor-block-popup__position {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.75rem;
  color: #666;
}
.editor-block-popup__position label {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
}
.editor-block-popup__x,
.editor-block-popup__y {
  flex: 1;
  width: 0; /* let flex grow */
  min-width: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 0.78rem;
  text-align: center;
}

.editor-block-popup__actions { display: flex; gap: 6px; }

.editor-block-popup__apply {
  flex: 1; padding: 5px; background: #5865f2; color: #fff;
  border: none; border-radius: 4px; cursor: pointer; font-size: 0.82rem; font-weight: 600;
}
.editor-block-popup__apply:hover { background: #4752c4; }

.editor-block-popup__cancel {
  flex: 1; padding: 5px; background: #eee; color: #333;
  border: none; border-radius: 4px; cursor: pointer; font-size: 0.82rem;
}
.editor-block-popup__cancel:hover { background: #ddd; }

/* ── Inline block-edit toolbar ───────────────────────────────────── */

.editor-inline-toolbar {
  position: fixed;
  z-index: 600;
  display: none;          /* JS sets style.display = 'flex' when open */
  gap: 4px;
  align-items: center;
  flex-wrap: nowrap;
  background: #1a1a2e;
  border: 1px solid rgba(95, 139, 255, 0.45);
  border-radius: 9px;
  padding: 5px 8px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55);
  pointer-events: all;
}

.editor-inline-toolbar select,
.editor-inline-toolbar input[type="number"] {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  color: #e0e0f0;
  font-size: 0.8rem;
  padding: 3px 5px;
  outline: none;
}
.editor-inline-toolbar select:focus,
.editor-inline-toolbar input[type="number"]:focus {
  border-color: rgba(95, 139, 255, 0.7);
}
.editor-inline-toolbar select option { background: #1a1a2e; }

.editor-inline-toolbar input[type="color"] {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  padding: 1px;
  cursor: pointer;
  background: none;
}

.ibt-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  color: #c8cce8;
  cursor: pointer;
  font-size: 0.82rem;
  padding: 3px 8px;
  line-height: 1.4;
  transition: background 0.12s;
}
.ibt-btn:hover { background: rgba(255, 255, 255, 0.15); }
.ibt-btn.active {
  background: rgba(95, 139, 255, 0.35);
  border-color: rgba(95, 139, 255, 0.6);
  color: #fff;
}
.ibt-btn--apply {
  background: #5f8bff;
  border-color: #5f8bff;
  color: #fff;
  font-weight: 600;
}
.ibt-btn--apply:hover { background: #4a73e8; }
.ibt-btn--delete { color: #f87171; }
.ibt-btn--delete:hover { background: rgba(248, 113, 113, 0.18); border-color: #f87171; }

.ibt-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 2px;
}

/* Background cover that hides original canvas text during inline editing */
.editor-text-cover {
  position: absolute;
  pointer-events: none;
  /* z-index intentionally unset — DOM insertion order (firstChild) keeps it
     below all .editor-text-block siblings without needing explicit stacking */
}

/* Block states for inline editing.
   Three separate selectors needed:
   - base class (overrides --edited outline)
   - :hover (specificity (0,1,1) > (0,1,0) so must be listed explicitly)
   - :focus (browser UA applies a focus ring to contenteditable elements) */
.editor-text-block--editing,
.editor-text-block--editing:hover,
.editor-text-block--editing:focus {
  outline: none !important;
  background: transparent !important;
  cursor: text;
}

/* Drag handle that appears above the block during editing */
.editor-text-block__drag-handle {
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 16px;
  background: rgba(95, 139, 255, 0.12);
  border: 1px solid rgba(95, 139, 255, 0.35);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: all;
  user-select: none;
  z-index: 10;
}
.editor-text-block__drag-handle:active { cursor: grabbing; }
/* Three-dot grip icon via repeating dots */
.editor-text-block__drag-handle::before {
  content: '· · · · ·';
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(95, 139, 255, 0.6);
}
.editor-text-block--deleted {
  opacity: 0.35;
  text-decoration: line-through;
  pointer-events: none !important;
  background: rgba(248, 113, 113, 0.08) !important;
  outline: 1px dashed rgba(248, 113, 113, 0.5) !important;
  cursor: default !important;
}

/* ── Preview / result modal ──────────────────────────────────────── */

.editor-preview-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
}

.editor-preview-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6);
}

.editor-preview-modal__box {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border-radius: 8px;
  width: 90vw; height: 90vh; overflow: hidden; z-index: 1;
}

.editor-preview-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #1e1e2e; color: #fff;
  font-weight: 600; flex-shrink: 0;
}

.editor-preview-modal__download {
  padding: 6px 14px; background: #5865f2; color: #fff;
  border: none; border-radius: 5px; cursor: pointer; font-size: 0.85rem; font-weight: 600;
}
.editor-preview-modal__download:hover { background: #4752c4; }

.editor-preview-modal__close {
  padding: 6px 12px; background: rgba(255,255,255,0.12); color: #fff;
  border: none; border-radius: 5px; cursor: pointer; font-size: 0.9rem;
}
.editor-preview-modal__close:hover { background: rgba(255,255,255,0.22); }

.editor-preview-modal__frame { flex: 1; width: 100%; border: none; }

.editor-preview-modal__nopdf {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem; padding: 2rem; text-align: center;
  color: #888;
}
.editor-preview-modal__nopdf p { margin: 0; font-size: 0.95rem; }
.editor-preview-modal__open-btn {
  display: inline-block; padding: 10px 22px;
  background: #5865f2; color: #fff; border-radius: 7px;
  text-decoration: none; font-weight: 600; font-size: 0.95rem;
}
.editor-preview-modal__open-btn:hover { background: #4752c4; }

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

/* ── PDF Editor — Mobile Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Topbar: tighter, scrollable */
  .pdf-editor-topbar {
    padding: 0 0.4rem;
    height: 46px;
    gap: 0;
  }

  .pdf-editor-brand {
    font-size: 0.82rem;
    margin-right: 0.4rem;
  }

  /* Toolbar: scrollable strip, hide text labels — icons only */
  .pdf-editor-toolbar {
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 1;
    gap: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .pdf-editor-toolbar::-webkit-scrollbar { display: none; }

  /* Hide button text, keep icons */
  .pdf-editor-btn {
    padding: 0.4rem 0.55rem;
    gap: 0;
    font-size: 0;        /* hides text */
    min-width: 36px;
    justify-content: center;
  }
  .pdf-editor-btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
  }

  /* Apply button: keep short text */
  .pdf-editor-btn--apply {
    font-size: 0.72rem;
    padding: 0.35rem 0.55rem;
    white-space: nowrap;
    min-width: unset;
  }

  /* Separator dots */
  .pdf-editor-btn-sep {
    margin: 0 2px;
  }

  /* Sub-toolbar: scrollable horizontally */
  .pdf-editor-toolbar-sub {
    top: 46px;
    padding: 0.4rem 0.5rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .pdf-editor-toolbar-sub::-webkit-scrollbar { display: none; }

  /* Body: hide sidebar by default, show canvas full width */
  .pdf-editor-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    width: 150px;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  .pdf-editor-sidebar.mobile-open {
    display: flex;
  }

  /* Canvas: less padding, full width */
  .pdf-editor-canvas-area {
    padding: 0.75rem 0.25rem;
  }

  /* Upload zone: compact */
  .pdf-editor-upload-zone {
    gap: 0.9rem;
    padding: 0 0.75rem;
  }
  .pdf-editor-upload-zone h2 {
    font-size: 1.1rem;
  }
  .pdf-editor-upload-zone p {
    font-size: 0.82rem;
    text-align: center;
  }

  /* Page bar: compact */
  .pdf-editor-page-bar {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    gap: 0.3rem;
    flex-wrap: wrap;
  }
  .pdf-editor-page-bar button {
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
  }

  /* Signature dialog: full width on mobile */
  .pdf-editor-sign-dialog {
    width: 95vw;
    padding: 1rem;
  }
  .pdf-editor-sign-canvas {
    height: 140px;
  }

  /* Inline toolbar: scrollable */
  .editor-inline-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .editor-inline-toolbar::-webkit-scrollbar { display: none; }

  /* Sidebar toggle button — shown only on mobile */
  .pdf-editor-sidebar-toggle {
    display: flex !important;
  }

  /* Sidebar overlay backdrop — JS controls display, not CSS */
}

/* Sidebar toggle button — hidden on desktop */
.pdf-editor-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.07);
  border: none;
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.35rem 0.45rem;
  margin-right: 0.3rem;
  flex-shrink: 0;
}

/* Tap-outside backdrop to close sidebar */
.pdf-editor-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0,0,0,0.45);
}

/* ── PDF Editor Mobile — Apply button fix ───────────────────── */
@media (max-width: 768px) {
  /* Remove the auto-margin that pushes Apply off screen */
  #btn-undo {
    margin-left: 0 !important;
  }

  /* Float Apply changes as a fixed button above the page bar */
  .pdf-editor-btn--apply {
    position: fixed !important;
    bottom: 56px;
    right: 12px;
    z-index: 90;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    font-size: 0.78rem !important;
    padding: 0.5rem 0.9rem !important;
    border-radius: 20px !important;
    margin-left: 0 !important;
    min-width: unset !important;
  }
}

/* ── PDF Editor Mobile — Icon labels + Upload button fix ────── */
@media (max-width: 768px) {

  /* Show short labels below icons — stack vertically */
  .pdf-editor-topbar {
    height: 54px;
  }

  .pdf-editor-btn {
    flex-direction: column;
    font-size: 8px !important;
    gap: 2px;
    padding: 0.25rem 0.4rem !important;
    min-width: 40px;
    height: 46px;
    line-height: 1;
  }

  .pdf-editor-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }

  /* Apply changes stays pill-shaped with text */
  .pdf-editor-btn--apply {
    flex-direction: row !important;
    height: auto !important;
    font-size: 0.78rem !important;
  }

  /* Sub-toolbar adjust for taller topbar */
  .pdf-editor-toolbar-sub {
    top: 54px;
  }

  /* Upload button — white text, vibrant gradient */
  .pdf-editor-upload-zone .cta.primary {
    background: linear-gradient(135deg, #5f8bff, #3a6bef) !important;
    color: #ffffff !important;
    font-size: 1rem;
    padding: 14px 28px;
    box-shadow: 0 8px 24px rgba(63, 107, 239, 0.45);
  }
}

/* ── PDF Editor Mobile — single page view ───────────────────── */
@media (max-width: 768px) {
  /* Hide all pages by default; JS adds .mobile-current to show one */
  .pdf-editor-canvas-area .pdf-editor-page-wrap {
    display: none;
  }
  .pdf-editor-canvas-area .pdf-editor-page-wrap.mobile-current {
    display: block;
  }

  /* Remove gap between pages (only one shows at a time) */
  .pdf-editor-canvas-area {
    gap: 0;
    padding-top: 0.5rem;
  }

  /* Make page fill available width */
  .pdf-editor-page-wrap {
    max-width: 100%;
  }
}

/* ── PDF Editor Mobile — sub-toolbar in flow (not overlapping PDF) ── */
@media (max-width: 768px) {
  /* Take sub-toolbar out of absolute positioning so it pushes canvas down */
  .pdf-editor-toolbar-sub {
    position: relative !important;
    top: auto !important;
    border-top: 1px solid rgba(255,255,255,0.06);
    min-height: 0;
    flex-shrink: 0;
  }

  /* pdf-editor-page is a flex column — sub-toolbar slots between topbar and body */
  .pdf-editor-page {
    flex-direction: column;
  }

  /* Canvas area shrinks naturally when sub-toolbar is visible */
  .pdf-editor-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
}

/* ── Annotation resize handles + delete button ───────────────── */
.pdf-editor-element--annotate {
  overflow: visible !important;
}

.annot-resize-handle {
  position: absolute;
  top: -4px;
  width: 10px;
  height: calc(100% + 8px);
  background: rgba(95,139,255,0.7);
  border-radius: 3px;
  cursor: ew-resize;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}
.pdf-editor-element--annotate.selected .annot-resize-handle {
  opacity: 1;
}
.annot-resize-handle--left  { left: -5px; }
.annot-resize-handle--right { right: -5px; }

.annot-delete-btn {
  position: absolute;
  top: -22px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e53e3e;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  line-height: 1;
  padding: 0;
}
.pdf-editor-element--annotate.selected .annot-delete-btn {
  display: flex;
}

/* Selection outline for annotations */
.pdf-editor-element--annotate.selected {
  outline: 2px solid rgba(95,139,255,0.8);
  outline-offset: 2px;
}