/* ==========================================================
   PDFMasala Modern Theme & Design System
   ========================================================== */
:root {
  --header-height: 64px;
  --subbar-height: 0px;

  --bg-primary: #0a0f1d;
  --bg-secondary: #111827;
  --bg-card: #1f2937;
  --bg-toolbar: rgba(17, 24, 39, 0.88);
  --border-color: #374151;
  --border-focus: #6366f1;
  
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  
  --accent-primary: #6366f1;
  --accent-hover: #4f46e5;
  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
  --accent-glow: rgba(99, 102, 241, 0.35);
  
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --success: #10b981;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 25px rgba(99, 102, 241, 0.25);
  
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', sans-serif;
}

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

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================
   Modernized Scrollbars (Universal & Tool Sections)
   ========================================================== */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.45) rgba(15, 23, 42, 0.35);
}

/* Chrome, Edge, Safari, Opera */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.35);
  border-radius: 9999px;
  margin: 2px 0;
}

::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.4);
  border-radius: 9999px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.75);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

::-webkit-scrollbar-thumb:active {
  background: #6366f1;
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.7);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ==========================================================
   Header & Navigation
   ========================================================== */
.app-header {
  height: 64px;
  background-color: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: none;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.logo-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  /* Saffron to magenta: the brand's "masala" colours, glowing like a neon sign */
  background: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.55);
  transition: transform 0.2s ease;
}

.logo:hover .logo-icon {
  transform: rotate(-6deg) scale(1.05);
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.logo-accent {
  background: linear-gradient(90deg, #fbbf24 0%, #f472b6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(244, 114, 182, 0.45));
}

.badge-free {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: none;
  letter-spacing: 0.02em;
}

.doc-meta {
  display: none !important;
}

.doc-title {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-pages-badge {
  font-size: 0.72rem;
  padding: 2px 7px;
  background: #252e3e;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  border: none;
}

/* Generous Visual Gap after Logo & Page Name */
.header-gap-spacer {
  flex: 0 0 32px;
  min-width: 20px;
}

/* Top Navigation Bar: Borderless, All Caps */
.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.nav-item-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none !important;
  outline: none;
  color: var(--text-secondary);
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  user-select: none;
}

.nav-item-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

.nav-item-btn.active {
  background: var(--accent-gradient);
  color: #ffffff;
  box-shadow: 0 2px 10px var(--accent-glow);
  font-weight: 700;
}

.nav-item-btn svg {
  flex-shrink: 0;
}

/* Nav Dropdown Components */
.nav-dropdown {
  position: relative;
  display: inline-flex;
}

.dropdown-chevron {
  margin-left: 2px;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.75;
}

.nav-dropdown:hover .dropdown-chevron,
.nav-dropdown.open .dropdown-chevron {
  opacity: 1;
}

.nav-dropdown.open .dropdown-chevron {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 1000;
  background: rgba(15, 20, 34, 0.96);
  background-image: linear-gradient(165deg, rgba(26, 34, 56, 0.95) 0%, rgba(12, 16, 28, 0.98) 100%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-radius: 16px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 64px -8px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 28px -4px rgba(99, 102, 241, 0.16);
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.dropdown-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), rgba(236, 72, 153, 0.4), transparent);
  border-radius: 999px;
  pointer-events: none;
}

.nav-dropdown.open .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Convert menu: two sections side by side, "Convert to PDF" and "Convert from PDF" */
.dropdown-menu-convert {
  width: 600px;
  /* Opens to the left of its button's right edge, so it never runs off the window */
  right: 0;
  left: auto;
  padding: 14px;
}

.convert-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 2px;
}


/* All Tools menu: its four sections side by side, one column each */
.dropdown-menu-alltools {
  width: 960px;
  max-width: calc(100vw - 32px);
  right: 0;
  left: auto;
  padding: 14px;
}

.alltools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 2px;
}

.alltools-category {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.category-header {
  font-size: 0.69rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cat-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.category-header.cat-rose {
  color: #fb7185;
  background: rgba(244, 63, 94, 0.07);
}
.category-header.cat-rose .cat-dot {
  background: #f43f5e;
  box-shadow: 0 0 10px #f43f5e, 0 0 4px #fb7185;
}

.category-header.cat-emerald {
  color: #34d399;
  background: rgba(16, 185, 129, 0.07);
}
.category-header.cat-emerald .cat-dot {
  background: #10b981;
  box-shadow: 0 0 10px #10b981, 0 0 4px #34d399;
}

.category-header.cat-sky {
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.07);
}
.category-header.cat-sky .cat-dot {
  background: #0ea5e9;
  box-shadow: 0 0 10px #0ea5e9, 0 0 4px #38bdf8;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid transparent !important;
  background: transparent;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  outline: none;
  user-select: none;
  position: relative;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08) !important;
  transform: translateX(3px);
}

.dropdown-item.active {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.35) !important;
}

/* Color-Coded Icon Medallions */
.dropdown-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.dropdown-item-icon svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

/* 1. Emerald - Page Manager */
.dropdown-item-icon.icon-emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.32);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.18);
}
.dropdown-item:hover .icon-emerald {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.5);
  transform: scale(1.1) rotate(-3deg);
}

/* 2. Amber / Gold - Merge PDF */
.dropdown-item-icon.icon-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.32);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.18);
}
.dropdown-item:hover .icon-amber {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.5);
  transform: scale(1.1) rotate(-3deg);
}

/* 3. Purple - Split PDF */
.dropdown-item-icon.icon-purple {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.32);
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.18);
}
.dropdown-item:hover .icon-purple {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(168, 85, 247, 0.5);
  transform: scale(1.1) rotate(-3deg);
}

/* 4. Sky Cyan - Compress & B&W */
.dropdown-item-icon.icon-sky {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.32);
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.18);
}
.dropdown-item:hover .icon-sky {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(14, 165, 233, 0.5);
  transform: scale(1.1) rotate(-3deg);
}

/* 5. Rose - Editor & Sign */
.dropdown-item-icon.icon-rose {
  background: rgba(244, 63, 94, 0.15);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.32);
  box-shadow: 0 2px 10px rgba(244, 63, 94, 0.18);
}
.dropdown-item:hover .icon-rose {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(244, 63, 94, 0.5);
  transform: scale(1.1) rotate(-3deg);
}

/* 6. Red - Watermark & Numbers */
.dropdown-item-icon.icon-red {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.32);
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.18);
}
.dropdown-item:hover .icon-red {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.5);
  transform: scale(1.1) rotate(-3deg);
}

/* 7. Indigo - PDF to Image */
.dropdown-item-icon.icon-indigo {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.32);
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.18);
}
.dropdown-item:hover .icon-indigo {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.5);
  transform: scale(1.1) rotate(-3deg);
}

/* 8. Cyan - Image to PDF */
.dropdown-item-icon.icon-cyan {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.32);
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.18);
}
.dropdown-item:hover .icon-cyan {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(6, 182, 212, 0.5);
  transform: scale(1.1) rotate(-3deg);
}

/* 9. Violet - Extract Text */
.dropdown-item-icon.icon-violet {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.32);
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.18);
}
.dropdown-item:hover .icon-violet {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(139, 92, 246, 0.5);
  transform: scale(1.1) rotate(-3deg);
}

.dropdown-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-item-title {
  font-size: 0.79rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #f1f5f9;
  transition: color 0.15s ease;
}

.dropdown-item:hover .dropdown-item-title {
  color: #ffffff;
}

.dropdown-item-desc {
  font-size: 0.71rem;
  color: #94a3b8;
  line-height: 1.32;
  transition: color 0.15s ease;
}

.dropdown-item:hover .dropdown-item-desc {
  color: #cbd5e1;
}

.dropdown-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#btnAllToolsNav {
  background: rgba(99, 102, 241, 0.12) !important;
  border: 1px solid rgba(99, 102, 241, 0.32) !important;
  color: #c7d2fe !important;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#btnAllToolsNav:hover {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
  transform: translateY(-1px);
}

/* Remove borders on buttons in top header */
.app-header .btn {
  border: none !important;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Secondary Subbar hidden as all tools are unified in top header */
.tools-subbar {
  display: none !important;
}

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

/* ==========================================================
   Buttons
   ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  outline: none;
  font-family: inherit;
}

.btn-primary {
  background: var(--accent-gradient);
  color: #ffffff;
  box-shadow: 0 2px 10px var(--accent-glow);
}

.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--accent-glow);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-secondary:hover {
  background: #374151;
  border-color: #4b5563;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.btn-ghost.active {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 0.78rem;
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.icon-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================
   Hero & Upload Section
   ========================================================== */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.upload-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: radial-gradient(circle at 50% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
}

.upload-hero {
  max-width: 720px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.28);
  font-size: 0.84rem;
  color: #a5b4fc;
  margin-bottom: 20px;
}

/* ==========================================================
   Studio Landing & Tools Workspace
   ========================================================== */
.upload-section {
  padding: 32px 0 60px;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 8%, rgba(99, 102, 241, 0.09) 0%, rgba(10, 15, 29, 0) 70%);
}

.studio-container {
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Active Document In-Memory Bar */
.active-doc-banner {
  width: 100%;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.18);
  animation: fadeIn 0.25s ease;
}

.active-doc-left {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.active-doc-title {
  font-size: 0.95rem;
  color: #fff;
  display: block;
}

.active-doc-meta {
  font-size: 0.8rem;
  color: #a5b4fc;
}

.active-doc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* Studio Hero & Universal Drop Hub */
.studio-hero-deck {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 52px;
}

.hero-header {
  margin-bottom: 28px;
}

.hero-tech-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.28);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a5b4fc;
  margin-bottom: 18px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 2.85rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.6;
  /* Wide enough for the subtitle to sit on two lines, split evenly between them */
  max-width: 760px;
  text-wrap: balance;
  margin: 0 auto;
}

/* Universal Studio Dropzone */
.studio-dropzone {
  width: 100%;
  border: 2px dashed rgba(99, 102, 241, 0.45);
  border-radius: var(--radius-lg);
  background: rgba(17, 24, 39, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 38px 28px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.studio-dropzone:hover, .studio-dropzone.dragover {
  border-color: #818cf8;
  background: rgba(99, 102, 241, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(99, 102, 241, 0.35);
}

.file-input-hidden {
  display: none;
}

.drop-icon-wrapper {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: var(--radius-md);
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease;
}

.studio-dropzone:hover .drop-icon-wrapper {
  transform: scale(1.08) translateY(-2px);
  background: var(--accent-gradient);
  color: #fff;
}

.drop-main-text {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.browse-link {
  color: #818cf8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.drop-sub-text {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: 22px;
}

.drop-actions-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.drop-btn {
  padding: 10px 22px;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Studio Tools Matrix Section */
.studio-matrix-section {
  width: 100%;
  margin-bottom: 56px;
}

.matrix-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.matrix-heading {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 4px;
}

.matrix-subheading {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.matrix-filter-tabs {
  background: rgba(31, 41, 55, 0.6);
  border-radius: var(--radius-full);
  padding: 4px;
  display: inline-flex;
  gap: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.matrix-filter-btn {
  border: none;
  background: transparent;
  padding: 7px 16px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.matrix-filter-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.07);
}

.matrix-filter-btn.active {
  color: #ffffff;
  background: var(--accent-gradient);
  box-shadow: 0 2px 10px var(--accent-glow);
}

/* Studio Cards Grid - Modern Multi-Column Horizontal Deck */
.studio-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  width: 100%;
}

.studio-card {
  background: rgba(22, 30, 49, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 18px 16px;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  text-align: left;
}

.studio-card:hover {
  transform: translateY(-5px);
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.5), 0 0 24px rgba(99, 102, 241, 0.2);
  background: rgba(26, 36, 58, 0.85);
}

.studio-card.card-dragover {
  border-color: #34d399 !important;
  background: rgba(16, 185, 129, 0.15) !important;
  transform: scale(1.02) !important;
  box-shadow: 0 0 32px rgba(16, 185, 129, 0.35) !important;
}

.studio-card.hidden-by-filter {
  display: none !important;
}

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

.card-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.studio-card:hover .card-icon-box {
  transform: rotate(-6deg) scale(1.08);
}

.card-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-full);
}

.badge-emerald { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.badge-amber { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.badge-purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.badge-sky { background: rgba(14, 165, 233, 0.15); color: #38bdf8; }
.badge-rose { background: rgba(236, 72, 153, 0.15); color: #f472b6; }
.badge-red { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.badge-indigo { background: rgba(99, 102, 241, 0.15); color: #818cf8; }

.card-arrow-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.studio-card:hover .card-arrow-icon {
  background: var(--accent-gradient);
  color: #fff;
  transform: translateX(3px);
}

.card-body {
  margin-bottom: 14px;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  margin-bottom: 6px;
}

.card-desc {
  font-size: 0.81rem;
  color: var(--text-secondary);
  line-height: 1.45;
  min-height: 48px;
}

.card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.chip {
  font-size: 0.69rem;
  font-weight: 500;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Compact tile layout (six to a row). The tile itself is the grid:
     icon  (scene) ... [BADGE]
     TOOL NAME
     short description
     footer                                                                                   */
.studio-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "icon  scene badge"
    "title title title"
    "desc  desc  desc"
    "foot  foot  foot";
  column-gap: 8px;
  min-height: 0;
  padding: 16px 16px 14px;
}

.studio-card .card-header-row,
.studio-card .card-body {
  display: contents;
}

.studio-card .card-icon-box {
  grid-area: icon;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.studio-card .card-icon-box svg {
  width: 18px;
  height: 18px;
}

/* Icon animation on tile hover (the tile's own lift and glow are untouched):
   the icon box gives a soft squash-and-stretch bounce, a streak of light sweeps across it, and
   it then floats gently up and down, glowing in its own colour, for as long as the mouse stays. */
.studio-card .card-icon-box {
  position: relative;
  overflow: hidden;
}

.studio-card .card-icon-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
  transform: translateX(-130%);
  pointer-events: none;
}

.studio-card:hover .card-icon-box {
  animation:
    tileIconBounce 0.6s ease-out both,
    tileIconFloat 1.6s ease-in-out 0.6s infinite;
  box-shadow: 0 0 18px -2px currentColor;
}

.studio-card:hover .card-icon-box::after {
  animation: tileIconShine 0.7s ease-out 0.2s both;
}

@keyframes tileIconBounce {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.26, 0.86); }
  50% { transform: scale(0.92, 1.16); }
  72% { transform: scale(1.14, 1.04); }
  100% { transform: scale(1.1, 1.1); }
}

@keyframes tileIconFloat {
  0%, 100% { transform: translateY(0) scale(1.1); }
  50% { transform: translateY(-4px) scale(1.1); }
}

@keyframes tileIconShine {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}

/* Each tool's icon acts out what the tool does while its tile is hovered:
   Split pulls a page apart, Merge slides two pages into one, Organize shuffles its squares,
   Compress squeezes, the editor's pencil writes, and so on. */
.studio-card .card-icon-box svg * {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes tileShiftX {
  0%, 100% { transform: translateX(0); }
  40%, 70% { transform: translateX(var(--shift)); }
}

/* Split: the two halves of the page move apart */
.studio-card[data-mode="split"]:hover .card-icon-box rect:nth-of-type(1) { --shift: -2.5px; animation: tileShiftX 1.4s ease-in-out infinite; }
.studio-card[data-mode="split"]:hover .card-icon-box rect:nth-of-type(2) { --shift: 2.5px; animation: tileShiftX 1.4s ease-in-out infinite; }

/* Merge: the two pages slide together into one */
.studio-card[data-mode="merge"]:hover .card-icon-box rect:nth-of-type(1) { --shift: 6px; animation: tileShiftX 1.6s ease-in-out infinite; }
.studio-card[data-mode="merge"]:hover .card-icon-box rect:nth-of-type(2) { --shift: -6px; animation: tileShiftX 1.6s ease-in-out infinite; }

/* Organize: the pages in each row swap places */
.studio-card[data-mode="organize"]:hover .card-icon-box rect:nth-of-type(1),
.studio-card[data-mode="organize"]:hover .card-icon-box rect:nth-of-type(4) { --shift: 11px; animation: tileShiftX 1.8s ease-in-out infinite; }
.studio-card[data-mode="organize"]:hover .card-icon-box rect:nth-of-type(2),
.studio-card[data-mode="organize"]:hover .card-icon-box rect:nth-of-type(3) { --shift: -11px; animation: tileShiftX 1.8s ease-in-out infinite; }

/* Compress: the whole icon squeezes down and springs back */
.studio-card[data-mode="compress"]:hover .card-icon-box svg { animation: tileSqueeze 1.2s ease-in-out infinite; }
@keyframes tileSqueeze {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.66); }
}

/* Editor & Sign: the pencil scribbles */
.studio-card[data-mode="edit"]:hover .card-icon-box path:nth-of-type(2) { animation: tileWrite 0.9s ease-in-out infinite; }
@keyframes tileWrite {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-2px, 1px) rotate(-6deg); }
  50% { transform: translate(1px, -1px) rotate(4deg); }
  75% { transform: translate(-1px, 2px) rotate(-4deg); }
}

/* Watermark: the mark is stamped onto the page */
.studio-card[data-mode="watermark"]:hover .card-icon-box svg { animation: tileStamp 1.4s ease-out infinite; }
@keyframes tileStamp {
  0% { transform: scale(1.6); opacity: 0; }
  35% { transform: scale(0.88); opacity: 1; }
  50%, 100% { transform: scale(1); opacity: 1; }
}

/* Image to PDF: the "add" sign pulses on the page */
.studio-card[data-mode="img2pdf"]:hover .card-icon-box line { animation: tilePulse 0.9s ease-in-out infinite; }
/* Document Props: the "i" pulses inside its circle */
.studio-card[data-mode="metadata"]:hover .card-icon-box line { animation: tilePulse 0.9s ease-in-out infinite; }
@keyframes tilePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}

/* HTML to PDF: the code brackets open and close */
.studio-card[data-mode="html2pdf"]:hover .card-icon-box polyline:nth-of-type(1) { --shift: 2.5px; animation: tileShiftX 1s ease-in-out infinite; }
.studio-card[data-mode="html2pdf"]:hover .card-icon-box polyline:nth-of-type(2) { --shift: -2.5px; animation: tileShiftX 1s ease-in-out infinite; }

/* PDF to Image: the sun rises in the picture */
.studio-card[data-mode="pdf2img"]:hover .card-icon-box circle { animation: tileSunrise 1.6s ease-in-out infinite; }
@keyframes tileSunrise {
  0%, 100% { transform: translateY(3px) scale(0.8); }
  50% { transform: translateY(-1px) scale(1.3); }
}

/* Extract Text: the lines of text are written out one after the other */
.studio-card[data-mode="extract"]:hover .card-icon-box line { stroke-dasharray: 8; animation: tileTextLine 1.6s ease-out infinite; }
.studio-card[data-mode="extract"]:hover .card-icon-box line:nth-of-type(2) { animation-delay: 0.35s; }
@keyframes tileTextLine {
  0% { stroke-dashoffset: 8; }
  45%, 100% { stroke-dashoffset: 0; }
}

/* Tool scene: beside each tile's icon, in the space before its badge, a small line drawing in the
   tool's own colour acts out what the tool does while the tile is hovered (or focused with the
   keyboard). The drawings are put in by app.js (TILE_SCENES); the animation classes are shared. */
.studio-card .card-glow-overlay {
  grid-area: scene;
  position: relative;
  align-self: start;
  height: 36px; /* the icon's height: the drawing is centred on the icon */
  min-width: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* It slides out from the icon as it appears */
.studio-card:is(:hover, :focus-visible) .card-glow-overlay {
  opacity: 1;
  transform: none;
}

/* Sized from the part of the canvas the scene uses (--w by --h, set by app.js): about one pixel
   per unit, and smaller where the space between the icon and the badge is narrower than that */
.card-scene {
  position: absolute;
  left: 2px;
  top: 50%;
  width: min(100%, calc(var(--w) * 1.05px));
  height: calc(var(--h) * 1.05px);
  transform: translateY(-50%);
  overflow: visible;
  opacity: 0.9;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-scene text {
  fill: currentColor;
  stroke: none;
  font-family: var(--font-display);
  font-weight: 700;
  text-anchor: middle;
}

.card-scene .sc-thin {
  stroke-width: 1.4;
}

.card-scene .sc-pop,
.card-scene .sc-squeeze {
  transform-box: fill-box;
  transform-origin: center;
}

/* Drawn with pathLength="1", so one dash is the whole line whatever its real length */
.card-scene .sc-draw {
  stroke-dasharray: 1 2;
}

.studio-card:is(:hover, :focus-visible) .card-scene .sc-move { animation: sceneMove var(--dur, 3s) ease-in-out var(--delay, 0s) infinite both; }
.studio-card:is(:hover, :focus-visible) .card-scene .sc-arc { animation: sceneArc var(--dur, 3s) ease-in-out var(--delay, 0s) infinite both; }
.studio-card:is(:hover, :focus-visible) .card-scene .sc-squeeze { animation: sceneSqueeze var(--dur, 3s) ease-in-out var(--delay, 0s) infinite both; }
.studio-card:is(:hover, :focus-visible) .card-scene .sc-pop { animation: scenePop var(--dur, 3s) ease-out var(--delay, 0s) infinite both; }
.studio-card:is(:hover, :focus-visible) .card-scene .sc-fade { animation: sceneFade var(--dur, 3s) ease-out var(--delay, 0s) infinite both; }
.studio-card:is(:hover, :focus-visible) .card-scene .sc-hide { animation: sceneHide var(--dur, 3s) ease-in-out var(--delay, 0s) infinite both; }
.studio-card:is(:hover, :focus-visible) .card-scene .sc-draw { animation: sceneDraw var(--dur, 3s) ease-out var(--delay, 0s) infinite both; }

/* Moving parts go out, hold, and come back before the loop ends */
@keyframes sceneMove {
  0%, 8% { transform: translate(0, 0); }
  36%, 66% { transform: translate(var(--dx, 0), var(--dy, 0)); }
  88%, 100% { transform: translate(0, 0); }
}

/* Like sceneMove, but swinging out over (or under) on the way there and the other side coming back */
@keyframes sceneArc {
  0%, 8% { transform: translate(0, 0); }
  22% { transform: translate(calc(var(--dx) / 2), var(--arc)); }
  36%, 66% { transform: translate(var(--dx), 0); }
  78% { transform: translate(calc(var(--dx) / 2), calc(var(--arc) * -1)); }
  90%, 100% { transform: translate(0, 0); }
}

@keyframes sceneSqueeze {
  0%, 10% { transform: scale(1); }
  38%, 66% { transform: scale(var(--sx, 0.7), var(--sy, 0.7)); }
  88%, 100% { transform: scale(1); }
}

/* Parts that appear: in at the start of their turn, gone again before the loop ends */
@keyframes scenePop {
  0% { transform: scale(0.5); opacity: 0; }
  9% { transform: scale(1.14); opacity: 1; }
  15%, 66% { transform: scale(1); opacity: 1; }
  78%, 100% { transform: scale(0.5); opacity: 0; }
}

@keyframes sceneFade {
  0% { opacity: 0; }
  10%, 66% { opacity: 1; }
  78%, 100% { opacity: 0; }
}

@keyframes sceneHide {
  0%, 8% { opacity: 1; }
  30%, 70% { opacity: 0; }
  88%, 100% { opacity: 1; }
}

@keyframes sceneDraw {
  0% { stroke-dashoffset: 1.05; opacity: 1; }
  26%, 66% { stroke-dashoffset: 0; opacity: 1; }
  78%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Colourful aura on tile hover: soft glows in four colours sit around the tile and slowly
   circle it, on top of the tile's usual lift */
.studio-card:hover {
  border-color: rgba(165, 180, 252, 0.55);
  animation: tileAura 3.2s linear infinite;
}

@keyframes tileAura {
  0%, 100% {
    box-shadow:
      0 14px 30px -10px rgba(0, 0, 0, 0.55),
      -12px -8px 30px -10px rgba(99, 102, 241, 0.7),
      12px -8px 30px -10px rgba(236, 72, 153, 0.6),
      12px 10px 30px -10px rgba(52, 211, 153, 0.55),
      -12px 10px 30px -10px rgba(251, 191, 36, 0.5);
  }
  25% {
    box-shadow:
      0 14px 30px -10px rgba(0, 0, 0, 0.55),
      -12px -8px 30px -10px rgba(251, 191, 36, 0.5),
      12px -8px 30px -10px rgba(99, 102, 241, 0.7),
      12px 10px 30px -10px rgba(236, 72, 153, 0.6),
      -12px 10px 30px -10px rgba(52, 211, 153, 0.55);
  }
  50% {
    box-shadow:
      0 14px 30px -10px rgba(0, 0, 0, 0.55),
      -12px -8px 30px -10px rgba(52, 211, 153, 0.55),
      12px -8px 30px -10px rgba(251, 191, 36, 0.5),
      12px 10px 30px -10px rgba(99, 102, 241, 0.7),
      -12px 10px 30px -10px rgba(236, 72, 153, 0.6);
  }
  75% {
    box-shadow:
      0 14px 30px -10px rgba(0, 0, 0, 0.55),
      -12px -8px 30px -10px rgba(236, 72, 153, 0.6),
      12px -8px 30px -10px rgba(52, 211, 153, 0.55),
      12px 10px 30px -10px rgba(251, 191, 36, 0.5),
      -12px 10px 30px -10px rgba(99, 102, 241, 0.7);
  }
}

/* Tiles arriving on scroll: each waits off to its side and slightly below (set by app.js),
   then glides to its place when it comes into view */
.studio-card.reveal-pending {
  opacity: 0;
  transform: translate(var(--reveal-x, 0), 36px);
}

.studio-card.reveal-in {
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* People who ask their device for less motion get the simple tilt only, and no arrival motion */
@media (prefers-reduced-motion: reduce) {
  .studio-card:hover,
  .studio-card:hover .card-icon-box,
  .studio-card:hover .card-icon-box::after,
  .studio-card:hover .card-icon-box svg,
  .studio-card:hover .card-icon-box svg *,
  .studio-card .card-scene * {
    animation: none !important;
  }
  .studio-card.reveal-pending {
    opacity: 1;
    transform: none;
  }
}

/* The badge takes the top-right corner, where the arrow used to be */
.studio-card .card-arrow-icon {
  display: none;
}

.studio-card .card-title {
  grid-area: title;
  align-self: center;
  margin-bottom: 0;
  font-size: 1.04rem;
  line-height: 1.2;
}

.studio-card .card-badge {
  grid-area: badge;
  align-self: start;
  font-size: 0.62rem;
  padding: 3px 8px;
  white-space: nowrap;
}

.studio-card .card-desc {
  grid-area: desc;
  min-height: 0;
  margin: 10px 0 14px;
  font-size: 0.78rem;
  line-height: 1.45;
  /* Enough to get the idea: three lines, the rest is cut with an ellipsis */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* The feature chips are left out of the compact tile */
.studio-card .card-chips {
  display: none;
}

.studio-card .card-footer {
  grid-area: foot;
  align-self: end;
  padding-top: 9px;
  gap: 6px;
  white-space: nowrap;
}

.studio-card .card-launch-text {
  font-size: 0.68rem;
}

.studio-card .card-drop-hint {
  font-size: 0.64rem;
}

.card-launch-text {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #818cf8;
  transition: color 0.18s ease;
}

.studio-card:hover .card-launch-text {
  color: #a5b4fc;
}

.card-drop-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Website footer (home page) */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
  color: var(--text-muted);
}

.site-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-footer-brand strong {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text-primary);
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.site-footer-links button,
.site-footer-links a,
.info-inline-link {
  padding: 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
}

.site-footer-links button:hover,
.site-footer-links a:hover,
.info-inline-link:hover {
  color: #a5b4fc;
  text-decoration: underline;
}

.info-inline-link {
  color: #a5b4fc;
}

.site-footer-copy {
  flex-basis: 100%;
  font-size: 0.74rem;
}

/* Footer pages shown in the info dialog */
.info-page-body {
  max-height: 70vh;
  overflow-y: auto;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.info-page h4 {
  margin: 16px 0 4px;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.info-page p {
  margin: 0 0 10px;
}

.info-page ul {
  margin: 0 0 10px;
  padding-left: 20px;
}

.info-page li {
  margin-bottom: 4px;
}

.info-page a {
  color: #a5b4fc;
}

.info-updated {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.info-page details {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}

.info-page summary {
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}

.info-page details p {
  margin: 8px 0 0;
}

/* Privacy & Local Engine Visualizer */
.studio-architecture-banner {
  border-radius: 20px;
  padding: 36px 32px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.arch-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #818cf8;
  margin-bottom: 8px;
}

.arch-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 28px;
}

.arch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}

.arch-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255, 255, 255, 0.03);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.arch-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.arch-info strong {
  display: block;
  font-size: 0.92rem;
  color: #fff;
  margin-bottom: 4px;
}

.arch-info span {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
  display: block;
}

/* ==========================================================
   Editor Workspace Layout
   ========================================================== */
html:has(#workspaceSection:not(.hidden)),
body:has(#workspaceSection:not(.hidden)) {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body:has(#workspaceSection:not(.hidden)) .app-main {
  height: calc(100vh - var(--header-height)) !important;
  max-height: calc(100vh - var(--header-height)) !important;
  overflow: hidden !important;
  min-height: 0 !important;
  flex: 1;
}

body:has(#workspaceSection:not(.hidden)) .workspace-section {
  height: calc(100vh - var(--header-height)) !important;
  max-height: calc(100vh - var(--header-height)) !important;
  overflow: hidden !important;
  min-height: 0 !important;
  flex: 1;
}

.workspace-section {
  display: flex;
  flex: 1;
  height: calc(100vh - var(--header-height) - var(--subbar-height));
  overflow: hidden;
  position: relative;
}

.sidebar-thumbnails {
  width: 220px;
  background-color: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.sidebar-thumbnails.collapsed {
  width: 0;
  transform: translateX(-100%);
  overflow: hidden;
  border-right: none;
}

.sidebar-header {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.thumbnails-list {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.thumb-card {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 8px 6px 10px 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.thumb-card:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}

.thumb-card.active {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.25);
}

.thumb-canvas-wrapper {
  width: 100%;
  background: transparent !important;
  border-radius: 4px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb-canvas {
  background: #ffffff;
  max-width: 100%;
  max-height: 145px;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.thumb-card:hover:not(.active) .thumb-canvas {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.55), 0 6px 18px rgba(0, 0, 0, 0.5);
  border-color: rgba(99, 102, 241, 0.55);
}

.thumb-card.active .thumb-canvas {
  box-shadow: 0 0 0 2.5px #6366f1, 0 8px 24px rgba(99, 102, 241, 0.45);
  border-color: #6366f1;
}

.thumb-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 0 2px;
  background: transparent !important;
}

.thumb-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 0.2px;
  transition: all 0.2s ease;
}

.thumb-card:hover .thumb-num {
  color: #f3f4f6;
  border-color: rgba(99, 102, 241, 0.4);
}

.thumb-card.active .thumb-num {
  color: #ffffff;
  background: #6366f1;
  border-color: #6366f1;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

/* ==========================================================
   Editor Area & Floating Toolbar
   ========================================================== */
.editor-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #0b1120;
  position: relative;
  overflow: hidden;
}

.editor-toolbar {
  position: absolute;
  top: 14px;
  left: 20px;
  right: 20px;
  z-index: 50;
  background: rgba(15, 23, 42, 0.92);
  background-image: linear-gradient(165deg, rgba(26, 34, 56, 0.94) 0%, rgba(12, 16, 28, 0.98) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6), 0 0 15px rgba(99, 102, 241, 0.12);
  pointer-events: auto;
}

.editor-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-start;
  min-width: 0;
}

.editor-toolbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
}

/* Left and right take equal shares so the centre tools sit in the true middle */
.editor-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}

.editor-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 5px 14px;
  background: var(--accent-gradient);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.editor-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.6);
  filter: brightness(1.08);
}

.editor-menu-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.editor-menu-btn:hover {
  background: rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.5);
  color: #ffffff;
  transform: translateY(-1px);
}

.tool-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tool-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tool-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.tool-btn.active {
  color: #ffffff;
  background: var(--accent-primary);
  box-shadow: 0 2px 8px var(--accent-glow);
}

.tool-btn-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tool-btn-icon:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.tool-btn-icon.danger-hover:hover {
  color: #fff;
  background: var(--danger);
}

.tool-btn-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.tool-divider {
  width: 1px;
  height: 24px;
  background-color: var(--border-color);
  margin: 0 4px;
}

/* Tool options bar: floats centred just under the toolbar, in the space kept free above the page */
.tool-properties {
  position: absolute;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 49;
  display: flex;
  align-items: center;
  max-width: calc(100% - 40px);
  padding: 4px 12px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

/* Nothing to show: no tool with settings is active */
.tool-properties:not(:has(.prop-subgroup:not(.hidden))) {
  display: none;
}

.prop-subgroup {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.prop-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Pen / highlighter size: a dot that grows with the slider, and the thickness as a number */
.prop-size-preview {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.prop-size-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc2626;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
}

.prop-size-value {
  min-width: 44px;
  padding: 3px 6px;
  background: #1f2937;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Highlighter colour menu: opens under the colour circle */
.prop-swatches {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #111827;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

.prop-swatch-row {
  display: flex;
  gap: 8px;
}

.prop-swatch {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.prop-swatch:hover {
  transform: scale(1.15);
}

.prop-swatch.active {
  box-shadow: 0 0 0 2px var(--accent-primary);
}

.prop-swatch-more {
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.74rem;
  cursor: pointer;
}

.prop-swatch-more:hover {
  background: rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.5);
}

.prop-toggle {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.9rem;
  cursor: pointer;
}

.prop-toggle:hover {
  background: rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.5);
}

.prop-toggle.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #ffffff;
}

.prop-select {
  background: #1f2937;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-size: 0.78rem;
  cursor: pointer;
}

.prop-color {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.prop-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.prop-color::-webkit-color-swatch {
  border: 2px solid #ffffff;
  border-radius: 50%;
}

.prop-slider {
  width: 60px;
  height: 4px;
  accent-color: var(--accent-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* Viewport & Canvas Layout */
.viewport-wrapper {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
  display: block;
  text-align: center;
  padding: 112px 30px 96px; /* top: room for the toolbar and the tool options bar */
  cursor: default;
  overscroll-behavior: contain;
}

.page-container {
  position: relative;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  display: inline-block;
  margin: 0 auto;
  vertical-align: top;
  flex-shrink: 0;
  box-sizing: content-box;
  text-align: left;
}

/* Page End Indicator (Continuous scroll boundary) */
.page-end-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px auto 16px;
  max-width: 580px;
  width: 90%;
  user-select: none;
}

.page-end-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
}

.page-end-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(17, 24, 39, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 4px 14px;
  letter-spacing: 0.3px;
  box-shadow: var(--shadow-sm);
}

.page-end-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
  cursor: pointer;
  transition: all 0.15s ease;
}

.page-end-next-btn:hover {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
  transform: translateY(-1px);
}

.page-end-next-btn.hidden {
  display: none !important;
}

.pdf-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.annotation-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: crosshair;
  mix-blend-mode: multiply;
}

.dom-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* Draggable & Adjustable Annotations */
.draggable-item {
  position: absolute;
  pointer-events: auto;
  user-select: none;
  cursor: move;
  /* The frame is the only border an item has: invisible until the item is hovered or selected */
  border: 1.5px solid transparent;
  border-radius: 4px;
  padding: 2px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  box-sizing: border-box;
}

.draggable-item:hover {
  border-color: rgba(99, 102, 241, 0.45);
}

.draggable-item.selected {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

.draggable-item .delete-handle {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  background: var(--danger);
  color: white;
  border-radius: 50%;
  border: 2px solid white;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 10;
}

.draggable-item .resize-handle {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  background: #6366f1;
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: none;
  cursor: se-resize;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  z-index: 10;
  transition: transform 0.15s ease;
}

.draggable-item .resize-handle:hover {
  transform: scale(1.25);
  background: #4f46e5;
}

.draggable-item.selected .delete-handle,
.draggable-item:hover .delete-handle {
  display: flex;
}

.draggable-item.selected .resize-handle,
.draggable-item:hover .resize-handle {
  display: block;
}

.text-box-element {
  outline: none;
  background: transparent;
  min-width: 40px;
  min-height: 22px;
  word-break: break-word;
  white-space: pre-wrap;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.25;
  box-sizing: border-box;
}

.signature-stamp-element {
  max-width: none;
  display: block;
  user-select: none;
  pointer-events: none;
  object-fit: contain;
}

.whiteout-box-element {
  background: #ffffff;
  box-sizing: border-box;
}

.nav-arrow-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================
   Right-Side Handy Tools Slider Drawer
   ========================================================== */
/* Docked beside the editor, directly under the top header: no overlay, no shadow */
.editor-drawer {
  width: 320px;
  flex-shrink: 0;
  min-height: 0;
  background-color: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.editor-area {
  min-width: 0;
}

.drawer-select {
  width: 100%;
  padding: 10px 12px;
  background: #1f2937;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  cursor: pointer;
}

.drawer-select:focus {
  outline: none;
  border-color: var(--border-focus);
}

/* Compact panel: small icons beside their labels, tighter rows */
.editor-drawer .drawer-header {
  height: 48px;
  padding: 0 16px;
}

.editor-drawer .drawer-title {
  font-size: 0.85rem;
}

.editor-drawer .drawer-title-group svg {
  width: 15px;
  height: 15px;
}

.editor-drawer .drawer-close-btn {
  width: 26px;
  height: 26px;
}

.editor-drawer .drawer-body {
  padding: 14px 16px 20px;
  gap: 14px;
}

.editor-drawer .drawer-section {
  gap: 6px;
}

.editor-drawer .drawer-grid {
  gap: 8px;
}

.editor-drawer .drawer-grid-btn {
  flex-direction: row;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 11px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.editor-drawer .drawer-grid-btn svg,
.editor-drawer .drawer-tool-btn > svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.editor-drawer .drawer-tool-btn {
  gap: 9px;
  padding: 7px 9px;
}

/* The small icon sits in a column as wide as the file card's icon box (28px), so the text of
   every row in the panel starts at the same position */
.editor-drawer .drawer-tool-btn > svg {
  margin: 0 7px;
}

/* No sideways nudge on hover: the rows keep their edges lined up */
.editor-drawer .drawer-tool-btn:hover {
  transform: none;
}

.drawer-doc-prefix {
  font-weight: 500;
  color: var(--text-muted);
}

.editor-drawer .drawer-tool-label {
  font-size: 0.76rem;
}

.editor-drawer .drawer-tool-desc {
  font-size: 0.66rem;
}

.editor-drawer .drawer-doc-card {
  gap: 9px;
  padding: 7px 9px;
}

.editor-drawer .drawer-doc-icon {
  width: 28px;
  height: 28px;
}

.editor-drawer .drawer-doc-icon svg {
  width: 15px;
  height: 15px;
}

.editor-drawer .drawer-doc-name {
  font-size: 0.78rem;
}

.editor-drawer .drawer-select {
  padding: 7px 9px;
  font-size: 0.78rem;
}

.drawer-switch-tool {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.drawer-hint {
  font-size: 0.66rem;
  color: var(--text-muted);
  padding: 0 4px;
}

.drawer-tool-btn.danger:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.4);
}

/* Undo / Redo read as real buttons */
#btnEditorUndo,
#btnEditorRedo,
#btnDrawerPrint {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
}

#btnEditorUndo:hover,
#btnEditorRedo:hover,
#btnDrawerPrint:hover {
  background: rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.5);
}

#btnEditorUndo:disabled,
#btnEditorRedo:disabled {
  opacity: 0.45;
}

/* "Edit in:" tool switcher at the left of the toolbar */
.edit-in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.edit-in-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.edit-in-trigger {
  white-space: nowrap;
}

.edit-in-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 250px;
  padding: 6px;
  background: #111827;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.edit-in-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}

.edit-in-item svg {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.edit-in-item:hover {
  background: rgba(99, 102, 241, 0.2);
}

.edit-in-tag {
  font-size: 0.72rem;
  color: #a5b4fc;
}

.edit-in-note {
  margin-top: 4px;
  padding: 6px 10px 4px;
  border-top: 1px solid var(--border-color);
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* The tool sections take only the height they need, so Applied Edits starts right under them */
.editor-drawer .drawer-body {
  flex: 0 1 auto;
  min-height: 0;
}

/* Applied Edits: starts just below Document Properties, behind a faint line, and takes the rest
   of the panel; a long list scrolls inside it */
.drawer-footer {
  flex: 1 1 0;
  min-height: 140px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.drawer-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

/* Header button: the X that clears everything and closes the document, with its name beside it */
.editor-drawer .drawer-close-btn.drawer-close-labelled {
  width: auto;
  gap: 5px;
  padding: 0 9px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  /* Red, so it reads as "leave and discard", not as a control for the panel */
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.editor-drawer .drawer-close-btn.drawer-close-labelled:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

/* Tab at the left edge that brings the Pages sidebar back; only there while the sidebar is hidden */
.sidebar-reopen-btn {
  display: none;
  position: absolute;
  top: 76px;
  left: 0;
  z-index: 48;
  align-items: center;
  gap: 4px;
  padding: 8px 9px 8px 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.sidebar-reopen-btn:hover {
  background: rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.5);
}

.sidebar-thumbnails.collapsed + .editor-area .sidebar-reopen-btn {
  display: flex;
}

.drawer-clear-all {
  width: 100%;
  padding: 6px 9px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius-sm);
  color: #fca5a5;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
}

.drawer-clear-all:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.drawer-clear-all:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.drawer-step {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.74rem;
  text-align: left;
  cursor: pointer;
}

.drawer-step:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.35);
}

.drawer-step-name {
  font-weight: 600;
  flex-shrink: 0;
}

.drawer-step-detail {
  flex: 1;
  min-width: 0;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-step-page {
  flex-shrink: 0;
  font-size: 0.66rem;
  color: var(--text-muted);
}

/* Page Actions: a row of icon-only buttons */
/* The buttons share the row's width evenly, so they fill the panel whatever its width */
.drawer-icon-row {
  display: flex;
  gap: 6px;
}

.drawer-icon-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.16s ease;
}

.drawer-icon-btn:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.35);
  color: #fff;
}

.drawer-icon-btn.danger:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.4);
}

.drawer-step-remove {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.drawer-step-remove:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.drawer-steps-empty {
  padding: 2px 4px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Document Properties dialog: read-only details of the open PDF */
.meta-details {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 5px 12px;
  margin: 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
}

.meta-details dt {
  color: var(--text-muted);
}

.meta-details dd {
  margin: 0;
  color: var(--text-primary);
  word-break: break-word;
}

.meta-edit-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Select tool: the box dragged out to select several items */
.select-marquee {
  position: absolute;
  border: 1px solid #6366f1;
  background: rgba(99, 102, 241, 0.12);
  border-radius: 2px;
  z-index: 30;
}

/* Flashes around an edit on the page when it is picked from the Applied Edits list */
.step-locator {
  position: absolute;
  border: 2px solid #f59e0b;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.3);
  z-index: 20;
  animation: stepLocatorPulse 0.6s ease-in-out 3;
}

@keyframes stepLocatorPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* Keep the toolbar on one line when the panel takes its share of the width */
@media (max-width: 1500px) {
  .edit-in-label {
    display: none;
  }
}

@media (max-width: 1350px) {
  .edit-in-trigger span {
    display: none;
  }
}

/* Small screens: the panel floats over the editor instead of squeezing it */
@media (max-width: 900px) {
  .editor-drawer {
    position: absolute;
    top: 68px; /* below the toolbar, so its three-line button can still hide the panel */
    right: 0;
    bottom: 0;
    max-width: 88vw;
    z-index: 60;
  }
}

.drawer-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.02);
}

.drawer-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

.drawer-title {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.drawer-close-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawer-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fff;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0 4px;
}

.drawer-doc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}

.drawer-doc-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(99, 102, 241, 0.18);
  color: #818cf8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.drawer-doc-info {
  flex: 1;
  min-width: 0;
}

.drawer-doc-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-doc-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.drawer-tool-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: all 0.16s ease;
}

.drawer-tool-btn:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.35);
  transform: translateX(-2px);
}

.drawer-tool-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.drawer-tool-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.drawer-tool-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
}

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

.drawer-grid-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.16s ease;
}

.drawer-grid-btn:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.35);
  color: #fff;
  transform: translateY(-1px);
}

.drawer-grid-btn.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ef4444;
}

/* Bottom Navigation (Floating Curving Capsule Bar) */
.bottom-nav {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.92);
  background-image: linear-gradient(135deg, rgba(26, 34, 56, 0.96) 0%, rgba(12, 16, 28, 0.98) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.7), 0 0 20px rgba(99, 102, 241, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  z-index: 60;
  pointer-events: auto;
  user-select: none;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, bottom 0.2s ease;
}

.bottom-nav:hover {
  box-shadow: 0 14px 40px -4px rgba(0, 0, 0, 0.8), 0 0 28px rgba(99, 102, 241, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.nav-controls, .zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bottom-nav .nav-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.bottom-nav .nav-btn:hover:not(:disabled) {
  color: #ffffff;
  background: rgba(99, 102, 241, 0.28);
  border-color: rgba(99, 102, 241, 0.6);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
  transform: translateY(-1.5px) scale(1.06);
}

.bottom-nav .nav-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.96);
  background: rgba(99, 102, 241, 0.4);
}

.bottom-nav .nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

.bottom-nav .page-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  padding: 3px 10px;
}

.bottom-nav .page-input {
  width: 36px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.15s ease;
}

.bottom-nav .page-input:focus {
  outline: none;
  background: rgba(99, 102, 241, 0.2);
  border-color: #818cf8;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}

.bottom-nav .zoom-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.14);
}

.bottom-nav .zoom-text {
  font-size: 0.8rem;
  font-weight: 700;
  color: #f1f5f9;
  min-width: 50px;
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  padding: 4px 10px;
  letter-spacing: 0.3px;
}

/* ==========================================================
   Tool Cards & Shared Layouts
   ========================================================== */
.tool-view-section, .split-section, .pdf2img-section, #pdf2imgSection, .merge-section, .img2pdf-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  width: 100%;
}

.tool-card-container {
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
}

.tool-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 34px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.tool-card-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tool-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.tool-card-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 22px;
}

/* Split PDF Custom Styles */
.split-file-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 18px;
}

.split-doc-label {
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.split-input-box {
  background: rgba(31, 41, 55, 0.4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 18px;
  text-align: left;
}

.split-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.range-input-wrapper {
  display: flex;
  gap: 8px;
}

.range-field {
  flex: 1;
  padding: 10px 14px;
  background: #111827;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 0.95rem;
  font-family: monospace;
}

.range-field:focus {
  border-color: #8b5cf6;
  outline: none;
}

.range-helper {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 6px;
}

.range-helper code {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 5px;
  border-radius: 4px;
  color: #c4b5fd;
}

.preset-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.chips-label {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-right: 4px;
}

.chip-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.15s ease;
}

.chip-btn:hover {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
  border-color: #8b5cf6;
}

.split-preview-bar {
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: #34d399;
  font-weight: 500;
}

/* PDF to Image Settings & Rows */
.conversion-settings {
  background: rgba(31, 41, 55, 0.4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.setting-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.radio-pill-group {
  display: flex;
  gap: 8px;
}

.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  background: #111827;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.15s ease;
}

.radio-pill:has(input:checked) {
  border-color: #10b981;
  color: #fff;
  background: rgba(16, 185, 129, 0.15);
}

.radio-pill input {
  accent-color: #10b981;
}

/* Merge list & Image to PDF Drop Area */
.image-drop-area {
  min-height: 160px;
  max-height: 320px;
  overflow-y: auto;
  border: 2px dashed rgba(99, 102, 241, 0.45);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 16px;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.empty-drop-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin: auto;
  padding: 24px 16px;
  cursor: pointer;
}

.empty-drop-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.14);
  color: #818cf8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.empty-drop-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  text-align: center;
}

.empty-drop-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}

.image-drop-area:hover, .image-drop-area.dragover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
}

.merge-file-list {
  min-height: 120px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 20px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.empty-list-text {
  margin: auto;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.file-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px;
  width: 100%;
}

.img-preview-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: #000;
}

.img-preview-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-preview-cell .delete-handle {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background: var(--danger);
  color: white;
  border-radius: 50%;
  border: 2px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.merge-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* ==========================================================
   Page Organizer View
   ========================================================== */
.organize-section {
  flex: 1;
  padding: 32px 40px;
  overflow-y: auto;
}

/* Heading and its line of help in the middle of the page, like the other tools, with the buttons centred under them */
.organize-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  text-align: center;
}

.section-heading {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.section-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.organize-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.organize-actions .btn {
  white-space: nowrap;
}

/* Organize PDF Batch Toolbar */
.batch-bar {
  background: rgba(31, 41, 55, 0.6);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

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

.batch-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.batch-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.batch-count-text {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.batch-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.organize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 22px;
}

.organize-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: all 0.2s ease;
  cursor: grab;
}

.organize-card:active {
  cursor: grabbing;
}

.organize-card.selected {
  border-color: #6366f1;
  box-shadow: 0 0 16px var(--accent-glow);
  background: rgba(99, 102, 241, 0.08);
}

.organize-card-select-chk {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 18px;
  height: 18px;
  accent-color: var(--accent-primary);
  cursor: pointer;
  z-index: 5;
}

.organize-card.dragging {
  opacity: 0.35;
  transform: scale(0.96);
}

.organize-card.drag-over {
  border: 2px dashed #6366f1;
  transform: scale(1.02);
}

.organize-card:hover {
  border-color: #6366f1;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.organize-preview {
  width: 100%;
  aspect-ratio: 1 / 1.414;
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.organize-card-meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.organize-card-title {
  font-size: 0.85rem;
  font-weight: 600;
}

.organize-card-btns {
  display: flex;
  gap: 4px;
}

/* ==========================================================
   Signature Modal
   ========================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card {
  width: 100%;
  max-width: 520px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
}

.sig-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  background: #141c2e;
}

.sig-tab-btn {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sig-tab-btn.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
  background: rgba(99, 102, 241, 0.05);
}

.modal-body {
  padding: 20px;
}

.sig-canvas-container {
  width: 100%;
  height: 180px;
  background: #ffffff;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

#sigCanvas {
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.sig-guide-line {
  position: absolute;
  bottom: 40px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: #cbd5e1;
  pointer-events: none;
}

.sig-palette {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

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

.color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.color-dot:hover {
  transform: scale(1.15);
}

.color-dot.active {
  border-color: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.sig-text-field {
  width: 100%;
  padding: 12px 14px;
  background: #1f2937;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: #fff;
  font-size: 1rem;
  margin-bottom: 16px;
  outline: none;
}

.sig-text-field:focus {
  border-color: var(--accent-primary);
}

.sig-type-preview {
  height: 120px;
  background: #ffffff;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Caveat', 'Dancing Script', 'Brush Script MT', cursive, sans-serif;
  font-size: 2.5rem;
  color: #0f172a;
}

.modal-footer {
  padding: 14px 20px;
  background: #141c2e;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ==========================================================
   Toast Notifications
   ========================================================== */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 999;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 380px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  color: #fff;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

@keyframes slideIn {
  from { transform: translateX(50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.toast-success {
  border-left: 4px solid var(--success);
}

.toast-error {
  border-left: 4px solid var(--danger);
}

.toast-info {
  border-left: 4px solid var(--accent-primary);
}

/* ==========================================================
   Upgraded Merge PDFs Layout & Thumbnail Cards
   ========================================================== */
.merge-card-container {
  max-width: 840px !important;
  width: 100%;
}

.merge-main-card {
  padding: 30px 26px !important;
}

.merge-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 16px;
}

.merge-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.merge-preview-container {
  min-height: 180px;
  max-height: 400px;
  overflow-y: auto;
  border: 2px dashed rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-md);
  padding: 14px;
  background: rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.merge-preview-container.dragover {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}

.merge-item-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
}

.merge-item-card:hover {
  border-color: #f59e0b;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.merge-item-idx {
  font-size: 0.85rem;
  font-weight: 700;
  color: #f59e0b;
  min-width: 24px;
  text-align: center;
}

.merge-item-thumb {
  width: 52px;
  height: 68px;
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid #d1d5db;
}

.merge-item-thumb canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.merge-item-info {
  flex: 1;
  text-align: left;
  min-width: 0;
}

.merge-item-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.merge-item-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.merge-item-badge {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.72rem;
}

.merge-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.empty-merge-state {
  padding: 36px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.empty-list-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

/* ==========================================================
   Watermark & Page Numbering Styles
   ========================================================== */
.tool-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
  text-align: left;
}

.tool-opt-panel {
  background: rgba(31, 41, 55, 0.4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
}

.panel-header-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 12px;
  font-size: 0.88rem;
}

.panel-header-badge input[type="checkbox"] {
  accent-color: var(--accent-primary);
  width: 16px;
  height: 16px;
}

.opt-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}

.opt-row-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
}

/* ==========================================================
   Text Extractor & Live Search Studio (3-Panel Workspace)
   ========================================================== */
html.extract-studio-active,
body.extract-studio-active,
html:has(#extractWorkspace:not(.hidden)),
body:has(#extractWorkspace:not(.hidden)) {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.extract-studio-active .app-main,
body:has(#extractWorkspace:not(.hidden)) .app-main {
  height: calc(100vh - var(--header-height)) !important;
  max-height: calc(100vh - var(--header-height)) !important;
  overflow: hidden !important;
  min-height: 0 !important;
  flex: 1;
}

body.extract-studio-active .extract-section,
body:has(#extractWorkspace:not(.hidden)) .extract-section {
  height: calc(100vh - var(--header-height)) !important;
  max-height: calc(100vh - var(--header-height)) !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

.extract-section {
  flex: 1;
  display: flex;
  width: 100%;
  height: calc(100vh - var(--header-height));
  max-height: calc(100vh - var(--header-height));
  overflow: hidden;
  position: relative;
  background: var(--bg-primary);
  min-height: 0;
}

.extract-empty-view {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.extract-drop-zone {
  margin-top: 20px;
  border: 2px dashed rgba(99, 102, 241, 0.4);
  border-radius: var(--radius-lg);
  padding: 36px 20px;
  background: rgba(17, 24, 39, 0.6);
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
  outline: none;
}

.extract-drop-zone * {
  pointer-events: none;
}

.extract-drop-zone:focus-visible {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

.extract-drop-zone:hover, .extract-drop-zone.dragover {
  border-color: var(--accent-primary);
  background: rgba(99, 102, 241, 0.08);
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.25);
}

.extract-workspace {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

/* 1. LEFT SIDEBAR: Pages Thumbnails (Vertical Scroll) */
.extract-sidebar {
  width: 210px;
  min-width: 210px;
  max-width: 210px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  min-height: 0;
  z-index: 10;
}

/* Permanently Fixed Left Header */
.extract-sidebar-header {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  background: rgba(17, 24, 39, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 25;
}

.extract-sidebar-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.6px;
  cursor: pointer;
  user-select: none;
  padding: 4px 8px;
  margin-left: -6px;
  border-radius: var(--radius-sm);
  transition: all 0.18s ease;
  border: 1px solid transparent;
}

.extract-sidebar-title:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(99, 102, 241, 0.35);
}

.extract-sidebar-title:active {
  transform: scale(0.97);
}

.extract-sidebar-view-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

.extract-sidebar-title:hover .extract-sidebar-view-icon {
  color: #818cf8;
  transform: scale(1.12);
}

.extract-count-badge {
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  font-weight: 600;
}

.extract-thumbnails-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
}

.extract-thumb-card {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 8px 6px 10px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.extract-thumb-card:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}

.extract-thumb-card.active {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.25);
}

.extract-thumb-canvas-box {
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 100%;
  min-height: 0;
  overflow: visible;
}

.extract-thumb-canvas {
  background: #ffffff;
  max-width: 100%;
  max-height: 145px;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.extract-thumb-card:hover:not(.active) .extract-thumb-canvas {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.55), 0 6px 18px rgba(0, 0, 0, 0.5);
  border-color: rgba(99, 102, 241, 0.55);
}

.extract-thumb-card.active .extract-thumb-canvas {
  box-shadow: 0 0 0 2.5px #6366f1, 0 8px 24px rgba(99, 102, 241, 0.45);
  border-color: #6366f1;
}

.extract-thumb-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 0 2px;
  background: transparent !important;
  border-top: none !important;
}

.extract-thumb-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 0.2px;
  transition: all 0.2s ease;
}

.extract-thumb-card:hover .extract-thumb-num {
  color: #f3f4f6;
  border-color: rgba(99, 102, 241, 0.4);
}

.extract-thumb-card.active .extract-thumb-num {
  color: #ffffff;
  background: #6366f1;
  border-color: #6366f1;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.extract-thumb-words {
  font-size: 0.65rem;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  display: inline-flex;
  align-items: center;
}

/* ==========================================================
   List View Mode for Extract Sidebar Pages
   ========================================================== */
.extract-thumbnails-scroll.extract-view-list {
  padding: 8px 8px;
  gap: 6px;
}

.extract-thumbnails-scroll.extract-view-list .extract-thumb-card {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 7px 10px;
  gap: 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.extract-thumbnails-scroll.extract-view-list .extract-thumb-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(99, 102, 241, 0.45);
  transform: translateX(3px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.extract-thumbnails-scroll.extract-view-list .extract-thumb-card.active {
  background: rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
  box-shadow: 0 0 0 1px #6366f1, 0 4px 14px rgba(99, 102, 241, 0.3);
  transform: none;
}

.extract-thumbnails-scroll.extract-view-list .extract-thumb-canvas-box {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 36px;
  min-height: 36px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111827 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.extract-thumbnails-scroll.extract-view-list .extract-thumb-canvas {
  width: 100%;
  height: 100%;
  max-height: 36px;
  max-width: 28px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
}

.extract-thumbnails-scroll.extract-view-list .extract-thumb-footer {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 0;
  padding: 0;
}

.extract-thumbnails-scroll.extract-view-list .extract-thumb-num {
  font-size: 0.8rem;
  font-weight: 600;
  color: #f3f4f6;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  white-space: nowrap;
}

.extract-thumbnails-scroll.extract-view-list .extract-thumb-card.active .extract-thumb-num {
  color: #a5b4fc;
  font-weight: 700;
}

.extract-thumbnails-scroll.extract-view-list .extract-thumb-words {
  font-size: 0.68rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.extract-thumbnails-scroll.extract-view-list .extract-thumb-card.active .extract-thumb-words {
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.25);
}

/* 2. MIDDLE AREA: PDF Page Viewer with Live Highlighting */
.extract-middle-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  background: #080c16;
  position: relative;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}

/* Permanently Fixed Middle Viewer Toolbar */
.extract-viewer-toolbar {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: rgba(17, 24, 39, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 12px;
  z-index: 25;
  position: relative;
}

.viewer-file-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  min-width: 0;
  max-width: 320px;
  flex-shrink: 1;
}

.viewer-file-prefix {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.3px;
}

.viewer-file-name {
  color: #f3f4f6;
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.viewer-zoom-group {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.viewer-nav-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.viewer-nav-right {
  margin-left: auto;
}

.viewer-highlight-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.viewer-page-counter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.viewer-page-input {
  width: 42px;
  height: 26px;
  text-align: center;
  background: #1f2937;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.viewer-page-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.viewer-zoom-box {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.viewer-zoom-input {
  width: 46px;
}

.viewer-zoom-symbol {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.viewer-view-toggle-segmented {
  display: inline-flex;
  align-items: center;
  background: #111827;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
  margin-left: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.zoom-preset-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  line-height: 1.2;
  opacity: 0.7;
}

.zoom-preset-btn:hover:not(.active) {
  color: #f3f4f6;
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}

.zoom-preset-btn.active {
  background: #6366f1 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  border-color: #818cf8 !important;
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.75), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.viewer-zoom-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 44px;
  text-align: center;
}

.toggle-highlight-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.toggle-highlight-label input {
  display: none;
}

.toggle-switch-slider {
  width: 32px;
  height: 18px;
  background: #374151;
  border-radius: 999px;
  position: relative;
  transition: background 0.2s ease;
}

.toggle-switch-slider::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}

.toggle-highlight-label input:checked + .toggle-switch-slider {
  background: #6366f1;
}

.toggle-highlight-label input:checked + .toggle-switch-slider::after {
  transform: translateX(14px);
}

.search-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.4);
  color: #facc15;
  font-size: 0.72rem;
  font-weight: 600;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #facc15;
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.extract-canvas-stage {
  flex: 1;
  overflow: auto;
  min-height: 0;
  display: block;
  text-align: center;
  padding: 24px 20px;
  position: relative;
  background: #090e1b;
  overscroll-behavior: contain;
}

.extract-page-container {
  position: relative;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  background: #ffffff;
  line-height: 0;
  display: inline-block;
  margin: 0 auto;
  vertical-align: top;
  flex-shrink: 0;
  box-sizing: content-box;
  text-align: left;
}

.extract-pdf-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.extract-highlight-overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  overflow: hidden;
  border-radius: 4px;
}

/* Synchronized Visual Text Highlighting on PDF Page */
.extract-text-box {
  position: absolute;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, outline 0.15s ease;
  z-index: 2;
  pointer-events: auto;
  box-sizing: border-box;
}

.highlight-boxes-on .extract-text-box {
  background: rgba(99, 102, 241, 0.08);
  outline: 1px solid rgba(99, 102, 241, 0.25);
}

.extract-text-box:hover {
  background: rgba(99, 102, 241, 0.35) !important;
  outline: 2px solid #818cf8 !important;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
  z-index: 10;
}

.extract-text-box.active-target-highlight {
  background: rgba(245, 158, 11, 0.45) !important;
  outline: 2.5px solid #f59e0b !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.85), inset 0 0 6px rgba(245, 158, 11, 0.35);
  z-index: 25;
  animation: highlightPulse 1.2s infinite alternate;
  border-radius: 3px;
}

@keyframes highlightPulse {
  0% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.5); }
  100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.95); }
}

.extract-text-box.search-highlight {
  background: rgba(234, 179, 8, 0.48) !important;
  outline: 2px solid #eab308 !important;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.6);
  z-index: 15;
}

.extract-text-box.active-search-match {
  background: rgba(239, 68, 68, 0.52) !important;
  outline: 2.5px solid #ef4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.85);
  z-index: 30;
}

/* 3. RIGHT SIDEBAR: Text Tools & Extractor Studio */
.extract-tools-panel {
  width: 410px;
  min-width: 380px;
  max-width: 440px;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  min-height: 0;
  z-index: 10;
}

/* Permanently Fixed Tools Panel Top Controls Container */
.tools-panel-top-controls {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

/* Permanently Fixed Tools Panel Header */
.tools-panel-header {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  flex-shrink: 0;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  background: rgba(17, 24, 39, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.tools-panel-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.tools-panel-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.tools-panel-badge span {
  background: linear-gradient(135deg, #38bdf8 0%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.tools-panel-badge svg {
  color: #38bdf8;
  flex-shrink: 0;
}

.tools-doc-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #f9fafb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.tools-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-extract-open-new {
  background: rgba(99, 102, 241, 0.12);
  color: #e0e7ff;
  border: 1px solid rgba(99, 102, 241, 0.32);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-extract-open-new:hover {
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(99, 102, 241, 0.55);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.22);
  transform: translateY(-1px);
}

.btn-extract-open-new:active {
  background: rgba(99, 102, 241, 0.28);
  transform: translateY(0);
}

.btn-extract-open-new svg {
  color: #a5b4fc;
  transition: color 0.2s ease;
}

.btn-extract-open-new:hover svg {
  color: #ffffff;
}

/* Permanently Fixed Tool Controls Area */
.tools-stats-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(17, 24, 39, 0.92);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.72rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.stat-pill {
  background: rgba(31, 41, 55, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--text-secondary);
}

.stat-pill strong {
  color: #f3f4f6;
}

.tools-search-section {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: rgba(17, 24, 39, 0.95);
}

.extract-search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #111827;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--text-secondary);
}

.extract-search-input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 0.82rem;
  width: 100%;
}

.search-count-pill {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  font-weight: 600;
  white-space: nowrap;
}

.btn-clear-search {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 4px;
  line-height: 1;
}

.btn-clear-search:hover {
  color: #fff;
}

.search-nav-controls {
  display: flex;
  align-items: center;
  gap: 3px;
}

.tools-scope-tabs {
  display: flex;
  padding: 6px 12px;
  background: rgba(17, 24, 39, 0.8);
  border-bottom: 1px solid var(--border-color);
  gap: 6px;
  flex-shrink: 0;
}

.scope-tab-btn {
  flex: 1;
  padding: 6px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.scope-tab-btn:hover {
  color: #f3f4f6;
  background: rgba(31, 41, 55, 0.4);
}

.scope-tab-btn.active {
  background: #1f2937;
  color: #fff;
  border-color: var(--border-color);
  box-shadow: var(--shadow-sm);
}

.tools-action-buttons {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  background: rgba(17, 24, 39, 0.9);
}

.tools-action-buttons .btn {
  flex: 1;
  justify-content: center;
  font-size: 0.8rem;
}

.tools-utility-bar {
  display: flex;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(17, 24, 39, 0.6);
  flex-shrink: 0;
}

.btn-utility {
  flex: 1;
  padding: 5px 6px;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 4px;
  background: rgba(31, 41, 55, 0.7);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.btn-utility:hover {
  background: rgba(55, 65, 81, 0.9);
  color: #fff;
  border-color: #818cf8;
}

/* Only the Text Content List Scrolls */
.tools-content-area {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overscroll-behavior: contain;
}

/* Interactive Extracted Text Lines & Cards */
.extract-line-item {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(31, 41, 55, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.04);
  font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  word-break: break-word;
}

.extract-line-item:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.5);
  color: #fff;
  transform: translateX(2px);
}

.extract-line-item.active-line {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: #f59e0b !important;
  color: #fef3c7 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.extract-line-item mark.search-match {
  background: #eab308;
  color: #000;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 2px;
}

.extract-line-item mark.search-match.focused {
  background: #ef4444;
  color: #fff;
  box-shadow: 0 0 6px #ef4444;
}

.extract-page-card {
  background: rgba(17, 24, 39, 0.7);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.extract-page-header {
  background: rgba(31, 41, 55, 0.85);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
  color: #818cf8;
  border-bottom: 1px solid var(--border-color);
}

.extract-page-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.extract-page-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
}

/* ==========================================================
   Image to PDF Studio (reuses the 3-Panel Extract Workspace)
   ========================================================== */
.img2pdf-sidebar-title,
.img2pdf-sidebar-title:hover {
  cursor: default;
  color: var(--text-secondary);
  background: transparent;
  border-color: transparent;
}

.img2pdf-sidebar-title:active {
  transform: none;
}

.img2pdf-workspace .extract-thumb-card {
  cursor: grab;
}

.img2pdf-workspace .extract-thumb-card.dragging {
  opacity: 0.45;
}

.img2pdf-workspace .extract-thumb-card.drag-over {
  background: rgba(99, 102, 241, 0.16);
  border-color: #6366f1;
}

.img2pdf-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--danger);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  z-index: 3;
}

.extract-thumb-card:hover .img2pdf-thumb-remove,
.img2pdf-thumb-remove:focus-visible {
  opacity: 1;
}

.img2pdf-thumb-remove:hover {
  background: var(--danger-hover);
}

.img2pdf-workspace.dragover .extract-canvas-stage {
  box-shadow: inset 0 0 0 2px #6366f1;
  background: rgba(99, 102, 241, 0.08);
}

/* Crop tool: floating controls + interactive crop box */
.img2pdf-workspace .extract-canvas-stage {
  /* Keep the page clear of the vertical tool bar on the right */
  padding-right: 116px;
}

.img2pdf-crop-bar {
  position: absolute;
  top: 60px;
  right: 22px;
  z-index: 30;
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  background: rgba(17, 24, 39, 0.94);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.img2pdf-crop-bar > .btn {
  justify-content: center;
  padding-left: 6px;
  padding-right: 6px;
  white-space: nowrap;
}

.img2pdf-transform-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.img2pdf-tool-row {
  display: flex;
  gap: 4px;
}

.img2pdf-tool-row .btn {
  flex: 1;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.img2pdf-add-btn {
  cursor: pointer;
}

.img2pdf-crop-size {
  font-size: 0.66rem;
  font-weight: 600;
  font-family: monospace;
  color: #a5b4fc;
  text-align: center;
  line-height: 1.3;
}

.img2pdf-crop-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 4px;
  touch-action: none;
}

.img2pdf-crop-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  outline: 1px solid rgba(0, 0, 0, 0.6);
  /* Dim everything outside the crop box */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.58);
  cursor: move;
  touch-action: none;
  /* Rule-of-thirds guide lines */
  background-image:
    linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.45) calc(33.333% - 0.5px), rgba(255, 255, 255, 0.45) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px), transparent calc(66.666% - 0.5px), rgba(255, 255, 255, 0.45) calc(66.666% - 0.5px), rgba(255, 255, 255, 0.45) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.45) calc(33.333% - 0.5px), rgba(255, 255, 255, 0.45) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px), transparent calc(66.666% - 0.5px), rgba(255, 255, 255, 0.45) calc(66.666% - 0.5px), rgba(255, 255, 255, 0.45) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
}

.img2pdf-crop-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #6366f1;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  touch-action: none;
}

.img2pdf-crop-handle[data-dir="nw"] { top: -8px; left: -8px; cursor: nwse-resize; }
.img2pdf-crop-handle[data-dir="n"]  { top: -8px; left: calc(50% - 7px); cursor: ns-resize; }
.img2pdf-crop-handle[data-dir="ne"] { top: -8px; right: -8px; cursor: nesw-resize; }
.img2pdf-crop-handle[data-dir="e"]  { top: calc(50% - 7px); right: -8px; cursor: ew-resize; }
.img2pdf-crop-handle[data-dir="se"] { bottom: -8px; right: -8px; cursor: nwse-resize; }
.img2pdf-crop-handle[data-dir="s"]  { bottom: -8px; left: calc(50% - 7px); cursor: ns-resize; }
.img2pdf-crop-handle[data-dir="sw"] { bottom: -8px; left: -8px; cursor: nesw-resize; }
.img2pdf-crop-handle[data-dir="w"]  { top: calc(50% - 7px); left: -8px; cursor: ew-resize; }

/* ==========================================================
   PDF to Image Studio (reuses the 3-Panel Extract Workspace)
   ========================================================== */
/* The section id carries the old centered tool-card layout; the studio fills the whole area instead */
#pdf2imgSection.extract-section {
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
}

.pdf2img-thumb-check {
  position: absolute;
  top: 6px;
  left: 8px;
  width: 16px;
  height: 16px;
  accent-color: #6366f1;
  cursor: pointer;
  z-index: 3;
}

/* Pages left out of the export look dimmed */
.pdf2img-workspace .extract-thumb-card:not(.page-selected) .extract-thumb-canvas {
  opacity: 0.45;
}

.pdf2img-page-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: rgba(31, 41, 55, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pdf2img-page-item:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.5);
}

.pdf2img-page-item.active {
  background: rgba(99, 102, 241, 0.18);
  border-color: #6366f1;
}

.pdf2img-page-item:not(.page-selected) .pdf2img-page-name,
.pdf2img-page-item:not(.page-selected) .pdf2img-page-meta {
  opacity: 0.5;
}

.pdf2img-page-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #6366f1;
  cursor: pointer;
  flex-shrink: 0;
}

.pdf2img-page-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.pdf2img-page-meta {
  margin-left: auto;
  font-size: 0.7rem;
  font-family: monospace;
  color: var(--text-muted);
  white-space: nowrap;
}

.pdf2img-mode-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(17, 24, 39, 0.95);
  flex-shrink: 0;
}

.pdf2img-mode-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: rgba(31, 41, 55, 0.35);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.pdf2img-mode-card:hover {
  border-color: rgba(99, 102, 241, 0.55);
}

.pdf2img-mode-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pdf2img-mode-card:has(input:checked) {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.16);
  box-shadow: 0 0 0 1px #6366f1;
}

.pdf2img-mode-card:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
}

.pdf2img-mode-icon {
  display: inline-flex;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.pdf2img-mode-card:has(input:checked) .pdf2img-mode-icon {
  color: #a5b4fc;
}

.pdf2img-mode-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pdf2img-mode-title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-primary);
}

.pdf2img-mode-desc {
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.pdf2img-mode-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--success);
  color: #fff;
  flex-shrink: 0;
  visibility: hidden;
}

.pdf2img-mode-card:has(input:checked) .pdf2img-mode-check {
  visibility: visible;
}

.pdf2img-mode-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(17, 24, 39, 0.95);
  flex-shrink: 0;
}

.pdf2img-mode-tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  text-align: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: rgba(31, 41, 55, 0.7);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pdf2img-mode-tab input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pdf2img-mode-tab-title {
  font-size: 0.82rem;
  font-weight: 700;
}

.pdf2img-mode-tab small {
  font-size: 0.66rem;
  font-weight: 500;
  opacity: 0.85;
}

.pdf2img-mode-tab:hover {
  color: #fff;
  border-color: #818cf8;
}

.pdf2img-mode-tab:has(input:checked) {
  background: rgba(99, 102, 241, 0.2);
  border-color: #6366f1;
  color: #e0e7ff;
  box-shadow: 0 0 0 1px #6366f1;
}

.pdf2img-mode-tab:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
}

.pdf2img-preset-group {
  flex: 1;
  max-width: 230px;
  display: flex;
  gap: 6px;
}

.pdf2img-preset-btn {
  flex: 1;
  padding: 5px 6px;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: rgba(31, 41, 55, 0.7);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pdf2img-preset-btn small {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  opacity: 0.85;
}

.pdf2img-preset-btn:hover {
  color: #fff;
  border-color: #818cf8;
}

.pdf2img-preset-btn.active {
  background: rgba(99, 102, 241, 0.2);
  border-color: #6366f1;
  color: #e0e7ff;
}

.pdf2img-extract-note {
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--text-secondary);
  text-align: left;
}

.pdf2img-quality-control {
  flex: 1;
  max-width: 230px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdf2img-quality-control .prop-slider {
  flex: 1;
  min-width: 0;
}

.pdf2img-quality-input {
  width: 54px;
}

.pdf2img-quality-unit {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.pdf2img-4k-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}

.pdf2img-4k-toggle input {
  width: 15px;
  height: 15px;
  accent-color: #6366f1;
  cursor: pointer;
}

/* "4K image" stands out in a gold to orange gradient */
.pdf2img-4k-label {
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fbbf24;
  background: linear-gradient(90deg, #fde047 0%, #fb923c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pdf2img-4k-toggle small {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.pdf2img-quality-hint {
  font-size: 0.74rem;
  line-height: 1.4;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  text-align: left;
}

.pdf2img-quality-control.is-disabled {
  opacity: 0.45;
}

.pdf2img-convert-btn {
  padding-top: 11px;
  padding-bottom: 11px;
}

/* ==========================================================
   HTML to PDF Studio (reuses the 3-Panel Extract Workspace)
   ========================================================== */
/* The left panel holds the code editor, so it is wider than a thumbnail strip */
.html2pdf-workspace .html2pdf-sidebar {
  width: 340px;
  min-width: 340px;
  max-width: 340px;
}

.html2pdf-code-input {
  flex: 1;
  min-height: 0;
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  padding: 12px;
  background: #0b1120;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre;
  overflow: auto;
  tab-size: 2;
}

.html2pdf-code-input:focus {
  box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.45);
}

/* The sizer takes the scaled size so the stage scrolls correctly while the sheet itself is scaled */
.html2pdf-page-sizer {
  display: inline-block;
  vertical-align: top;
  text-align: left;
}

.html2pdf-page {
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.3);
  transform-origin: top left;
  line-height: 0;
}

/* Website address box + Add button on the start screen */
.html2pdf-url-row {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.html2pdf-url-input {
  flex: 1;
  min-width: 0;
}

.html2pdf-url-hint {
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #fca5a5;
  text-align: left;
}

/* The settings panel has many controls: let the whole panel scroll on short screens */
#html2pdfToolsPanel {
  overflow-y: auto;
}

#html2pdfToolsPanel .tools-panel-top-controls {
  position: static;
}

#html2pdfToolsPanel .tools-content-area {
  flex: none;
  overflow: visible;
}

/* Website URL at the top of the settings panel */
.html2pdf-url-settings {
  gap: 4px;
}

.html2pdf-panel-url-row {
  display: flex;
  gap: 6px;
}

.html2pdf-panel-url-row .range-field {
  padding: 6px 10px;
  font-size: 0.78rem;
}

.html2pdf-panel-url-row .btn {
  flex-shrink: 0;
}

/* Checkbox settings: One long page, Try to block ads, Remove pop-ups */
.html2pdf-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  user-select: none;
}

.html2pdf-check input {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: #6366f1;
  cursor: pointer;
}

.html2pdf-check small {
  color: var(--text-muted);
}

.html2pdf-group-title {
  font-weight: 700;
  text-align: left;
}

.html2pdf-or {
  margin: 14px 0 -6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.html2pdf-frame {
  display: block;
  border: none;
  background: #ffffff;
}

/* Picture of the fully loaded website: one tile per screenful, each placed where that screen was on the page */
.html2pdf-shot {
  position: relative;
  overflow: hidden;
}

.html2pdf-shot img {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
}

.html2pdf-view-hint {
  padding-bottom: 8px;
}

.html2pdf-workspace .html2pdf-stats {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 8px;
}

.html2pdf-workspace .html2pdf-stats .stat-pill {
  min-width: 0;
  padding: 5px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.html2pdf-fix-box {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
  text-align: left;
}

.html2pdf-fix-title {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fbbf24;
}

.html2pdf-base-input {
  width: 100%;
}

.html2pdf-asset-info {
  padding: 6px 0 0;
}

.html2pdf-actions {
  flex-direction: column;
}

.html2pdf-notes p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: left;
}

.html2pdf-notes strong {
  color: var(--text-primary);
}

/* ==========================================================
   Merge PDF Studio (reuses the 3-Panel Extract Workspace)
   ========================================================== */
.merge-workspace .extract-thumb-card {
  cursor: grab;
}

.merge-workspace .extract-thumb-card.dragging {
  opacity: 0.45;
}

.merge-workspace .extract-thumb-card.drag-over {
  background: rgba(99, 102, 241, 0.16);
  border-color: #6366f1;
}

/* Floating + button at the top-right of the preview: add more PDFs */
.merge-workspace .extract-canvas-stage {
  padding-top: 62px;
}

.merge-add-fab {
  position: absolute;
  top: 58px;
  right: 22px;
  z-index: 30;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

.merge-workspace.dragover .extract-canvas-stage {
  box-shadow: inset 0 0 0 2px #6366f1;
  background: rgba(99, 102, 241, 0.08);
}

/* Stats stay on one fixed line: three equal boxes that never wrap */
.merge-workspace .tools-stats-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 8px;
}

.merge-workspace .tools-stats-bar .stat-pill {
  min-width: 0;
  padding: 5px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.merge-order-item {
  align-items: flex-start;
}

.merge-order-item .img2pdf-order-grip,
.merge-order-item .img2pdf-order-idx,
.merge-order-item .img2pdf-order-actions {
  margin-top: 2px;
}

/* Serial number of each merge row: larger plain text (no badge) */
.merge-order-item .img2pdf-order-idx {
  min-width: 26px;
  margin-top: 0;
  align-self: center;
  font-size: 0.86rem;
  font-weight: 700;
  color: #a5b4fc;
}

.merge-order-item .img2pdf-order-grip {
  align-self: center;
  margin-top: 0;
}

/* Large, clearly visible move up / move down / remove buttons on each merge row */
.merge-order-actions {
  gap: 6px;
  align-self: center;
}

.merge-action-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(129, 140, 248, 0.6);
  background: rgba(99, 102, 241, 0.2);
  color: #c7d2fe;
  cursor: pointer;
  transition: all 0.15s ease;
}

.merge-action-btn:hover:not(:disabled) {
  background: #6366f1;
  border-color: #818cf8;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.45);
}

.merge-action-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.merge-action-remove {
  border-color: rgba(248, 113, 113, 0.65);
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}

.merge-action-remove:hover:not(:disabled) {
  background: #ef4444;
  border-color: #f87171;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.45);
}

.merge-pages-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 0.7rem;
  color: var(--text-secondary);
  cursor: default;
}

.merge-pages-input {
  width: 74px;
  height: 22px;
  padding: 0 6px;
  font-size: 0.72rem;
  font-family: monospace;
  color: #fff;
  background: #111827;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  outline: none;
  cursor: text;
}

.merge-pages-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.merge-pages-input.is-error {
  border-color: #f87171;
}

.merge-pages-row .img2pdf-order-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================
   Split PDF Studio (reuses the 3-Panel Extract Workspace)
   ========================================================== */
/* Stats stay on one fixed line: two equal boxes that never wrap or change height */
.split-workspace .tools-stats-bar {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
  flex-wrap: nowrap;
}

.split-workspace .tools-stats-bar .stat-pill {
  min-width: 0;
  padding: 5px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.split-range-row {
  padding: 8px 12px 0;
  display: flex;
}

/* Page numbers box takes half the row; "Split into N PDF file(s)" sits on its right */
.split-select-row {
  align-items: center;
  gap: 10px;
}

.split-select-row .split-range-input {
  flex: 1 1 50%;
  width: 50%;
}

.split-into-group {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.split-into-group .split-number-input {
  width: 54px;
}

.split-range-input {
  flex: 1;
  width: 100%;
  min-width: 0;
}

.split-option-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 0;
}

.split-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: rgba(31, 41, 55, 0.35);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.split-option:hover {
  border-color: rgba(99, 102, 241, 0.55);
}

.split-option:has(input:checked) {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.16);
}

.split-option input {
  width: 15px;
  height: 15px;
  accent-color: #6366f1;
  flex-shrink: 0;
  cursor: pointer;
}

.split-option span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.split-option strong {
  font-size: 0.8rem;
  color: var(--text-primary);
}

.split-option small {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.split-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}

.split-check input {
  width: 15px;
  height: 15px;
  accent-color: #6366f1;
  flex-shrink: 0;
  cursor: pointer;
}

.split-inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 0;
  font-size: 0.82rem;
  color: var(--text-primary);
}

.split-number-input {
  width: 70px;
}

.split-size-input {
  width: 90px;
}

/* Tick boxes on the thumbnails only appear while selecting pages */
.split-workspace.split-ticks-off .pdf2img-thumb-check {
  display: none;
}

/* The Text method stands out in green so it is easy to spot */
.pdf2img-mode-tab.split-text-tab {
  border-color: rgba(251, 146, 60, 0.75);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(236, 72, 153, 0.2) 100%);
  color: #fde68a;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.18);
}

.pdf2img-mode-tab.split-text-tab .pdf2img-mode-tab-title {
  color: #fbbf24;
}

.pdf2img-mode-tab.split-text-tab:hover {
  border-color: #fb923c;
  color: #fff7ed;
}

.pdf2img-mode-tab.split-text-tab:has(input:checked) {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.45) 0%, rgba(236, 72, 153, 0.4) 100%);
  border-color: #fbbf24;
  color: #fff7ed;
  box-shadow: 0 0 0 1px #fbbf24, 0 0 14px rgba(245, 158, 11, 0.35);
}

.pdf2img-mode-tab.split-text-tab:has(input:checked) .pdf2img-mode-tab-title {
  color: #ffffff;
}

/* "?" help beside the Text step: explains the two options on hover, focus or tap */
.split-help-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.split-help {
  position: relative;
  display: inline-flex;
}

.split-help-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #fbbf24;
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.split-help-btn:hover,
.split-help-btn:focus-visible {
  background: #fbbf24;
  color: #111827;
  outline: none;
}

.split-help-popover {
  display: none;
  position: absolute;
  top: 26px;
  left: -120px;
  z-index: 60;
  width: 300px;
  padding: 12px 14px;
  background: #0f172a;
  border: 1px solid rgba(251, 191, 36, 0.55);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--text-secondary);
  text-align: left;
}

.split-help:hover .split-help-popover,
.split-help:focus-within .split-help-popover {
  display: block;
}

.split-help-popover p {
  margin: 0 0 6px;
}

.split-help-popover p:last-child {
  margin-bottom: 0;
}

.split-help-popover .split-help-title {
  margin-top: 8px;
  font-weight: 700;
  color: #fbbf24;
}

.split-help-popover .split-help-title:first-child {
  margin-top: 0;
}

.split-help-popover .split-help-example {
  color: var(--text-muted);
}

.split-help-popover strong {
  color: var(--text-primary);
}

.split-text-input {
  flex: 1;
  min-width: 0;
}

.split-range-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 0;
  max-height: 132px;
  overflow-y: auto;
}

.split-range-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-primary);
}

.split-range-remove {
  margin-left: auto;
  color: #f87171;
  font-size: 1rem;
  line-height: 1;
}

.split-range-tools {
  flex-wrap: wrap;
}

.split-inline-spacer {
  flex: 1;
}

.split-size-note {
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--text-muted);
  text-align: left;
}

/* Optional size limit with an on / off switch */
.split-size-block {
  margin-top: 10px;
  padding: 10px 0 2px;
  border-top: 1px solid var(--border-color);
}

.split-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  cursor: pointer;
  user-select: none;
}

.split-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.split-switch-track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #374151;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.split-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}

.split-switch input:checked + .split-switch-track {
  background: #6366f1;
}

.split-switch input:checked + .split-switch-track .split-switch-thumb {
  transform: translateX(16px);
}

.split-switch input:focus-visible + .split-switch-track {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
}

.split-switch-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.split-range-hint {
  padding: 6px 12px 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: left;
}

.split-range-hint.is-error {
  color: #f87171;
  font-weight: 600;
}

.split-quick-bar {
  border-bottom: none;
  background: transparent;
  padding-top: 8px;
  padding-bottom: 2px;
  flex-wrap: wrap;
}

/* Pages left out of the split look dimmed */
.split-workspace .extract-thumb-card:not(.page-selected) .extract-thumb-canvas {
  opacity: 0.45;
}

.split-output-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: rgba(31, 41, 55, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.15s ease;
}

.split-output-item:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.5);
}

/* ==========================================================
   Compress PDF Studio (reuses the 3-Panel Extract Workspace)
   ========================================================== */
.compress-workspace .extract-canvas-stage {
  /* Leave room for the floating Compressed / Original switch */
  padding-top: 62px;
}

.compress-view-bar {
  position: absolute;
  top: 58px;
  right: 22px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 10px;
  background: rgba(17, 24, 39, 0.94);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.compress-view-bar .viewer-view-toggle-segmented {
  margin-left: 0;
}

.compress-page-size {
  font-size: 0.74rem;
  font-weight: 600;
  font-family: monospace;
  color: #a5b4fc;
  white-space: nowrap;
}

/* Original and Estimated always sit side by side on one line */
.compress-workspace .tools-stats-bar {
  flex-wrap: nowrap;
}

.compress-workspace .tools-stats-bar {
  gap: 8px;
  padding: 10px 12px;
}

.compress-workspace .tools-stats-bar .stat-pill {
  white-space: nowrap;
  flex: 1;
  text-align: center;
  padding: 7px 10px;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
  color: #cbd5e1;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.compress-workspace .tools-stats-bar .stat-pill strong {
  font-size: 0.9rem;
  font-weight: 800;
  color: #7dd3fc;
}

/* The estimated result is the number that matters most: green and brighter */
.compress-workspace .tools-stats-bar .stat-pill:has(#compressStatEstimate) {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(52, 211, 153, 0.6);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}

.compress-workspace .tools-stats-bar #compressStatEstimate {
  color: #34d399;
}

/* Result would not be smaller than the original: the Estimated box turns red and a warning appears */
.compress-workspace .tools-stats-bar .stat-pill.is-bad,
.compress-workspace .tools-stats-bar .stat-pill.is-bad:has(#compressStatEstimate) {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(248, 113, 113, 0.7);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.compress-workspace .tools-stats-bar .stat-pill.is-bad #compressStatEstimate {
  color: #f87171;
}

.compress-no-saving {
  margin: 0;
  padding: 8px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fecaca;
  background: rgba(239, 68, 68, 0.14);
  border-bottom: 1px solid rgba(248, 113, 113, 0.5);
  flex-shrink: 0;
}

/* The Compress panel has many controls: let the whole panel scroll so nothing is cut off on short screens */
.compress-workspace .extract-tools-panel {
  overflow-y: auto;
}

.compress-workspace .tools-panel-top-controls {
  position: static;
}

.compress-workspace .tools-content-area {
  flex: none;
  overflow: visible;
}

/* Basic / Advanced settings switch */
.compress-settings-tabs {
  display: flex;
  gap: 4px;
  margin: 10px 12px 0;
  padding: 3px;
  background: #111827;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.compress-settings-tab {
  flex: 1;
  padding: 7px 8px;
  font-size: 0.8rem;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.compress-settings-tab:hover {
  color: #fff;
}

.compress-settings-tab.active {
  background: #6366f1;
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.compress-step-label {
  padding: 12px 12px 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-primary);
  text-align: left;
}

.compress-basic-tabs {
  border-bottom: none;
  background: transparent;
  padding-top: 8px;
  padding-bottom: 4px;
}

.compress-mode-note {
  padding: 0 12px 2px;
}

#compressBasicPanel {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.compress-dpi-hint {
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
  color: #a5b4fc;
  text-align: left;
}

.compress-dpi-hint.is-warning {
  color: #fbbf24;
}

.compress-target-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(17, 24, 39, 0.95);
  flex-shrink: 0;
}

.compress-target-row .opt-label {
  margin-bottom: 0;
  white-space: nowrap;
}

/* Fit to Size stands out as the main action of the target row */
.compress-fit-btn {
  padding-top: 7px;
  padding-bottom: 7px;
  font-weight: 700;
  white-space: nowrap;
}

.compress-target-input {
  flex: 1;
  min-width: 0;
  width: auto;
}

/* Pages left out of the compressed PDF look dimmed */
.compress-workspace .extract-thumb-card:not(.page-selected) .extract-thumb-canvas {
  opacity: 0.45;
}

.compress-page-item:not(.page-selected) .compress-page-name,
.compress-page-item:not(.page-selected) .compress-page-meta {
  opacity: 0.5;
}

.compress-page-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #6366f1;
  cursor: pointer;
  flex-shrink: 0;
}

.compress-page-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: rgba(31, 41, 55, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.15s ease;
}

.compress-page-item:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.5);
}

.compress-page-item.active {
  background: rgba(99, 102, 241, 0.18);
  border-color: #6366f1;
}

.compress-page-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.compress-page-meta {
  margin-left: auto;
  font-size: 0.7rem;
  font-family: monospace;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Slightly taller "Create PDF Document" button */
#btnConvertImagesToPdf {
  padding-top: 11px;
  padding-bottom: 11px;
}

.img2pdf-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(17, 24, 39, 0.95);
  flex-shrink: 0;
}

.img2pdf-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.img2pdf-setting-row .opt-label {
  margin-bottom: 0;
  white-space: nowrap;
}

.img2pdf-setting-row .prop-select {
  flex: 1;
  max-width: 230px;
  min-width: 0;
}

.img2pdf-order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: rgba(31, 41, 55, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.15s ease;
}

.img2pdf-order-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(17, 24, 39, 0.6);
  flex-shrink: 0;
}

.img2pdf-order-hint-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
}

.img2pdf-order-hint-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: #a5b4fc;
}

.img2pdf-order-item {
  cursor: grab;
}

.img2pdf-order-item:active {
  cursor: grabbing;
}

.img2pdf-order-grip {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.img2pdf-order-item:hover .img2pdf-order-grip {
  color: #a5b4fc;
}

.img2pdf-order-item.dragging {
  opacity: 0.45;
}

.img2pdf-order-item.drag-over {
  border-color: #6366f1;
  box-shadow: 0 -2px 0 0 #6366f1;
  background: rgba(99, 102, 241, 0.2);
}

.img2pdf-order-item:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.5);
}

.img2pdf-order-item.active {
  background: rgba(99, 102, 241, 0.18);
  border-color: #6366f1;
}

.img2pdf-order-idx {
  font-size: 0.72rem;
  font-weight: 700;
  color: #818cf8;
  min-width: 24px;
}

.img2pdf-order-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.img2pdf-order-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.img2pdf-order-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.img2pdf-order-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.img2pdf-order-actions .icon-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ==========================================================
   Rubber Stamp Presets & Modal
   ========================================================== */
.stamps-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stamp-chip {
  padding: 12px 14px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.08em;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stamp-chip:hover {
  transform: scale(1.04);
  box-shadow: var(--shadow-md);
}

.stamp-border-inner {
  display: inline-block;
  border: 3px double currentColor;
  padding: 4px 10px;
  border-radius: 3px;
  transform: rotate(-3deg);
  text-transform: uppercase;
}

.stamp-approved {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.stamp-confidential {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.stamp-void {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.stamp-paid {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.stamp-draft {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.stamp-datestamp {
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* ==========================================================
   Universal Result Preview Popup Modal
   ========================================================== */
.pdf-preview-modal-card {
  max-width: 820px !important;
  width: 95%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: rgba(15, 20, 34, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 32px 80px -12px rgba(0, 0, 0, 0.85), 0 0 35px -5px rgba(99, 102, 241, 0.22);
}

.preview-modal-body {
  padding: 16px 20px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(88vh - 130px);
}

.preview-info-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.45;
}

.preview-info-text strong {
  color: var(--text-primary);
}

.preview-pages-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #080c16;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.preview-page-card {
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-page-header {
  width: 100%;
  background: #1e2538;
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.preview-page-canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Converted Image Gallery Preview */
.preview-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  width: 100%;
}

.preview-gallery-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.preview-gallery-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
}

/* Resolution and file size under each image, above its download button */
.preview-gallery-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
}

.preview-select-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}

.preview-select-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: #94a3b8;
}

.preview-gallery-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.preview-gallery-check {
  width: 15px;
  height: 15px;
  accent-color: #6366f1;
  cursor: pointer;
}

/* Images left out of the download look dimmed */
.preview-gallery-card.not-selected .preview-gallery-img {
  opacity: 0.35;
}

.preview-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
}

.preview-gallery-img {
  width: 100%;
  height: 190px;
  object-fit: contain;
  background: #000000;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Extracted Text Box Preview */
.preview-text-box {
  width: 100%;
  min-height: 280px;
  max-height: 48vh;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 14px 16px;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}

/* Modal Footer */
.preview-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.preview-footer-left {
  display: flex;
  align-items: center;
}

.preview-footer-filename {
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 600;
  font-family: monospace;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Show every preview page at full height (scroll instead of squashing pages) */
.preview-pages-container > .preview-page-card {
  flex-shrink: 0;
}

.preview-rename-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #111827;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: #94a3b8;
  cursor: text;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.preview-rename-box:hover {
  border-color: rgba(99, 102, 241, 0.55);
}

.preview-rename-box:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.preview-rename-input {
  width: 200px;
  max-width: 40vw;
  background: transparent;
  border: none;
  outline: none;
  color: #f3f4f6;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: monospace;
}

.preview-modal-footer .preview-footer-actions {
  align-items: flex-end;
}

.preview-download-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* File size above the download button, in a blue to sea-green gradient */
.preview-download-size {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  color: #38bdf8;
  background: linear-gradient(90deg, #3b82f6 0%, #2dd4bf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.preview-file-size {
  margin-left: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: monospace;
  color: #a5b4fc;
  white-space: nowrap;
}

.preview-rename-ext {
  font-size: 0.78rem;
  font-weight: 600;
  font-family: monospace;
  color: #94a3b8;
}

.preview-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Utility Helpers */
.hidden {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 1380px) {
  .studio-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }
}

@media (max-width: 1080px) {
  .dropdown-menu-alltools {
    width: 90vw;
    max-width: 620px;
    right: -40px;
  }
  /* Not enough room for four sections side by side: two rows of two */
  .alltools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .studio-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .arch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .tool-options-grid {
    grid-template-columns: 1fr;
  }
  .app-header {
    padding: 0 12px;
  }
  .header-gap-spacer {
    flex: 0 0 12px;
  }
  .header-nav {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .header-nav::-webkit-scrollbar {
    display: none;
  }
  .dropdown-menu-alltools {
    width: 92vw;
    right: -20px;
  }
  .alltools-grid {
    grid-template-columns: 1fr;
  }
  .hero-title {
    font-size: 2.1rem;
  }
  .matrix-header-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .matrix-filter-tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .matrix-filter-tabs::-webkit-scrollbar {
    display: none;
  }
  .studio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .arch-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .studio-grid {
    grid-template-columns: 1fr;
  }
  .sidebar-thumbnails {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    box-shadow: var(--shadow-lg);
  }
  .editor-toolbar {
    flex-wrap: wrap;
    width: 95%;
  }
}

/* ==========================================================
   PDF to Word / Excel / PowerPoint
   ========================================================== */
.pdf2office-section {
  align-items: flex-start;
}

.pdf2office-container {
  max-width: 700px;
}

.pdf2office-formats {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: rgba(17, 24, 39, 0.6);
}

.pdf2office-format {
  flex: 1;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pdf2office-format:hover {
  color: var(--text-primary);
}

.pdf2office-format.active {
  background: var(--accent-primary);
  color: #ffffff;
}

.pdf2office-file {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: rgba(17, 24, 39, 0.6);
  text-align: left;
}

.pdf2office-file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pdf2office-file-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}

.pdf2office-file-info span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.pdf2office-options {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.pdf2office-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Word and PowerPoint offer three ways */
.pdf2office-choice-three {
  grid-template-columns: 1fr 1fr 1fr;
}

.pdf2office-choice-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: rgba(17, 24, 39, 0.6);
  cursor: pointer;
}

.pdf2office-choice-item:has(input:checked) {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
}

.pdf2office-choice-item input {
  margin-top: 3px;
  accent-color: #6366f1;
  cursor: pointer;
}

.pdf2office-choice-item span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
}

.pdf2office-choice-item small {
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.pdf2office-pages-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pdf2office-pages-row .opt-label {
  margin-bottom: 0;
}

.pdf2office-pages-row .range-field {
  padding: 8px 12px;
  font-size: 0.85rem;
}

.pdf2office-run {
  width: 100%;
  justify-content: center;
  margin-top: 16px;
}

.pdf2office-status {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.pdf2office-result {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pdf2office-result-text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.pdf2office-preview {
  width: 100%;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: #1f2937;
  text-align: left;
}

.pdf2office-preview-text {
  padding: 10px 14px;
}

.pdf2office-preview-text p {
  margin: 0 0 4px;
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.pdf2office-preview-table table {
  border-collapse: collapse;
  font-size: 0.76rem;
}

.pdf2office-preview-table td {
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdf2office-preview-table td.is-bold {
  font-weight: 700;
}

@media (max-width: 640px) {
  .pdf2office-choice,
  .pdf2office-choice-three {
    grid-template-columns: 1fr;
  }
}

/* Narrow screens: the two convert sections go one under the other */
@media (max-width: 860px) {
  .dropdown-menu-convert {
    width: 92vw;
    max-width: 340px;
  }
  .convert-menu-grid {
    grid-template-columns: 1fr;
  }
}

/* Word / Excel / PowerPoint to PDF: what is needed when the helper or Office is missing */
.office2pdf-notice {
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: var(--radius-md);
  background: rgba(251, 191, 36, 0.08);
  color: #fcd34d;
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: left;
}

/* Word, Excel and PowerPoint icons, in PDFMasala's own design (not the apps' logos): a file with a folded corner
   in the app's colour, its letter, and a sign of what it holds - lines of writing, cells, a chart.
   One picture per app, used in the menus, on the start-screen cards and on the converter screens. */
.office-app-icon {
  background-color: rgba(255, 255, 255, 0.06);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 78%;
}

.office-app-word {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234A9BF0'/%3E%3Cstop offset='1' stop-color='%231A56B0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 2h12l7 7v19a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z' fill='url(%23g)'/%3E%3Cpath d='M20 2v5a2 2 0 0 0 2 2h5z' fill='%23fff' opacity='.45'/%3E%3Crect x='9.5' y='7' width='8' height='1.6' rx='.8' fill='%23fff' opacity='.8'/%3E%3Crect x='9.5' y='10.4' width='13' height='1.6' rx='.8' fill='%23fff' opacity='.8'/%3E%3Crect x='9.5' y='13.8' width='10.5' height='1.6' rx='.8' fill='%23fff' opacity='.8'/%3E%3Ctext x='16.5' y='26.6' font-family='Segoe UI,Arial,Helvetica,sans-serif' font-weight='800' font-size='11' fill='%23fff' text-anchor='middle'%3EW%3C/text%3E%3C/svg%3E");
}

.office-app-excel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2335B877'/%3E%3Cstop offset='1' stop-color='%230E6E3A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 2h12l7 7v19a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z' fill='url(%23g)'/%3E%3Cpath d='M20 2v5a2 2 0 0 0 2 2h5z' fill='%23fff' opacity='.45'/%3E%3Crect x='9.5' y='7' width='5.6' height='3.6' rx='.7' fill='%23fff' opacity='.8'/%3E%3Crect x='16.3' y='11.8' width='5.6' height='3.6' rx='.7' fill='%23fff' opacity='.8'/%3E%3Crect x='9.5' y='11.8' width='5.6' height='3.6' rx='.7' fill='%23fff' opacity='.45'/%3E%3Crect x='16.3' y='9' width='5.6' height='1.6' rx='.7' fill='%23fff' opacity='.45'/%3E%3Ctext x='16.5' y='26.6' font-family='Segoe UI,Arial,Helvetica,sans-serif' font-weight='800' font-size='11' fill='%23fff' text-anchor='middle'%3EX%3C/text%3E%3C/svg%3E");
}

.office-app-powerpoint {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F5855C'/%3E%3Cstop offset='1' stop-color='%23BE3A18'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 2h12l7 7v19a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z' fill='url(%23g)'/%3E%3Cpath d='M20 2v5a2 2 0 0 0 2 2h5z' fill='%23fff' opacity='.45'/%3E%3Crect x='9.5' y='11.6' width='3' height='3.8' rx='.7' fill='%23fff' opacity='.8'/%3E%3Crect x='13.7' y='9.2' width='3' height='6.2' rx='.7' fill='%23fff' opacity='.8'/%3E%3Crect x='17.9' y='10.6' width='3' height='4.8' rx='.7' fill='%23fff' opacity='.8'/%3E%3Ctext x='16.5' y='26.6' font-family='Segoe UI,Arial,Helvetica,sans-serif' font-weight='800' font-size='11' fill='%23fff' text-anchor='middle'%3EP%3C/text%3E%3C/svg%3E");
}

/* ==========================================================
   Organize PDF: the files in use, and which file a page comes from
   ========================================================== */
.organize-sources {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.organize-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 320px;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-card);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.organize-source-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: 600;
}

.organize-source-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* On a page card: a coloured tag with the number of the file the page comes from */
.organize-card-source {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  padding: 1px 7px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.5;
}

/* Dropping more PDF files on the grid adds them */
#organizeSection.organize-file-over .organize-stage {
  outline: 2px dashed #6366f1;
  outline-offset: -8px;
}

.organize-empty {
  max-width: 720px;
}

.organize-drop-zone {
  display: block;
}

#organizeEmptyNotice.dragover .organize-drop-zone {
  border-color: var(--accent-primary);
  background: rgba(99, 102, 241, 0.08);
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.25);
}

/* ==========================================================
   Organize PDF Studio (reuses the 3-Panel Extract Workspace)
   Left: the files. Middle: every page as a compact card. Right: the actions.
   ========================================================== */
.organize-workspace .organize-sidebar {
  width: 260px;
  min-width: 260px;
  max-width: 260px;
}

.organize-files-list {
  gap: 6px;
  padding: 10px 8px;
}

.organize-file-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 8px 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.18s ease;
}

.organize-file-row:hover,
.organize-file-row:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(99, 102, 241, 0.45);
  outline: none;
}

.organize-file-row.is-removed {
  opacity: 0.5;
}

.organize-file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.organize-file-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.organize-file-info span {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.organize-file-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.organize-file-actions .icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.organize-sidebar-footer {
  flex-shrink: 0;
  padding: 10px;
  border-top: 1px solid var(--border-color);
}

.organize-sidebar-footer .btn {
  width: 100%;
  justify-content: center;
}

/* Middle: toolbar and the scrolling grid */
.organize-toolbar .batch-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.organize-toolbar .batch-count-text {
  margin-left: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.organize-size-label,
.organize-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.organize-stage {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 28px;
  overscroll-behavior: contain;
}

/* Compact cards: many pages fit on the screen. The size buttons change --organize-card. */
.organize-workspace .organize-grid {
  --organize-card: 150px;
  grid-template-columns: repeat(auto-fill, minmax(var(--organize-card), 1fr));
  gap: 14px;
}

.organize-workspace .organize-size-s .organize-grid {
  --organize-card: 104px;
  gap: 10px;
}

.organize-workspace .organize-size-l .organize-grid {
  --organize-card: 220px;
  gap: 18px;
}

.organize-workspace .organize-card {
  padding: 8px;
  border-radius: var(--radius-sm);
}

.organize-workspace .organize-preview {
  margin-bottom: 6px;
}

.organize-workspace .organize-card-meta {
  flex-wrap: wrap;
  gap: 2px 4px;
}

.organize-workspace .organize-card-title {
  font-size: 0.74rem;
  white-space: nowrap;
}

.organize-workspace .organize-card-btns {
  gap: 0;
  margin-left: auto;
}

.organize-workspace .organize-card-btns .icon-btn {
  padding: 3px;
}

.organize-workspace .organize-card-select-chk {
  top: 12px;
  left: 12px;
  width: 16px;
  height: 16px;
}

.organize-workspace .organize-card-source {
  top: 12px;
  right: 12px;
}

/* Small cards: the tag shows only the file's colour and number stays readable */
.organize-workspace .organize-size-s .organize-card-source {
  padding: 0 5px;
  font-size: 0.6rem;
}

.organize-workspace .organize-size-s .organize-card-title small {
  display: none;
}

/* Right panel */
.organize-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.organize-stats .stat-pill {
  min-width: 0;
  padding: 5px 6px;
  text-align: center;
  white-space: nowrap;
}

.organize-panel-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(17, 24, 39, 0.95);
}

.organize-group-title {
  margin-bottom: 0;
  font-weight: 700;
  text-align: left;
}

.organize-panel-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.organize-panel-row .btn {
  justify-content: center;
  white-space: nowrap;
}

.organize-actions-col {
  flex-direction: column;
}

/* Editor: Organize PDF and Close, above the page thumbnails */
.editor-doc-actions {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-color);
}

.editor-doc-actions .btn {
  flex: 1;
  justify-content: center;
  white-space: nowrap;
  padding-left: 6px;
  padding-right: 6px;
}

@media (max-width: 1100px) {
  .organize-workspace .organize-sidebar {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
  }
  .organize-hint {
    display: none;
  }
}

/* ==========================================================
   Organize PDF: New PDF palette (left), + button (page area), files list (right panel)
   ========================================================== */
.organize-palette-zone {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 8px;
  overscroll-behavior: contain;
  border: 2px dashed transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.organize-palette-zone.drag-over {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
}

.organize-palette-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 18px 6px;
  padding: 22px 12px;
  border: 2px dashed rgba(99, 102, 241, 0.35);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-align: center;
}

.organize-palette-empty strong {
  color: var(--text-primary);
  font-size: 0.88rem;
}

.organize-palette-empty span {
  font-size: 0.76rem;
  line-height: 1.5;
}

.organize-palette-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.organize-palette-item {
  --organize-file: #6366f1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid var(--organize-file); /* the colour of the file the page comes from */
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  cursor: grab;
}

.organize-palette-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.organize-palette-item.dragging {
  opacity: 0.4;
}

.organize-palette-number {
  flex-shrink: 0;
  width: 18px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: right;
}

.organize-palette-thumb {
  flex-shrink: 0;
  width: 34px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 3px;
  overflow: hidden;
}

.organize-palette-thumb canvas {
  max-width: 100%;
  max-height: 100%;
}

.organize-palette-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
}

.organize-sidebar-footer {
  display: flex;
  gap: 6px;
}

.organize-sidebar-footer .btn-primary {
  flex: 1;
}

.organize-sidebar-footer .btn-ghost {
  width: auto;
  flex-shrink: 0;
}

/* + at the top right of the page area */
.organize-toolbar .organize-hint {
  margin-right: 46px; /* room for the + button */
}

.organize-workspace .extract-middle-viewer {
  position: relative;
}

/* It sits in the toolbar row, at its right end, so it never covers a page */
.organize-add-fab {
  position: absolute;
  top: 7px;
  right: 14px;
  z-index: 60;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}

.organize-wide-btn {
  width: 100%;
  justify-content: center;
}

/* Files, at the bottom of the right panel */
.organize-files-area {
  gap: 8px;
}

.organize-files-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.organize-files-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.organize-files-area .organize-files-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
}

.organize-files-note {
  margin: 2px 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: left;
}

/* ==========================================================
   Organize PDF: one section per PDF in the page area
   ========================================================== */
.organize-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.organize-file-section {
  --organize-file: #6366f1;
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--organize-file); /* the PDF's colour */
  border-radius: var(--radius-md);
  background: rgba(17, 24, 39, 0.55);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.organize-file-section.drag-over {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
}

/* Header: name and page count on the left, select / save / close on the right; a line divides it from the pages */
.organize-file-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-color);
}

.organize-file-header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 700;
}

.organize-file-pages {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.organize-file-header-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.organize-file-section .organize-grid {
  padding: 14px;
}

.organize-file-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px 10px;
  border: 2px dashed rgba(99, 102, 241, 0.3);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}

/* The palette says what it is for */
.organize-palette-caption {
  flex-shrink: 0;
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(99, 102, 241, 0.08);
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-secondary);
  text-align: left;
}

.organize-palette-caption strong {
  color: var(--text-primary);
}

/* ==========================================================
   Organize PDF: tools panel
   ========================================================== */
.organize-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.organize-chip {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.organize-chip:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.14);
  color: var(--text-primary);
}

.organize-chip.active {
  background: #6366f1;
  border-color: #818cf8;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.organize-chip.active[data-organize-select="all"] {
  background: #4f46e5;
  border-color: #818cf8;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.45);
}

.organize-chip.active[data-organize-select="none"] {
  background: #e11d48;
  border-color: #fb7185;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(225, 29, 72, 0.45);
}

.organize-chip.active[data-organize-select="odd"] {
  background: #7c3aed;
  border-color: #a78bfa;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.45);
}

.organize-chip.active[data-organize-select="even"] {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.45);
}

.organize-chip.active:hover {
  filter: brightness(1.12);
  color: #ffffff;
}

.organize-tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Every tool button: icon and label on the left, the same height */
.organize-tool {
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 10px;
  white-space: nowrap;
}

.organize-tool.organize-wide-btn {
  justify-content: center;
}

.organize-tool:disabled {
  opacity: 0.45;
}

/* Organize PDF: Undo in the toolbar; Select all on each PDF header */
.organize-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 56px; /* room for the + button */
}

.organize-toolbar-right .organize-hint {
  display: none; /* its text is the tooltip of the page area now that Undo sits here */
}

.organize-toolbar-right .btn:disabled {
  opacity: 0.45;
}

/* Organize PDF: Undo Split Button with Dropdown */
.undo-split-btn {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.undo-split-btn .undo-main-btn {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
  padding-right: 8px;
}

.undo-split-btn .undo-arrow-btn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.undo-split-btn .undo-arrow-btn svg {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.undo-split-btn.open .undo-arrow-btn svg {
  transform: rotate(180deg);
}

.undo-split-btn.open .undo-main-btn,
.undo-split-btn.open .undo-arrow-btn {
  border-color: rgba(99, 102, 241, 0.5) !important;
  background: #374151;
}

.undo-split-btn .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.undo-dropdown-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  min-width: 220px;
  max-width: 300px;
  background: rgba(15, 20, 34, 0.98);
  background-image: linear-gradient(165deg, rgba(26, 34, 56, 0.97) 0%, rgba(12, 16, 28, 0.99) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.65), 0 0 15px rgba(99, 102, 241, 0.15);
  z-index: 1050;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: undoMenuFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes undoMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.undo-dropdown-menu.hidden {
  display: none !important;
}

.undo-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 3px;
}

.undo-dropdown-header .undo-count {
  color: #818cf8;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: normal;
}

.undo-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 250px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.undo-dropdown-list::-webkit-scrollbar {
  width: 5px;
}
.undo-dropdown-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.undo-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.undo-dropdown-item:hover,
.undo-dropdown-item.hover-highlight {
  background: rgba(99, 102, 241, 0.18);
  color: #ffffff;
}

.undo-dropdown-item .undo-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #818cf8;
}

.undo-dropdown-item .undo-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.undo-dropdown-item .undo-item-step {
  font-size: 0.68rem;
  color: var(--text-muted);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
}

.undo-dropdown-item:hover .undo-item-step,
.undo-dropdown-item.hover-highlight .undo-item-step {
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.3);
}

.undo-dropdown-empty {
  padding: 14px 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
}

.organize-select-all {
  gap: 5px;
  padding: 3px 9px;
  margin-right: 4px;
  font-size: 0.74rem;
  white-space: nowrap;
}

/* Organize PDF: the Files list can be put in another order by dragging its rows */
.organize-files-area .organize-file-row {
  cursor: grab;
}

.organize-file-row.dragging {
  opacity: 0.4;
}

/* Where the dragged PDF will land */
.organize-file-row.drop-before {
  box-shadow: 0 -3px 0 0 #6366f1;
}

.organize-file-row.drop-after {
  box-shadow: 0 3px 0 0 #6366f1;
}

.organize-file-grip {
  flex-shrink: 0;
  display: flex;
  color: var(--text-muted);
  opacity: 0.6;
}

/* Organize PDF: Clear All & Close, and the tools panel on a short screen */
.organize-clear-close {
  gap: 6px;
  white-space: nowrap;
}

/* On a short screen the tools would be cut off at the bottom: the whole panel scrolls instead */
#organizeToolsPanel {
  overflow-y: auto;
}

/* The box around the top controls is taken away, so the header row can stay at the top of the panel while
   everything under it scrolls */
#organizeToolsPanel .tools-panel-top-controls {
  display: contents;
}

#organizeToolsPanel .tools-panel-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg-secondary);
}

#organizeToolsPanel .tools-content-area {
  flex: none;
  overflow: visible;
}

/* Organize PDF: a tool that is switched on (Reverse order) is shown in colour */
.organize-tool.is-on {
  border-color: #6366f1;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(168, 85, 247, 0.3));
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.6), 0 0 14px rgba(99, 102, 241, 0.3);
}

/* Organize PDF: "File 1", "File 2", ... at the start of each PDF header, in that file's colour */
.organize-file-number {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Organize PDF header: the file's colour is a band that starts at the left edge, behind "File 1", and fades out
   before the file name. The name itself has one colour for every file. */
.organize-file-header {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--organize-file) 70%, transparent) 0,
    color-mix(in srgb, var(--organize-file) 45%, transparent) 70px,
    transparent 170px);
  border-top-left-radius: calc(var(--radius-md) - 2px);
}

.organize-file-number {
  padding: 2px 4px 2px 0;
  border-radius: 0;
  background: none;
  font-size: 0.8rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.organize-file-header strong {
  margin-left: 14px;
  color: var(--text-primary);
}

/* Organize PDF tools: three to a row, each a small tile with its icon above its name, so the panel stays short */
.organize-tool-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.organize-tool-grid-3 .organize-tool {
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 42px;
  padding: 4px 4px;
  font-size: 0.72rem;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
}

#organizeToolsPanel .organize-panel-group {
  gap: 6px;
  padding: 8px 12px;
}

#organizeToolsPanel .organize-wide-btn {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* ==========================================================
   Batch Rename PDFs
   ========================================================== */
.rename-container {
  max-width: 920px;
}

.rename-icon {
  background: rgba(45, 212, 191, 0.15);
  color: #2dd4bf;
}

.rename-body {
  text-align: left;
}

.rename-files-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: rgba(17, 24, 39, 0.6);
}

.rename-files-bar strong {
  font-size: 0.9rem;
}

.rename-files-actions,
.rename-sheet-buttons,
.rename-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rename-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 14px;
  margin-top: 18px;
}

.rename-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rename-field-wide {
  grid-column: 1 / -1;
}

.rename-field .range-field {
  flex: none;
  width: 100%;
  padding: 8px 10px;
  font-size: 0.85rem;
}

.rename-excel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rename-steps {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.rename-excel .pdf2office-file {
  margin-top: 0;
}

.rename-sheet-settings {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 14px;
  align-items: end;
}

.rename-match {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.rename-match .opt-label {
  margin: 0;
}

.rename-table-wrap {
  margin-top: 18px;
  max-height: 380px;
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.rename-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.rename-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 10px;
  background: #111827;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.rename-table th small {
  font-weight: 400;
  color: var(--text-muted);
}

.rename-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

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

.rename-col-num {
  width: 36px;
  color: var(--text-muted);
  text-align: right;
}

.rename-col-current {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.rename-table td:nth-child(3) {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rename-name-input {
  flex: 1;
  min-width: 120px;
  padding: 5px 8px;
  background: #0b1120;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: inherit;
}

.rename-name-input:focus {
  outline: none;
  border-color: #2dd4bf;
}

/* A name typed by hand, not made by the pattern or the list */
.rename-name-input.is-edited {
  border-color: rgba(45, 212, 191, 0.55);
}

.rename-ext {
  color: var(--text-muted);
}

.rename-col-status {
  white-space: nowrap;
}

.rename-state {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  font-size: 0.74rem;
}

.rename-state-ok {
  color: #34d399;
}

.rename-state-warn {
  color: #fbbf24;
}

.rename-remove {
  margin-left: 8px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.rename-remove:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.rename-actions {
  margin-top: 16px;
}

.rename-summary {
  margin: 0 0 10px;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.rename-action-buttons {
  justify-content: flex-end;
}

.rename-note {
  margin: 10px 0 0;
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: right;
}

@media (max-width: 720px) {
  .rename-options,
  .rename-sheet-settings {
    grid-template-columns: 1fr;
  }
}

/* Batch Rename: step-by-step help */
.rename-help {
  margin-top: 16px;
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: var(--radius-md);
  background: rgba(45, 212, 191, 0.06);
  text-align: left;
}

.rename-help summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: #5eead4;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.rename-help summary::-webkit-details-marker {
  display: none;
}

.rename-help summary::after {
  content: '▾';
  margin-left: auto;
  transition: transform 0.2s ease;
}

.rename-help:not([open]) summary::after {
  transform: rotate(-90deg);
}

.rename-help-body {
  padding: 0 16px 14px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.rename-help-body strong,
.rename-help-body em {
  color: var(--text-primary);
}

.rename-help-intro {
  margin: 0 0 8px;
}

.rename-help-steps {
  margin: 0 0 12px;
  padding-left: 20px;
}

.rename-help-steps li {
  margin-bottom: 6px;
}

.rename-help-steps ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.rename-help-body code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #5eead4;
  font-size: 0.8rem;
}

.rename-help-label {
  margin: 10px 0 6px;
  font-weight: 600;
  color: var(--text-primary);
}

.rename-help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.rename-help-table th,
.rename-help-table td {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}

.rename-help-table thead th {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

/* The little spreadsheet picture: row numbers and column letters in grey, like Excel */
.rename-help-sheet {
  width: auto;
}

.rename-help-sheet th {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-weight: 500;
  text-align: center;
}

.rename-help-sheet td {
  min-width: 150px;
  background: rgba(255, 255, 255, 0.02);
}

.rename-help-status {
  margin: 0;
  padding-left: 18px;
}

.rename-help-status li {
  margin-bottom: 4px;
}

.rename-help-status span {
  font-weight: 600;
  margin-right: 4px;
}

.rename-help-tip {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.8rem;
}

/* Batch Rename: the plain-choice name builder */
.rename-builder .range-field:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.rename-example {
  margin: 2px 0 0;
  padding: 9px 12px;
  border: 1px dashed rgba(45, 212, 191, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(45, 212, 191, 0.06);
  font-size: 0.85rem;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.rename-example strong {
  color: #5eead4;
}


/* Batch Rename: choices grouped in rows (Name, Number, Date, Style), each row with its own heading */
.rename-builder {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.rename-group {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: rgba(17, 24, 39, 0.45);
}

.rename-group-title {
  padding-top: 26px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5eead4;
}

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

/* The calendar button of the date box shows on the dark field */
.rename-builder input[type="date"] {
  color-scheme: dark;
}

.rename-field-hint {
  margin-top: 4px;
  font-size: 0.72rem;
  color: #fbbf24;
}

/* The result of the choices, on the real files */
.rename-example {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 0;
  padding: 10px 14px;
  border: 1px dashed rgba(45, 212, 191, 0.5);
  border-radius: var(--radius-md);
  background: rgba(45, 212, 191, 0.07);
  font-size: 0.86rem;
  color: var(--text-secondary);
  white-space: normal;
}

.rename-example-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5eead4;
}

.rename-example-row {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rename-example-row strong {
  color: var(--text-primary);
}

/* "More options": a checkbox opens an amber panel, so it reads as extra, optional changes */
.rename-more-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: var(--radius-md);
  background: rgba(251, 191, 36, 0.06);
  color: #fcd34d;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.rename-more-toggle input {
  width: 15px;
  height: 15px;
  accent-color: #f59e0b;
  cursor: pointer;
}

.rename-more-panel {
  padding: 12px 14px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: var(--radius-md);
  background: rgba(251, 191, 36, 0.05);
}

.rename-more-panel .opt-label {
  color: #fcd34d;
}

@media (max-width: 720px) {
  .rename-group {
    grid-template-columns: 1fr;
  }
  .rename-group-title {
    padding-top: 0;
  }
  .rename-group-fields {
    grid-template-columns: 1fr;
  }
}

/* Batch Rename: the question shown after a name is typed in the table */
.rename-prompt {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: #fcd34d;
  white-space: normal;
}

.rename-prompt button {
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.rename-prompt-keep {
  border: 1px solid rgba(45, 212, 191, 0.6);
  background: rgba(45, 212, 191, 0.15);
  color: #5eead4;
}

.rename-prompt-revert {
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

.rename-prompt-keep:hover,
.rename-prompt-revert:hover {
  filter: brightness(1.25);
}

.rename-more-note {
  margin: 0 0 12px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.rename-more-note strong,
.rename-more-note em {
  color: #fcd34d;
}

.rename-more-note.is-off {
  color: var(--text-muted);
}

.rename-more-panel .range-field:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The typed-name question takes its own line under the name box */
.rename-table td:nth-child(3) {
  flex-wrap: wrap;
}

.rename-table .rename-prompt {
  flex-basis: 100%;
  margin-top: 2px;
}

/* The optional file-name changes sit inside the Name row, under its boxes */
.rename-name-extra {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 720px) {
  .rename-name-extra {
    grid-column: 1;
  }
}

/* ==========================================================
   Cookie & terms notice (bottom of the screen until answered)
   ========================================================== */
.consent-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 3000;
  width: min(760px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  background: #111827;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

.consent-text {
  flex: 1;
  min-width: 0;
}

.consent-text strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-primary);
  font-size: 0.92rem;
}

.consent-text p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.consent-link {
  padding: 0;
  background: none;
  border: none;
  color: #a5b4fc;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.consent-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .consent-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .consent-actions {
    justify-content: flex-end;
  }
}

/* Public website: tools that need the local helper are not shown */
.is-hosted .helper-only,
.is-hosted .html2pdf-url-row,
.is-hosted .html2pdf-url-row + .html2pdf-url-hint,
.is-hosted .html2pdf-url-row + .html2pdf-url-hint + .html2pdf-or {
  display: none !important;
}

/* ==========================================================
   Translate PDF
   ========================================================== */
.translate-container {
  max-width: 980px;
}

.translate-icon {
  background: rgba(129, 140, 248, 0.15);
  color: #a5b4fc;
}

.translate-options {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 12px;
  margin-top: 16px;
  text-align: left;
}

.translate-options .range-field {
  width: 100%;
  flex: none;
  padding: 8px 10px;
  font-size: 0.88rem;
  font-family: inherit;
}

.translate-arrow {
  padding-bottom: 8px;
  font-size: 1.2rem;
  color: var(--text-muted);
}

.translate-result {
  margin-top: 22px;
  text-align: left;
}

.translate-result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.translate-pages {
  max-height: 520px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.translate-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  padding: 12px 16px 6px;
  border-bottom: 1px solid var(--border-color);
}

.translate-page:last-child {
  border-bottom: none;
}

.translate-page-title {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a5b4fc;
}

.translate-col p {
  margin: 0 0 10px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.translate-col-new p {
  color: var(--text-primary);
  font-family: "Nirmala UI", "Noto Sans Bengali", "Noto Sans Devanagari", var(--font-body, inherit), sans-serif;
  font-size: 0.92rem;
}

@media (max-width: 720px) {
  .translate-options,
  .translate-page {
    grid-template-columns: 1fr;
  }
  .translate-arrow {
    display: none;
  }
}

/* Translate PDF: the languages that can be used */
.translate-languages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  margin-bottom: 4px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.translate-languages-note {
  flex-basis: 100%;
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* Translate PDF: page picture, original text, translated text */
.translate-page {
  grid-template-columns: 96px 1fr 1fr;
  padding: 14px 16px 8px;
}

.translate-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Small and slightly soft on purpose: it only shows which page this is */
.translate-thumb img {
  width: 96px;
  min-height: 60px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: #ffffff;
  filter: blur(0.5px);
  opacity: 0.85;
}

.translate-col-title {
  margin-bottom: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.translate-col-new .translate-col-title {
  color: #a5b4fc;
}

.translate-col p.translate-wait {
  color: var(--text-muted);
  font-style: italic;
  font-family: inherit;
  font-size: 0.84rem;
}

.translate-col p.translate-wait.is-busy {
  color: #a5b4fc;
  animation: translateWait 1.2s ease-in-out infinite;
}

@keyframes translateWait {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.translate-cancel {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

.translate-cancel:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.translate-result-bar .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .translate-page {
    grid-template-columns: 1fr;
  }
  .translate-thumb {
    flex-direction: row;
  }
}

/* ==========================================================
   Side columns for ads (wide screens only)
   The page content is narrowed to sit between the two columns, so an ad never covers a tool.
   ========================================================== */
.ad-rail {
  display: none;
  position: fixed;
  top: calc(var(--header-height) + 14px);
  width: 160px;
  z-index: 40;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ad-rail-left {
  left: 10px;
}

.ad-rail-right {
  right: 10px;
}

.ad-rail-label {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ad-slot {
  width: 160px;
  min-height: 600px;
  max-height: calc(100vh - var(--header-height) - 50px);
  overflow: hidden;
}

.ad-slot-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.74rem;
  text-align: center;
}

body.has-ad-rails .ad-rail {
  display: flex;
}

/* 160 px column + 10 px to the edge + 14 px breathing room on each side */
body.has-ad-rails .app-main {
  padding-left: 184px;
  padding-right: 184px;
}

.site-footer-links a {
  text-decoration: none;
}