/* ==========================================================================
   PDF METRIX PRO SUITE - HIGH-FIDELITY DESIGN SYSTEM (BLUEPRINT GRID)
   ========================================================================== */

:root {
  --paper: #F3F6F8;
  --paper-deep: #EAEFF3;
  --line: #D8E0E7;
  --ink: #0F1A2B;
  --ink-soft: #546074;
  --ink-faint: #8894A3;
  --navy: #1E3A5F;
  --navy-soft: #2E5580;
  --stamp: #b8390e;
  --stamp-soft: #d94a1b;
  --forest: #2F6844;
  --card: #FFFFFF;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow: 0 1px 2px rgba(15, 26, 43, 0.04), 0 8px 24px rgba(15, 26, 43, 0.05);
  --shadow-hover: 0 2px 4px rgba(15, 26, 43, 0.06), 0 16px 32px rgba(15, 26, 43, 0.09);
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    var(--paper);
  background-size: 48px 48px, 48px 48px, 100% 100%;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.mono {
  font-family: 'IBM Plex Mono', monospace;
}

.hidden,
[hidden] {
  display: none !important;
}

/* Header & Brand Navbar */
header {
  position: sticky;
  top: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px 40px;
  background: rgba(243, 246, 248, 0.82);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 8px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: linear-gradient(155deg, var(--navy), var(--ink));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.brand-mark svg {
  width: 19px;
  height: 19px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-text .name {
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.01em;
}

.brand-text .name span {
  color: var(--stamp);
}

.brand-text .sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-top: 1px;
}

.search-wrap {
  flex: 1;
  max-width: 460px;
  position: relative;
}

.search-wrap input {
  width: 100%;
  padding: 10px 44px 10px 38px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--card);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.search-wrap input::placeholder {
  color: var(--ink-faint);
}

.search-wrap input:focus {
  border-color: var(--navy-soft);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.10);
}

.search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--ink-faint);
  pointer-events: none;
}

.kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
  background: var(--paper-deep);
}

nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s;
}

.nav-btn svg {
  width: 14px;
  height: 14px;
}

.nav-btn:hover {
  background: var(--paper-deep);
  color: var(--ink);
}

.nav-btn.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.nav-btn .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  opacity: .7;
}

@media (max-width: 980px) {
  header {
    flex-wrap: wrap;
    padding: 14px 20px;
    gap: 12px;
  }

  .search-wrap {
    order: 3;
    max-width: none;
    flex-basis: 100%;
  }

  nav {
    overflow-x: auto;
    gap: 6px;
  }
}

/* Hero Section */
.hero {
  max-width: 100%;
  padding: 32px 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(38px, 5.4vw, 66px);
  line-height: 1.03;
  letter-spacing: -0.015em;
  margin: 0 auto 12px;
  max-width: 25ch;
}

h1 em {
  font-style: italic;
  font-weight: 600;
  color: var(--stamp);
  text-decoration: underline;
  text-decoration-color: rgba(184, 57, 14, 0.35);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

.hero p.lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 960px;
  margin: 0 auto 24px;
}

.ticket {
  display: flex;
  background: var(--ink);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px -12px rgba(15, 26, 43, 0.35);
  max-width: 860px;
  margin: 0 auto;
}

.ticket-stat {
  flex: 1;
  padding: 20px 24px;
  position: relative;
  border-right: 1px dashed rgba(255, 255, 255, 0.16);
}

.ticket-stat:last-child {
  border-right: none;
}

.ticket-stat .num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
}

.ticket-stat .lbl {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.mobile-menu-btn {
  display: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mobile-menu-btn:hover {
  background: var(--paper-deep);
  border-color: var(--navy-soft);
}

.mobile-dropdown-menu {
  position: absolute;
  top: 46px;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 10px;
  min-width: 140px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.dark .mobile-dropdown-menu {
  background: #18263E;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.mobile-dropdown-menu.hidden {
  display: none !important;
}

.mobile-dropdown-menu .auth-unauth-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.mobile-dropdown-menu .btn-nav-login {
  background: transparent;
  color: #0F172A;
  border: none;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  width: 100%;
}

body.dark .mobile-dropdown-menu .btn-nav-login {
  color: #F8FAFC;
}

.mobile-dropdown-menu .btn-nav-signup {
  background: #0F172A;
  color: #FFFFFF;
  border: none;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

body.dark .mobile-dropdown-menu .btn-nav-signup {
  background: #6366F1;
  color: #FFFFFF;
}

body.dark header {
  background: rgba(15, 26, 43, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark .brand-text .name {
  color: #F8FAFC !important;
}

body.dark .brand-text .name span {
  color: #FF5252 !important;
}

body.dark .brand-text .sub {
  color: #94A3B8 !important;
}

body.dark .mobile-menu-btn {
  background: #1E293B !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

body.dark .mobile-menu-btn:hover {
  background: #334155 !important;
}

body.dark .search-wrap input {
  background: #1E293B !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.dark .search-wrap input::placeholder {
  color: #94A3B8 !important;
}

body.dark .search-icon {
  color: #94A3B8 !important;
}

body.dark nav#navTabs .nav-btn {
  background: #1E293B !important;
  color: #CBD5E1 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.dark nav#navTabs .nav-btn.active {
  background: #4F46E5 !important;
  color: #FFFFFF !important;
  border-color: #6366F1 !important;
}

.ticket-stat svg {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 15px;
  height: 15px;
  color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
  header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background: var(--paper-translucent, rgba(248, 250, 252, 0.95)) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .brand {
    order: 1 !important;
    margin-bottom: 0 !important;
    justify-content: flex-start !important;
  }

  .auth-header-wrap {
    order: 2 !important;
    position: absolute !important;
    right: 16px !important;
    top: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .auth-header-wrap > #auth-unauth-btns {
    display: none !important;
  }

  .mobile-menu-btn {
    display: inline-flex !important;
  }

  .search-wrap {
    order: 3 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 10px 0 0 0 !important;
  }

  .search-wrap input {
    width: 100% !important;
    border-radius: 12px !important;
    padding: 10px 14px 10px 38px !important;
    font-size: 14px !important;
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
  }

  nav#navTabs {
    order: 4 !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
    width: 100% !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  nav#navTabs::-webkit-scrollbar {
    display: none !important;
  }

  nav#navTabs .nav-btn {
    border-radius: 20px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--line) !important;
    background: var(--card) !important;
    color: var(--ink-soft) !important;
  }

  nav#navTabs .nav-btn.active {
    background: var(--ink, #0F172A) !important;
    color: #FFFFFF !important;
    border-color: var(--ink, #0F172A) !important;
  }

  /* Mobile Dark Mode Specific Fixes */
  [data-theme="dark"] header,
  body.dark header {
    background: rgba(15, 26, 43, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  [data-theme="dark"] .mobile-menu-btn,
  body.dark .mobile-menu-btn {
    background: #1E293B !important;
    color: #F8FAFC !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
  }

  [data-theme="dark"] .mobile-menu-btn i,
  body.dark .mobile-menu-btn i {
    color: #F8FAFC !important;
  }

  [data-theme="dark"] nav#navTabs .nav-btn,
  body.dark nav#navTabs .nav-btn {
    background: #1E293B !important;
    color: #CBD5E1 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  [data-theme="dark"] nav#navTabs .nav-btn svg,
  body.dark nav#navTabs .nav-btn svg {
    stroke: #CBD5E1 !important;
  }

  [data-theme="dark"] nav#navTabs .nav-btn.active,
  body.dark nav#navTabs .nav-btn.active {
    background: #0584c7 !important;
    color: #FFFFFF !important;
    border-color: #0584c7 !important;
  }

  [data-theme="dark"] nav#navTabs .nav-btn.active svg,
  body.dark nav#navTabs .nav-btn.active svg {
    stroke: #FFFFFF !important;
  }

  [data-theme="dark"] nav#navTabs .nav-btn.active .count,
  body.dark nav#navTabs .nav-btn.active .count {
    color: rgba(255, 255, 255, 0.8) !important;
  }

  [data-theme="dark"] .search-wrap input,
  body.dark .search-wrap input {
    background: #1E293B !important;
    color: #F8FAFC !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  [data-theme="dark"] .search-wrap input::placeholder,
  body.dark .search-wrap input::placeholder {
    color: #94A3B8 !important;
  }

  [data-theme="dark"] .search-icon,
  body.dark .search-icon {
    color: #94A3B8 !important;
    stroke: #94A3B8 !important;
  }

  .hero {
    padding: 24px 16px 16px !important;
  }

  .hero p.lede {
    display: none !important;
  }

  .ticket {
    flex-direction: row !important;
    max-width: 100%;
    width: 100%;
    border-radius: 10px;
  }

  .ticket-stat {
    padding: 10px 8px;
    border-right: 1px dashed rgba(255, 255, 255, 0.16);
    border-bottom: none;
  }

  .ticket-stat:last-child {
    border-right: none;
  }

  .ticket-stat .num {
    font-size: 13px !important;
  }

  .ticket-stat .lbl {
    font-size: 8px !important;
    margin-top: 2px;
  }

  .ticket-stat svg {
    display: none !important;
  }

  /* Suite Container spacing */
  .suite {
    padding: 12px 16px 40px !important;
  }

  .suite-head {
    margin: 16px 0 12px !important;
  }

  .suite-head h2 {
    font-size: 20px !important;
  }

  /* Show exactly 2 tools per row on mobile */
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .card {
    padding: 14px 12px !important;
    min-height: 150px !important;
    height: 100% !important;
    border-radius: 10px !important;
    display: flex;
    flex-direction: column !important;
    justify-content: space-between !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .card.hidden,
  .card.hidden-tool {
    display: none !important;
  }

  .card h3 {
    font-size: 13px !important;
    margin-bottom: 4px !important;
    line-height: 1.25 !important;
  }

  .card p {
    font-size: 11px !important;
    line-height: 1.35 !important;
    flex: 1 1 auto !important;
  }

  .card .go {
    margin-top: auto !important;
    font-size: 11px !important;
  }

  .card .icon-sq {
    width: 28px !important;
    height: 28px !important;
    margin-bottom: 8px !important;
    border-radius: 6px !important;
  }

  .card .icon-sq svg {
    width: 14px !important;
    height: 14px !important;
  }

  .stamp-badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }

  /* Workspace Mobile Responsive Overhaul */
  .workspace-overlay,
  #edit-pdf-workspace,
  #result-container,
  .info-page-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 10050 !important;
    padding: 0 !important;
  }

  .workspace-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .modal-header {
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }

  .modal-title {
    font-size: 16px !important;
  }

  .modal-subtitle {
    font-size: 11px !important;
  }

  .modal-body {
    padding: 8px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .upload-zone-wrapper {
    padding: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .drop-zone {
    padding: 32px 16px !important;
    border-width: 2px !important;
  }

  .upload-illustration {
    width: 52px !important;
    height: 52px !important;
    font-size: 20px !important;
    margin: 0 auto 12px !important;
  }


  .active-workspace:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .workspace-preview-panel {
    padding: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .panel-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .panel-title {
    font-size: 13px !important;
  }

  .panel-actions {
    display: flex !important;
    gap: 6px !important;
  }

  .pages-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .page-thumb-wrapper {
    width: 100% !important;
    height: 105px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  .page-card-footer {
    font-size: 10px !important;
    margin-top: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-card-merge-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    width: 100% !important;
  }

  .page-card-file-name {
    font-size: 10.5px !important;
    width: 100% !important;
  }

  .page-card-file-actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }

  @media (max-width: 480px) {
    .pages-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 8px !important;
    }

    .page-thumb-wrapper {
      height: 100px !important;
    }
  }

  .workspace-controls-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px !important;
    margin-top: 4px !important;
    overflow-x: hidden !important;
  }

  #process-pdf-btn {
    width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
  }

  /* Compact Split PDF Mobile Controls Overhaul */
  .split-header-title {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  .split-top-tabs {
    margin-bottom: 12px !important;
    border-radius: 10px !important;
  }

  .split-top-tab {
    padding: 8px 4px !important;
    gap: 4px !important;
    font-size: 12px !important;
  }

  .split-tab-icon {
    font-size: 16px !important;
  }

  .split-section-label {
    font-size: 12.5px !important;
    margin-bottom: 6px !important;
  }

  .split-submode-group {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .split-submode-btn {
    padding: 8px 6px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
  }

  .split-range-rows {
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  .split-range-row {
    padding: 6px 8px !important;
    border-radius: 10px !important;
  }

  .split-add-range-btn {
    margin: 4px auto 12px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  .split-checkbox-wrap {
    margin-top: 8px !important;
    font-size: 12px !important;
    gap: 8px !important;
  }

  .split-checkbox-wrap input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
  }

  .hidden {
    display: none !important;
  }

  .compare-multi-viewer {
    height: 420px !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(260px, 85vw) !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
  }

  .single-doc-paper-wrapper {
    height: auto !important;
    max-height: 60vh !important;
    max-width: 100% !important;
    width: fit-content !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    margin: 0 auto !important;
  }

  .single-doc-live-canvas {
    max-width: 100% !important;
    max-height: 60vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  .panel-header {
    padding: 6px 10px !important;
    margin-bottom: 4px !important;
  }

  .panel-title {
    font-size: 11.5px !important;
  }

  .panel-actions .btn-sm {
    padding: 3px 6px !important;
    font-size: 10.5px !important;
  }

  .single-doc-toolbar {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 4px 8px !important;
    margin-bottom: 4px !important;
    justify-content: space-between !important;
  }

  .single-doc-page-nav {
    gap: 6px !important;
  }

  .single-doc-page-nav .btn-sm {
    padding: 3px 6px !important;
    font-size: 11px !important;
  }

  .single-doc-page-indicator {
    font-size: 11px !important;
  }

  .single-doc-tool-badge {
    display: none !important;
  }

  .result-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 24px !important;
    box-sizing: border-box !important;
  }

  .result-actions #download-result-btn,
  .result-actions #start-over-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}

/* Suite Grid */
.suite {
  max-width: 100%;
  padding: 16px 40px 40px;
}

.suite-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 28px 0 16px;
  flex-wrap: wrap;
}

.suite-head .titles .kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--stamp);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

.suite-head h2 {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.suite-head .tool-count-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--stamp);
  padding: 4px 12px;
  border: 1.5px dashed var(--line);
  border-radius: 6px;
  background: var(--paper-deep);
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  align-items: stretch;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

.card {
  --tone: #546074;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex;
  flex-direction: column;
  min-height: 222px;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--tone) 35%, var(--line));
}

.card.hidden {
  display: none !important;
}

.icon-sq {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--tone) 15%, white);
  color: var(--tone);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 18%, transparent);
}

.icon-sq svg {
  width: 21px;
  height: 21px;
}

.stamp-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1.5px dashed var(--tone);
  text-transform: uppercase;
  transform: rotate(4deg);
  background: color-mix(in srgb, var(--tone) 8%, white);
  color: var(--tone);
}

.card h3 {
  font-size: 16.5px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}

.card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}

.card .go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tone);
}

.card .go svg {
  width: 13px;
  height: 13px;
  transition: transform .15s;
}

.card:hover .go svg {
  transform: translateX(3px);
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 70px 20px;
  color: var(--ink-faint);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
}

/* ── Ultra-Smooth Flawless Standalone Page Navigation ── */
body.tool-page-open {
  overflow: hidden !important;
}

@keyframes smoothPageEntrance {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes smoothPageExit {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
}

.workspace-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 500;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  animation: smoothPageEntrance 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.workspace-overlay.slide-out {
  animation: smoothPageExit 0.18s cubic-bezier(0.5, 0, 1, 0.5) forwards;
}

.workspace-modal {
  width: 100%;
  height: 100%;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.modal-header {
  padding: 14px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.modal-tool-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.modal-text-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.modal-title {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-subtitle {
  font-size: 12px;
  color: #64748B;
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.close-modal-btn {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  font-size: 13px;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.close-modal-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #94A3B8;
  box-shadow: 0 2px 6px rgba(15, 26, 43, 0.08);
}

.modal-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    var(--paper);
  background-size: 48px 48px, 48px 48px, 100% 100%;
}

/* When Edit PDF is active, modal-body has no padding and is flex container */
.modal-body:has(#edit-pdf-workspace-layout:not(.hidden)) {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #1E293B;
}

/* Also strip padding from active-workspace when edit-pdf is live */
.modal-body:has(#edit-pdf-workspace-layout:not(.hidden)) .active-workspace {
  padding: 0;
  margin: 0;
  flex: 1;
  min-height: 0;
}

/* Dropzones & Upload Handlers */
.drop-zone {
  position: relative;
  border: 2.5px dashed var(--stamp);
  border-radius: var(--radius-lg);
  padding: 80px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: var(--transition-fast);
}

.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--navy-soft);
  background: rgba(30, 58, 95, 0.05);
}

.drop-zone .drop-zone-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

.upload-illustration {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 16px;
  box-shadow: var(--shadow);
}

/* Grid Workspace & Preview Panels */
.active-workspace {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  min-height: 480px;
}

/* When Edit PDF workspace is active, override grid to be a single flex child */
.active-workspace:has(#edit-pdf-workspace-layout:not(.hidden)) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  gap: 0;
}

.workspace-preview-panel {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.panel-title {
  font-weight: 700;
  font-size: 14px;
}

.panel-actions {
  display: flex;
  gap: 8px;
}

.pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 12px;
  width: 100%;
  box-sizing: border-box;
}

.split-cut-line {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  background: #F1F5F9;
  border: 1px dashed #94A3B8;
  border-radius: var(--radius-sm);
  color: #334155;
  font-weight: 800;
  font-size: 11px;
  margin: 6px 0;
}

.page-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: grab;
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

.page-card.dragging {
  opacity: 0.4;
  transform: scale(0.96);
}

.page-card.drag-over {
  border-color: var(--stamp);
  transform: scale(1.03);
}

.page-thumb-wrapper {
  position: relative;
  width: 100%;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.page-thumb-canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.page-card-footer {
  margin-top: 6px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-soft);
  box-sizing: border-box;
}

.page-card-merge-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 4px;
  box-sizing: border-box;
}

.page-card-file-name {
  font-weight: 700;
  color: #0F172A;
  font-size: 11.5px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-card-file-actions {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-shrink: 0;
}

.page-card-file-actions button {
  border: 1px solid #CBD5E1;
  background: #fff;
  color: #475569;
  border-radius: 4px;
  padding: 2px 5px;
  cursor: pointer;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.page-card-file-actions button:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #94A3B8;
}

.page-card-file-actions .page-delete-btn {
  border: none;
  background: transparent;
  color: #64748B;
  padding: 2px 4px;
  font-size: 12px;
}

.page-card-file-actions .page-delete-btn:hover {
  color: #EF4444;
  background: transparent;
}

.page-card {
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), opacity 0.2s ease;
}

.page-card.card-swapping {
  transform: scale(0.97);
  opacity: 0.9;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), opacity 0.2s ease;
}

/* Compare Multi-PDF Viewer Styles */
.compare-multi-viewer {
  grid-column: 1 / -1 !important;
  display: grid;
  gap: 16px;
  width: 100% !important;
  max-width: 100% !important;
  height: 580px;
  overflow-x: auto;
  box-sizing: border-box !important;
  margin-top: 4px;
}

.compare-column {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
  width: 100%;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.compare-column-header {
  padding: 10px 12px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.compare-file-name {
  font-weight: 700;
  font-size: 12px;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compare-page-badge {
  background: #E2E8F0;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  flex-shrink: 0;
}

.compare-scroll-box {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background: #F1F5F9;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.compare-pages-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.compare-page-card {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.compare-hd-canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.compare-page-num-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  margin-top: 4px;
  text-align: center;
}

/* Single Document Live Interactive Viewport */
.pages-grid .single-doc-live-viewport {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.single-doc-live-viewport {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 14px;
  margin-top: 4px;
}

.single-doc-toolbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 8px 14px;
  box-sizing: border-box;
}

.single-doc-page-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.single-doc-page-indicator {
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
}

.single-doc-tool-badge {
  font-size: 12px;
  font-weight: 700;
  color: #0369A1;
  background: #E0F2FE;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #BAE6FD;
}

.btn-rotate-option {
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.btn-rotate-option:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}
.btn-rotate-option:active {
  transform: scale(0.95) !important;
}
.btn-rotate-option.active {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25) !important;
}

#btn-crop-single-page, #btn-crop-all-pages {
  transition: all 0.2s ease !important;
  border: 1.5px solid #CBD5E1 !important;
  background: #F8FAFC !important;
  color: #475569 !important;
  border-radius: 8px !important;
}

#btn-crop-single-page:hover, #btn-crop-all-pages:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

#btn-crop-single-page.active, #btn-crop-all-pages.active {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25) !important;
  font-weight: 800 !important;
}

.single-doc-paper-wrapper {
  position: relative;
  max-width: 100%;
  max-height: 72vh;
  width: fit-content;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  box-sizing: border-box;
  background: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.crop-mode-viewport {
  width: 100% !important;
  max-width: 100% !important;
}

.crop-mode-viewport .single-doc-paper-wrapper {
  max-width: 100% !important;
  max-height: 72vh !important;
  width: fit-content !important;
  height: auto !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22) !important;
}

.single-doc-live-canvas {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.single-doc-live-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Control Panels & Sidebars */
.workspace-controls-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  box-shadow: var(--shadow);
  height: fit-content;
  align-self: start;
}

.controls-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--stamp);
  padding-bottom: 6px;
  margin-bottom: 16px;
}

.controls-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.reset-all-link {
  font-size: 12px;
  color: var(--stamp);
  cursor: pointer;
  font-weight: 600;
}

.controls-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 13.5px;
  outline: none;
}

.form-control:focus {
  border-color: var(--navy-soft);
  background: #fff;
}

.metrix-info-box {
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  color: #0369a1;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  display: flex;
  gap: 6px;
}

.metrix-action-card-btn {
  width: 100%;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.metrix-action-card-btn:hover {
  background: var(--paper-deep);
}

/* Draggable Element Overlays */
.draggable-placed-element {
  position: absolute;
  border: 2px dashed var(--stamp);
  background: rgba(184, 57, 14, 0.08);
  padding: 4px 8px;
  cursor: move;
  font-size: 11px;
  font-weight: 700;
  color: var(--stamp);
  z-index: 50;
}

.redaction-blackout-box {
  position: absolute;
  background: #000;
  border: 1px dashed #ef4444;
  cursor: move;
  z-index: 50;
}

.result-preview-viewport {
  width: 100%;
  max-width: 680px;
  min-height: 280px;
  max-height: 420px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin: 16px auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}

/* Loaders & Results */
.processing-loader {
  padding: 40px;
  text-align: center;
}

.loader-spinner {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner-ring {
  position: absolute;
  inset: 0;
  border: 4px solid var(--line);
  border-top-color: var(--stamp);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-icon {
  font-size: 24px;
  color: var(--stamp);
}

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

.progress-bar-container {
  width: 100%;
  max-width: 320px;
  height: 6px;
  background: var(--paper-deep);
  border-radius: 10px;
  margin: 16px auto 0;
  overflow: hidden;
}

.progress-bar-fill {
  width: 0%;
  height: 100%;
  background: var(--stamp);
  transition: width 0.3s ease;
}

.result-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 600;
  background-color: #F3F6F9;
  background-image: 
    linear-gradient(to right, rgba(203, 213, 225, 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(203, 213, 225, 0.55) 1px, transparent 1px);
  background-size: 36px 36px;
  padding: 0 0 40px 0;
  text-align: center;
  overflow-y: auto;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  animation: smoothPageEntrance 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.result-header-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 610;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  padding: 12px 24px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.result-body-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result-success-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  color: #059669;
  border-radius: 20px;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 12px;
}

.result-stats-card {
  width: 100%;
  max-width: 440px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin: 16px auto;
  text-align: left;
  font-size: 13.5px;
}

.result-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* Buttons styling */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  border: none;
}

.btn-primary,
.btn-accent {
  background: var(--ink);
  color: #fff;
}

.btn-primary:hover,
.btn-accent:hover {
  background: var(--navy);
}

.btn-ghost {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--paper);
}

.btn-img-format {
  background: #FFFFFF;
  border: 2px solid #CBD5E1 !important;
  color: #64748B !important;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-img-format:hover {
  border-color: #0284C7 !important;
  color: #0284C7 !important;
}

.btn-img-format.active {
  background: #EFF6FF !important;
  border-color: #0284C7 !important;
  color: #0284C7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

.btn-block {
  width: 100%;
}

/* Toast */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 20px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-hover);
}

/* ── 4-Card Single Line Showcase Section (#0f1a2b Dark Navy Background) ─── */

.showcase-cards-section {
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    #0f1a2b !important;
  background-size: 48px 48px, 48px 48px, 100% 100%;
  padding: 65px 40px 65px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 100%;
  width: 100%;
}

.showcase-container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.showcase-card {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  padding: 26px 22px 28px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.showcase-card:hover {
  transform: translateY(-5px);
  border-color: #0f1a2b;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

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

.card-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #F1F5F9;
  color: #334155;
}

.dashed-pill-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1.5px dashed #334155;
  color: #334155;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-body h3 {
  font-size: 17px;
  font-weight: 800;
  color: #0f1a2b;
  margin: 0 0 8px 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.card-body p {
  font-size: 13.5px;
  line-height: 1.55;
  color: #334155;
  margin: 0 0 18px 0;
  flex: 1;
  font-weight: 500;
}

.card-action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  text-decoration: none;
  transition: gap 0.2s ease, opacity 0.2s ease;
}

.card-action-link i {
  font-size: 13px;
}

.showcase-card:hover .card-action-link {
  gap: 10px;
}

/* Theme Uniform Overrides (#334155 Dark Grey Accent) */
.theme-coral .card-icon-box,
.theme-emerald .card-icon-box,
.theme-purple .card-icon-box,
.theme-gold .card-icon-box {
  background: #F1F5F9;
  color: #334155;
}

.theme-coral .dashed-pill-tag,
.theme-emerald .dashed-pill-tag,
.theme-purple .dashed-pill-tag,
.theme-gold .dashed-pill-tag {
  border-color: #334155;
  color: #334155;
}

.theme-coral .card-action-link,
.theme-emerald .card-action-link,
.theme-purple .card-action-link,
.theme-gold .card-action-link {
  color: #334155;
}

.theme-coral:hover,
.theme-emerald:hover,
.theme-purple:hover,
.theme-gold:hover {
  border-color: #334155;
}

@media (max-width: 768px) {
  .showcase-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ── Article Section below 4 Cards (Full Width 40px Side Padding) ────── */

.about-article-section {
  padding: 40px 40px 80px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    var(--paper);
  background-size: 48px 48px, 48px 48px, 100% 100%;
  max-width: 100%;
  width: 100%;
}

.article-container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.article-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.fbrand-icon {
  font-size: 36px;
  color: #b8390e;
}

.article-brand-title {
  font-size: 36px;
  font-weight: 900;
  color: #0f1a2b;
  margin: 0;
  letter-spacing: -0.02em;
}

.article-brand-title span {
  color: #b8390e;
}

.article-lead-paragraph {
  font-size: 18px;
  line-height: 1.7;
  color: #334155;
  font-weight: 500;
  max-width: 820px;
  margin: 0 0 32px 0;
}

.article-status-card {
  background: #FFFFFF;
  border: 1.5px solid #D8E0E7;
  border-radius: 16px;
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(15, 26, 43, 0.04);
  width: 100%;
  max-width: 360px;
  text-align: left;
  margin-bottom: 60px;
}

.status-indicator {
  font-size: 14px;
  font-weight: 800;
  color: #b8390e;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.status-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b8390e;
  box-shadow: 0 0 10px #b8390e;
  animation: pulseGlow 1.8s infinite;
}

.status-detail {
  font-size: 13px;
  color: #0f1a2b;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.status-detail i {
  color: #b8390e;
  font-size: 14px;
  width: 16px;
}

/* Extended Article Grid */
.article-extended-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 50px;
  text-align: left;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* Pure Editorial Article Manner (Full Width & Dark Legible Text) */
.prose-article {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.article-section-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.article-heading {
  font-size: 20px;
  font-weight: 800;
  color: #0f1a2b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.article-heading.center-title {
  justify-content: center;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 8px;
}

.text-rust {
  color: #334155;
}

.article-text {
  font-size: 15.5px;
  line-height: 1.75;
  color: #334155;
  margin: 0;
  font-weight: 500;
}

.suite-overview-block {
  margin-top: 16px;
  padding-top: 36px;
  border-top: 1.5px dashed #D8E0E7;
}

.article-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 20px;
}

.article-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.col-heading {
  font-size: 16px;
  font-weight: 800;
  color: #0f1a2b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 850px) {
  .article-columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ── Rich Multi-Column App Footer (#F3F6F8 Light Theme) ───────────────────── */

footer,
.app-footer,
footer.app-footer {
  background: #F3F6F8 !important;
  background-color: #F3F6F8 !important;
  color: #0F1A2B !important;
  padding: 60px 40px 30px !important;
  border-top: 2px solid #D8E0E7 !important;
  box-sizing: border-box !important;
}

/* Supported Formats Bar */
.footer-formats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 40px;
  padding: 12px 28px;
  background: #FFFFFF !important;
  border: 1.5px solid #D8E0E7 !important;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(15, 26, 43, 0.04);
  flex-wrap: wrap;
}

.formats-label {
  font-size: 13px;
  font-weight: 800;
  color: #0F1A2B !important;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.formats-label i {
  color: #b8390e !important;
  font-size: 14px;
}

.format-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.format-pill {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  background: #b8390e !important;
  color: #FFFFFF !important;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid #9c2e0b !important;
  box-shadow: 0 2px 8px rgba(184, 57, 14, 0.25);
  letter-spacing: 0.02em;
}

/* 4 Column Grid */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto 40px;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-col-brand .fbrand {
  font-size: 22px;
  font-weight: 900;
  color: #0F1A2B !important;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.footer-col-brand .fbrand i {
  color: #b8390e !important;
}

.footer-col-brand .fbrand span {
  color: #b8390e !important;
}

.footer-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: #93989f !important;
  margin-bottom: 18px;
  font-weight: 500;
}

.footer-title {
  font-size: 14.5px !important;
  font-weight: 900 !important;
  color: #0F1A2B !important;
  margin-bottom: 18px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid #b8390e !important;
  padding-bottom: 6px;
}

.footer-title i {
  color: #b8390e !important;
  font-size: 14px;
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-list a {
  color: #0F1A2B !important;
  font-size: 13.5px !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  font-weight: 600;
}

.footer-list a:hover {
  color: #b8390e !important;
  transform: translateX(5px) !important;
}

.footer-list a i {
  font-size: 12px;
  color: #b8390e !important;
  width: 14px;
}

.footer-blog-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  background: #FFFFFF !important;
  border: 1.5px solid #D8E0E7 !important;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(15, 26, 43, 0.04);
}

.footer-blog-card:hover {
  background: #FFFFFF !important;
  border-color: #b8390e !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(184, 57, 14, 0.15);
}

.footer-blog-card .blog-date {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #b8390e !important;
  display: flex;
  align-items: center;
  gap: 5px;
}

.footer-blog-card .blog-heading {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #0F1A2B !important;
  line-height: 1.4;
}

/* Horizontal Company Links Bar */
.footer-company-bar {
  max-width: 1280px;
  margin: 0 auto 28px;
  padding-top: 24px;
  border-top: 1.5px solid #D8E0E7;
  display: flex;
  justify-content: center;
}

.footer-company-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
}

.footer-company-links a {
  color: #0F1A2B !important;
  font-size: 13.5px !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 10px;
  background: #FFFFFF !important;
  border: 1.5px solid #D8E0E7 !important;
  box-shadow: 0 2px 8px rgba(15, 26, 43, 0.03);
}

.footer-company-links a:hover {
  color: #b8390e !important;
  background: #FFFFFF !important;
  border-color: #b8390e !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(184, 57, 14, 0.15);
}

.footer-company-links a i {
  font-size: 13px;
  color: #b8390e !important;
  width: 14px;
}

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1.5px solid #D8E0E7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.footer-bottom .fsub {
  font-size: 13px !important;
  color: #334155 !important;
  font-weight: 600;
}

.footer-bottom .fprivacy {
  font-size: 13px !important;
  color: #334155 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800 !important;
}

.footer-bottom .fprivacy i {
  color: #334155 !important;
}

@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .footer-top-ribbon {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .footer-top-ribbon {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .app-footer {
    padding: 36px 20px 24px;
  }
}

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

/* ── Information & Blog Modal Box ────────────────────────────────────────── */

.info-modal-box {
  background: #FFFFFF;
  border-radius: 16px;
  width: 90%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35);
  overflow: hidden;
  animation: modalPop 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.info-modal-header {
  padding: 16px 24px;
  background: #0F172A;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.info-modal-header h3 {
  font-size: 17px;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
}

.btn-close-modal {
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.btn-close-modal:hover {
  color: #FFFFFF;
  background: #334155;
}

.info-modal-body {
  padding: 24px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.65;
  color: #334155;
}

.info-article h3 {
  font-size: 20px;
  font-weight: 800;
  color: #0F172A;
  margin-top: 0;
  margin-bottom: 8px;
}

.info-article h4 {
  font-size: 15px;
  font-weight: 700;
  color: #1E293B;
  margin-top: 16px;
  margin-bottom: 6px;
}

.info-article p {
  margin-bottom: 12px;
}

.info-highlight-box {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 16px 0;
}

.info-highlight-box i {
  font-size: 20px;
  color: #2563EB;
  margin-top: 2px;
}

.info-highlight-box strong {
  color: #1E40AF;
  font-size: 14px;
  display: block;
  margin-bottom: 2px;
}

.info-highlight-box p {
  margin: 0;
  font-size: 13px;
  color: #1E3A8A;
}

@keyframes modalPop {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   SPLIT PDF CUSTOM STYLES (Matching Reference Screenshots 1 & 2)
   ========================================================================== */
.split-header-title {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 20px;
}

.split-top-tabs {
  display: grid;
  grid-template-cols: repeat(3, 1fr);
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
  margin-bottom: 24px;
}

.split-top-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 8px;
  background: #FFFFFF;
  border: none;
  border-right: 1px solid #E2E8F0;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748B;
  font-size: 13.5px;
  font-weight: 600;
}

.split-top-tab:last-child {
  border-right: none;
}

.split-top-tab.active {
  color: #0F172A;
  font-weight: 700;
  background: #FFFFFF;
}

.split-tab-check {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #10B981;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.split-tab-icon {
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.split-crown-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #F59E0B;
  color: #FFFFFF;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.split-section-label {
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 12px;
}

.split-submode-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.split-submode-btn {
  padding: 14px 10px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.split-submode-btn.active {
  background: #FFFFFF;
  border: 2px solid #475569;
  color: #1E293B;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(71, 85, 105, 0.12);
}

.split-range-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.split-range-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.split-range-row:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.split-range-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.split-range-title i {
  color: #94A3B8;
  font-size: 12px;
}

.split-range-title span {
  background: #F1F5F9;
  padding: 2px 7px;
  border-radius: 6px;
  color: #0F172A;
  font-weight: 700;
  font-size: 12.5px;
}

.split-range-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap !important;
  flex: 1;
  justify-content: center;
}

.split-input-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
  height: 36px;
  flex-shrink: 1;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.split-range-controls .split-input-group {
  max-width: 95px;
  min-width: 72px;
  flex: 1;
}

.split-input-group:focus-within {
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.split-input-label {
  padding: 0 7px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F8FAFC;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
}

.split-input-group>.split-input-label:first-child {
  border-right: 1px solid #CBD5E1;
  border-left: none;
}

.split-input-group>.split-input-label:last-child {
  border-left: 1px solid #CBD5E1;
  border-right: none;
}

.split-input-field {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 3px;
  border: none;
  background: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  color: #0F172A;
  outline: none;
  text-align: center;
  box-sizing: border-box;
}

/* Hide native number input spinners for clean typography */
.split-input-field::-webkit-outer-spin-button,
.split-input-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.split-input-field[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.split-range-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 34px;
}

.btn-remove-range {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #94A3B8;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s ease;
}

.btn-remove-range:hover {
  background: #FEE2E2;
  color: #EF4444;
  transform: scale(1.05);
}

.split-add-range-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px auto 24px;
  padding: 10px 22px;
  border-radius: 10px;
  border: 1.5px solid #CBD5E1;
  background: #FFFFFF;
  color: #334155;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
}

.split-add-range-btn:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
  color: #0F172A;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06);
}

.split-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  user-select: none;
  margin-top: 16px;
}

.split-checkbox-wrap input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #475569;
  border-radius: 4px;
  cursor: pointer;
}

.split-callout-box {
  background: #E0F2FE;
  border: 1px solid #BAE6FD;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  color: #0369A1;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.split-callout-box i {
  font-size: 16px;
  margin-top: 2px;
}

/* ==========================================================================
   3-COLUMN SIGN PDF WORKSPACE & INTERACTIVE FIELD OVERLAY
   ========================================================================== */

.workspace-modal:has(#sign-workspace-layout:not(.hidden)) {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  top: 0 !important;
  left: 0 !important;
}

.modal-body:has(#sign-workspace-layout:not(.hidden)) {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.active-workspace:has(#sign-workspace-layout:not(.hidden)) {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
}

.sign-workspace-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 1;
  min-height: 0;
  height: 100%;
  background: #F8FAFC;
  border-radius: 0;
  overflow: hidden;
}

.sign-nav-controls {
  position: sticky;
  bottom: 16px;
  z-index: 20;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 9999px;
  box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.18), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
  margin-top: 16px;
}

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

.sign-page-indicator, .sign-zoom-level {
  font-size: 13px;
  font-weight: 600;
  color: #1E293B;
  min-width: 70px;
  text-align: center;
}

.btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}

.btn-icon:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #94A3B8;
}

/* Center Viewport */
.sign-center-viewport {
  flex: 1;
  min-width: 0;
  height: 100%;
  position: relative;
  background: #CBD5E1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 24px;
  box-sizing: border-box;
}

.sign-canvas-wrapper {
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  border-radius: 4px;
  background: #FFFFFF;
  display: inline-block;
}

#sign-pdf-canvas {
  display: block;
}

.sign-interactive-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

/* Placed Fields on Canvas */
.placed-field {
  position: absolute;
  border: 2px dashed #3B82F6;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 6px;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  padding: 4px 8px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.placed-field.selected {
  border: 2px solid #2563EB;
  background: rgba(37, 99, 235, 0.12);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

.placed-field .field-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.placed-field img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.placed-field .field-text-content {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-weight: 600;
  color: #000000;
  white-space: nowrap;
}

/* Control Handles for Placed Fields */
.placed-field .resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #2563EB;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  display: none;
}

.placed-field.selected .resize-handle {
  display: block;
}

.resize-handle.nw { top: -5px; left: -5px; cursor: nwse-resize; }
.resize-handle.ne { top: -5px; right: -5px; cursor: nesw-resize; }
.resize-handle.sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.resize-handle.se { bottom: -5px; right: -5px; cursor: nwse-resize; }

.placed-field .field-action-bar {
  position: absolute;
  top: -34px;
  right: 0;
  display: none;
  align-items: center;
  gap: 4px;
  background: #0F172A;
  padding: 3px 6px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 30;
}

.placed-field.selected .field-action-bar {
  display: flex;
}

.field-act-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #94A3B8;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.field-act-btn:hover {
  background: #334155;
  color: #FFFFFF;
}

.field-act-btn.danger:hover {
  background: #EF4444;
  color: #FFFFFF;
}

/* Right Control Panel */
.sign-right-controls {
  width: 270px;
  background: #FFFFFF;
  border-left: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  user-select: none;
}

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

.sign-panel-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.signing-type-toggle {
  display: flex;
  background: #F1F5F9;
  padding: 3px;
  border-radius: 10px;
  gap: 2px;
}

.signing-type-toggle .toggle-btn {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.signing-type-toggle .toggle-btn.active {
  background: #FFFFFF;
  color: #2563EB;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

/* Field Palette Items */
.sign-fields-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-palette-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.field-palette-item:hover {
  border-color: #3B82F6;
  background: #F8FAFC;
  transform: translateX(2px);
}

.field-palette-item.primary-field {
  border-color: #93C5FD;
  background: #EFF6FF;
}

.field-palette-item.primary-field:hover {
  border-color: #2563EB;
  background: #DBEAFE;
}

.field-palette-item .field-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #1E293B;
}

.field-palette-item .field-info i {
  color: #3B82F6;
  font-size: 14px;
  width: 16px;
  text-align: center;
}

.field-badge-count {
  font-size: 11px;
  font-weight: 700;
  background: #E2E8F0;
  color: #475569;
  padding: 2px 7px;
  border-radius: 12px;
}

.sign-action-footer {
  margin-top: auto;
}

/* ==========================================================================
   UPGRADED SIGNATURE CREATION MODAL
   ========================================================================== */
.sig-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sig-modal-backdrop.hidden {
  display: none !important;
}

.sig-modal-container {
  background: #FFFFFF;
  width: 100%;
  max-width: 680px;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sig-modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FAFAFA;
}

.sig-modal-header h3 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.close-sig-modal-btn {
  background: transparent;
  border: none;
  font-size: 24px;
  color: #64748B;
  cursor: pointer;
  line-height: 1;
}

.sig-identity-row {
  padding: 16px 24px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  gap: 16px;
}

.sig-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sig-input-group label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748B;
}

.sig-input-group input {
  padding: 8px 12px;
  border: 1.5px solid #CBD5E1;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.15s ease;
}

.sig-input-group input:focus {
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Modal Tabs */
.sig-modal-tabs {
  display: flex;
  padding: 0 24px;
  border-bottom: 1px solid #E2E8F0;
  background: #FFFFFF;
}

.sig-tab-btn {
  padding: 12px 20px;
  border: none;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.15s ease;
}

.sig-tab-btn.active {
  color: #2563EB;
  border-bottom-color: #2563EB;
}

.sig-modal-body {
  display: flex;
  height: 320px;
}

/* Sub-mode Toolbar */
.sig-mode-toolbar {
  width: 90px;
  background: #FAFAFA;
  border-right: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  gap: 8px;
}

.mode-tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: 10px;
  color: #64748B;
  cursor: pointer;
  gap: 4px;
  transition: all 0.15s ease;
}

.mode-tool-btn i { font-size: 16px; }
.mode-tool-btn span { font-size: 11px; font-weight: 600; }

.mode-tool-btn.active {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #2563EB;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.sig-mode-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  position: relative;
}

.sig-view-mode.hidden { display: none !important; }

/* Type Mode Preview Grid */
.sig-color-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.color-options { display: flex; gap: 8px; }
.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease;
}
.color-swatch.active {
  transform: scale(1.25);
  border-color: #3B82F6;
  box-shadow: 0 0 0 2px #FFFFFF;
}

.font-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.font-card {
  border: 2px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px;
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 95px;
}

.font-card:hover {
  border-color: #94A3B8;
}

.font-card.active {
  border-color: #2563EB;
  background: #EFF6FF;
}

.font-name-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94A3B8;
}

.font-sample {
  font-size: 26px;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}

.font-sample-dancing {
  font-family: 'Dancing Script', cursive, sans-serif !important;
}

.font-sample-vibes {
  font-family: 'Great Vibes', cursive, sans-serif !important;
}

.font-sample-sacramento {
  font-family: 'Sacramento', cursive, sans-serif !important;
}

.font-sample-doulaise {
  font-family: 'Monsieur La Doulaise', cursive, sans-serif !important;
}

/* Draw Mode Canvas */
.draw-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sig-canvas-pad-wrap {
  width: 100%;
  height: 200px;
  border: 2px dashed #CBD5E1;
  border-radius: 12px;
  background: #FFFFFF;
  overflow: hidden;
  position: relative;
}

#modal-draw-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

/* Upload Mode Box */
.sig-upload-box {
  border: 2px dashed #CBD5E1;
  border-radius: 14px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  background: #FAFAFA;
  transition: all 0.15s ease;
}

.sig-upload-box:hover {
  border-color: #3B82F6;
  background: #EFF6FF;
}

.upload-icon {
  font-size: 36px;
  color: #94A3B8;
  margin-bottom: 10px;
}

.sig-upload-box p {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 4px;
}

.upload-note {
  font-size: 11.5px;
  color: #64748B;
}

.upload-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#sig-upload-preview {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px;
}

.sig-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #E2E8F0;
  background: #FAFAFA;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* QR Sub-dialog Modal */
.qr-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-modal-backdrop.hidden { display: none !important; }

.qr-modal-box {
  background: #FFFFFF;
  width: 360px;
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.qr-modal-box h4 {
  font-size: 17px;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}

.qr-modal-box p {
  font-size: 12.5px;
  color: #64748B;
  margin: 0;
}

.qr-canvas-container {
  padding: 12px;
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: 12px;
}

.ws-status-line {
  font-size: 12px;
  font-weight: 600;
  color: #2563EB;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563EB;
}

.status-dot.pulsing {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.btn-wm-grid {
  transition: all 0.15s ease;
}

.btn-wm-grid:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
}

.btn-wm-grid.active {
  background: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

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

.color-swatch-wm.active {
  transform: scale(1.25);
  border-color: #2563EB;
  box-shadow: 0 0 0 2px #FFFFFF;
}

/* Organize PDF Page Reordering Styles */
.page-card.organize-card {
  cursor: grab;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  user-select: none;
}

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

.page-card.organize-card.dragging {
  opacity: 0.45;
  transform: scale(0.96);
  border: 2px dashed #2563EB !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.page-card.organize-card.drag-over {
  border: 2.5px solid #2563EB !important;
  transform: scale(1.04);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3) !important;
  background: #EFF6FF !important;
}

.organize-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 5;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 5px;
}

.page-card-organize-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 8px;
  box-sizing: border-box;
}

.page-card-organize-footer .page-num-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}

.organize-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.organize-card-actions button {
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #334155;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.organize-card-actions button:hover {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
}

.organize-card-actions button.page-delete-btn:hover {
  background: #DC2626;
  color: #FFFFFF;
  border-color: #DC2626;
}

/* Delete-pages mode — button overrides */
.page-card.organize-card .organize-card-actions .page-delete-btn.delete-mode-btn {
  width: auto;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  gap: 5px;
  border-radius: 7px;
  letter-spacing: 0.01em;
  border: 1.5px solid #DC2626;
  color: #DC2626;
  background: #FFF5F5;
}

.page-card.organize-card .organize-card-actions .page-delete-btn.delete-mode-btn:hover,
.page-card.organize-card .organize-card-actions .page-delete-btn.delete-active {
  background: #DC2626;
  color: #FFFFFF;
  border-color: #DC2626;
  box-shadow: 0 3px 8px rgba(220, 38, 38, 0.28);
}

.organize-touch-ghost {
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.35) !important;
  border: 2px solid #2563EB !important;
  border-radius: 12px;
  background: #FFFFFF !important;
  opacity: 0.92;
  transform: scale(1.05) rotate(2deg);
  transition: transform 0.05s ease;
}

/* Delete Pages — marked card highlight */
.page-card.organize-card.delete-marked {
  border: 2px solid #DC2626 !important;
  background: #FFF5F5 !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.18) !important;
}

.page-card.organize-card.delete-marked .page-thumb-canvas {
  opacity: 0.40;
}

.page-card.organize-card.delete-marked .organize-card-badge {
  background: rgba(185, 28, 28, 0.90);
}

/* Delete-pages mode footer — center align when no swap buttons */
.page-card-organize-footer.delete-mode-footer {
  justify-content: center;
  gap: 8px;
  padding: 7px 8px;
}

/* =========================================================================
   Crop PDF Visual Interactive Overlay & Anchor Handles
   ========================================================================= */

.crop-canvas-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto !important;
  cursor: crosshair !important;
  z-index: 10;
  overflow: hidden;
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
}

.crop-canvas-overlay {
  cursor: crosshair !important;
}

.crop-box {
  position: absolute;
  border: 2px solid #000000 !important;
  background: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45) !important;
  pointer-events: auto;
  cursor: move;
  box-sizing: border-box;
  z-index: 12;
}

.crop-box-badge {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  background: #000000 !important;
  color: #FFFFFF !important;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.crop-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #FFFFFF !important;
  border: 2px solid #000000 !important;
  border-radius: 2px !important;
  pointer-events: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  z-index: 14;
}

.crop-handle-nw { top: -5px; left: -5px; cursor: nwse-resize; }
.crop-handle-n  { top: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.crop-handle-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.crop-handle-e  { top: calc(50% - 5px); right: -5px; cursor: ew-resize; }
.crop-handle-se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.crop-handle-s  { bottom: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.crop-handle-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.crop-handle-w  { top: calc(50% - 5px); left: -5px; cursor: ew-resize; }
/* ==========================================================================
   EDIT PDF — 3-Column Workspace Layout
   ========================================================================== */

.workspace-modal:has(#edit-pdf-workspace-layout:not(.hidden)) {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.modal-body:has(#edit-pdf-workspace-layout:not(.hidden)) {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.active-workspace:has(#edit-pdf-workspace-layout:not(.hidden)) {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
}

.edit-pdf-workspace-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #F1F5F9;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.edit-main-container {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

/* ── Left Tool Sidebar ────────────────────────────────────────────────────── */

.edit-left-toolbar {
  width: 66px;
  flex-shrink: 0;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 0;
  overflow-y: auto;
  border-right: 1px solid #E2E8F0;
  box-shadow: 2px 0 8px rgba(15, 23, 42, 0.04);
}

.edit-toolbar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 4px;
  padding: 6px 0;
}

.edit-toolbar-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748B;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.edit-toolbar-divider {
  width: 36px;
  height: 1px;
  background: #E2E8F0;
  margin: 6px auto;
}

.edit-tool-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.edit-tool-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #CBD5E1;
}

.edit-tool-btn.active {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.edit-tool-btn.edit-tool-danger:hover {
  background: #FEF2F2;
  color: #DC2626;
  border-color: #FCA5A5;
}

/* ── Center Canvas Area ───────────────────────────────────────────────────── */

.edit-center-viewport {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: #CBD5E1;
}

.edit-page-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #FFFFFF;
  width: 100%;
  justify-content: center;
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  z-index: 2;
  flex-shrink: 0;
}

.edit-page-indicator {
  font-size: 13px;
  font-weight: 800;
  color: #0F172A;
  min-width: 90px;
  text-align: center;
}

.edit-canvas-scroll {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.edit-canvas-wrapper {
  position: relative;
  display: inline-block;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  cursor: crosshair;
}

/* PDF background canvas */
#edit-pdf-bg-canvas {
  display: block;
  position: relative;
  z-index: 1;
}

/* Fabric.js wraps the canvas in .canvas-container — position it absolute over the PDF */
.edit-canvas-wrapper .canvas-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 2;
}

/* Also target the canvas elements directly */
.edit-canvas-wrapper .upper-canvas,
.edit-canvas-wrapper .lower-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* ── Right Panel ──────────────────────────────────────────────────────────── */

.edit-right-panel {
  width: 260px;
  flex-shrink: 0;
  background: #FFFFFF;
  border-left: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.edit-panel-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #334155;
  padding: 12px 14px 8px;
  border-bottom: 1px solid #F1F5F9;
  background: #F8FAFC;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Tool Options Panel */
.edit-options-section {
  flex-shrink: 0;
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 8px;
}

.edit-option-group {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-option-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  display: block;
}

.edit-slider {
  width: 100%;
  height: 4px;
  accent-color: #2563EB;
  cursor: pointer;
}

.edit-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.edit-color-pick {
  width: 30px;
  height: 30px;
  border: 2px solid #E2E8F0;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  background: none;
}

.edit-fmt-btn {
  width: 32px;
  height: 32px;
  border: 1.5px solid #CBD5E1;
  border-radius: 6px;
  background: #F8FAFC;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  color: #334155;
}

.edit-fmt-btn:hover,
.edit-fmt-btn.active {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
}

/* Layers Panel */
.edit-layers-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-bottom: 1px solid #E2E8F0;
}

.edit-layers-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.edit-layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #F8FAFC;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
  color: #334155;
  font-weight: 500;
}

.edit-layer-item:hover {
  background: #EFF6FF;
  border-color: #BFDBFE;
}

.edit-layer-item.selected {
  background: #EFF6FF;
  border-color: #2563EB;
  color: #1E40AF;
}

.edit-layer-icon {
  font-size: 11px;
  color: #64748B;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.edit-layer-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-layer-del {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: #94A3B8;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  transition: all 0.1s;
}

.edit-layer-del:hover {
  background: #FEE2E2;
  color: #DC2626;
}

/* Scope Options */
.edit-scope-section {
  flex-shrink: 0;
  border-top: 1px solid #E2E8F0;
  background: #FFFFFF;
}

.edit-scope-options {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.edit-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  transition: all 0.15s ease;
}

.edit-radio-label:hover {
  background: #EFF6FF;
  border-color: #BFDBFE;
}

.edit-radio-label input[type="radio"] {
  accent-color: #2563EB;
  cursor: pointer;
}

.edit-radio-label input[type="radio"]:checked + .radio-content {
  color: #2563EB;
  font-weight: 600;
}

.edit-radio-label .radio-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Save Section */
.edit-save-section {
  padding: 12px;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
  flex-shrink: 0;
}

/* Touch Action for Canvas Editing */
.edit-canvas-wrapper canvas,
.edit-canvas-wrapper .canvas-container {
  touch-action: none !important;
}

/* ==========================================================================
   EDIT PDF — Mobile Responsive Rules (@media max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
  .modal-body:has(#edit-pdf-workspace-layout:not(.hidden)) {
    padding: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    flex: 1 !important;
  }

  .active-workspace:has(#edit-pdf-workspace-layout:not(.hidden)) {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .edit-pdf-workspace-layout {
    flex-direction: row !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
  }

  /* Left Vertical Toolbar Ribbon (Standing Vertically on Mobile) */
  .edit-left-toolbar {
    width: 54px !important;
    min-width: 54px !important;
    height: 100% !important;
    flex-direction: column !important;
    padding: 8px 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #FFFFFF !important;
    border-right: 1px solid #E2E8F0 !important;
    border-bottom: none !important;
    justify-content: flex-start !important;
    align-items: center !important;
    -webkit-overflow-scrolling: touch;
  }

  .edit-toolbar-section {
    flex-direction: column !important;
    width: 100% !important;
    padding: 3px 0 !important;
    gap: 3px !important;
    align-items: center !important;
  }

  .edit-toolbar-label {
    display: block !important;
    font-size: 8px !important;
    margin-bottom: 1px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748B !important;
    text-align: center !important;
  }

  .edit-toolbar-divider {
    width: 26px !important;
    height: 1px !important;
    margin: 4px auto !important;
    background: #E2E8F0 !important;
  }

  .edit-tool-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  /* Main Container (Center Viewport + Options Panel) Stacks Vertically on Mobile */
  .edit-main-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Center Viewport Takes Max Screen Space */
  .edit-center-viewport {
    flex: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    background: #CBD5E1 !important;
  }

  .edit-page-nav {
    padding: 6px 12px !important;
    gap: 8px !important;
  }

  .edit-canvas-scroll {
    padding: 4px !important;
    flex: 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  /* Bottom Panel for Options, Layers & Save */
  .edit-right-panel {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid #CBD5E1 !important;
    max-height: 180px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12) !important;
    background: #FFFFFF !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .edit-options-section {
    max-height: 140px !important;
    overflow-y: auto !important;
    padding-bottom: 6px !important;
    flex-shrink: 0 !important;
  }

  .edit-layers-section {
    max-height: 120px !important;
    overflow-y: auto !important;
    flex-shrink: 0 !important;
  }

  .edit-scope-section {
    flex-shrink: 0 !important;
  }

  .edit-scope-options {
    flex-direction: row !important;
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  .edit-radio-label {
    flex: 1 !important;
    padding: 5px 6px !important;
    font-size: 11px !important;
    justify-content: center !important;
  }

  /* Pin Save Button to Bottom of Panel */
  .edit-save-section {
    padding: 8px 12px !important;
    position: sticky !important;
    bottom: 0 !important;
    background: #FFFFFF !important;
    z-index: 10 !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08) !important;
    margin-top: auto !important;
  }

  .edit-save-section .btn {
    padding: 10px !important;
    font-size: 13px !important;
  }

  /* ── SIGN PDF Mobile Responsive Rules ── */
  .modal-body:has(#sign-workspace-layout:not(.hidden)) {
    padding: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    flex: 1 !important;
  }

  .active-workspace:has(#sign-workspace-layout:not(.hidden)) {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .sign-workspace-layout {
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
  }

  /* Floating Control Ribbon on Mobile */
  .sign-nav-controls {
    position: sticky !important;
    bottom: 6px !important;
    z-index: 20 !important;
    width: auto !important;
    max-width: 95% !important;
    margin: 8px auto 0 auto !important;
    padding: 4px 10px !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(203, 213, 225, 0.9) !important;
    border-radius: 9999px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .sign-nav-buttons,
  .sign-zoom-controls {
    gap: 4px !important;
  }

  .sign-page-indicator, .sign-zoom-level {
    font-size: 11px !important;
    min-width: 54px !important;
  }

  .sign-nav-controls .btn-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
    border-radius: 5px !important;
  }

  /* Center Viewport Takes Maximum Space on Mobile & Keeps PDF Stationary */
  .sign-center-viewport {
    flex: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    background: #94A3B8 !important;
    padding: 8px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    touch-action: none !important;
    user-select: none !important;
  }

  .sign-canvas-wrapper {
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Bottom Controls Panel for Fields & Sign Action */
  .sign-right-controls {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid #E2E8F0 !important;
    max-height: 220px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12) !important;
    background: #FFFFFF !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 14px 14px 0 0 !important;
  }

  .sign-panel-section {
    padding: 4px 0 !important;
    margin-bottom: 2px !important;
  }

  .sign-panel-title {
    font-size: 11px !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }

  .sign-fields-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .field-palette-item {
    padding: 6px 8px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
  }

  .field-info {
    font-size: 11.5px !important;
    gap: 6px !important;
  }

  .field-badge-count {
    font-size: 10px !important;
    padding: 1px 6px !important;
  }

  .sign-action-footer {
    margin-top: auto !important;
    padding-top: 6px !important;
    position: sticky !important;
    bottom: 0 !important;
    background: #FFFFFF !important;
    z-index: 10 !important;
  }

  .sign-action-footer .btn {
    padding: 10px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  /* ── Signature Creation Modal Mobile Overhaul ── */
  .sig-modal-backdrop {
    padding: 10px !important;
  }

  .sig-modal-container {
    max-height: 92vh !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
  }

  .sig-modal-header {
    padding: 12px 16px !important;
  }

  .sig-modal-header h3 {
    font-size: 15px !important;
  }

  .sig-identity-row {
    padding: 10px 16px !important;
    gap: 10px !important;
  }

  .sig-input-group label {
    font-size: 10px !important;
  }

  .sig-input-group input {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }

  .sig-modal-tabs {
    padding: 0 12px !important;
  }

  .sig-tab-btn {
    padding: 10px 14px !important;
    font-size: 12.5px !important;
  }

  .sig-modal-body {
    flex-direction: column !important;
    height: auto !important;
    min-height: 280px !important;
  }

  .sig-mode-toolbar {
    width: 100% !important;
    flex-direction: row !important;
    border-right: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 8px 12px !important;
    justify-content: space-around !important;
    gap: 8px !important;
    background: #FAFAFA !important;
  }

  .mode-tool-btn {
    flex: 1 !important;
    flex-direction: row !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  .mode-tool-btn i { font-size: 14px !important; }
  .mode-tool-btn span { font-size: 12px !important; }

  .sig-mode-content {
    width: 100% !important;
    padding: 14px 12px !important;
  }

  .font-preview-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .font-card {
    height: 85px !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }

  .font-name-label {
    font-size: 9px !important;
  }

  .font-sample {
    font-size: 22px !important;
  }

  .sig-modal-footer {
    padding: 12px 16px !important;
    gap: 10px !important;
  }

  /* ── SPLIT PDF Mobile Grid & Margins Optimization ── */
  .standard-workspace-preview {
    padding: 8px 4px !important;
  }

  .pages-grid {
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important;
    gap: 10px !important;
    padding: 8px 4px !important;
  }

  .page-card {
    padding: 6px !important;
    border-radius: 10px !important;
  }

  .page-card-footer {
    padding: 4px 6px !important;
    font-size: 11px !important;
  }

  .standard-controls-panel {
    padding: 14px 12px !important;
    border-radius: 16px !important;
    margin-top: 12px !important;
  }
}

/* ==========================================================================
   Google Sign-In & Firebase Auth Profile Badge
   ========================================================================== */
.auth-header-wrap {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 10px;
}

.btn-google-signin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  color: #1E293B;
  border: 1px solid #CBD5E1;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-google-signin:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.google-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.user-profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0F172A;
  color: #F8FAFC;
  padding: 4px 12px 4px 6px;
  border-radius: 20px;
  border: 1px solid #334155;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.user-profile-badge img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #0284C7;
  background: #1E293B;
  flex-shrink: 0;
}

.user-display-name {
  font-size: 13px;
  font-weight: 600;
  color: #F8FAFC;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-signout {
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-signout:hover {
  color: #EF4444;
  background: rgba(239, 68, 68, 0.15);
}

/* ==========================================================================
   iLovePDF Style Header Auth & Modal Dialog
   ========================================================================== */
.auth-header-wrap {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 10px;
  flex-shrink: 0;
}

.auth-unauth-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

button.btn-nav-login,
.btn-nav-login {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #1E293B !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 8px 20px !important;
  border-radius: 9999px !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

button.btn-nav-login:hover,
.btn-nav-login:hover {
  background: #F8FAFC !important;
  border-color: #94A3B8 !important;
  color: #0F172A !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
}

button.btn-nav-signup,
.btn-nav-signup {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #0F172A !important;
  color: #FFFFFF !important;
  border: 1.5px solid #0F172A !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 8px 22px !important;
  border-radius: 9999px !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

button.btn-nav-signup:hover,
.btn-nav-signup:hover {
  background: #1E293B !important;
  border-color: #1E293B !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.3) !important;
}

/* Modal Overlay */
.auth-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.auth-modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
  animation: authModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes authModalPop {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.auth-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #F1F5F9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #64748B;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.auth-modal-close:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.auth-modal-brand {
  text-align: center;
  margin-bottom: 12px;
}

.auth-brand-logo {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 900;
  color: #0F172A;
}

.auth-brand-logo span {
  color: #b8390e;
}

.auth-modal-title {
  font-size: 22px;
  font-weight: 800;
  color: #0F172A;
  text-align: center;
  margin: 0 0 20px 0;
}

/* Social Buttons Row - Single Google Option */
.auth-social-row.single-google {
  display: flex;
  width: 100%;
  margin-bottom: 22px;
}

.auth-social-row.single-google .btn-social-google {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: #1E293B;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.auth-social-row.single-google .btn-social-google:hover {
  border-color: #94A3B8;
  background: #F8FAFC;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

/* Input Fields */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-input-group {
  position: relative;
}

.auth-input-group input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border-radius: 10px;
  border: 1px solid #CBD5E1;
  font-size: 14px;
  color: #0F172A;
  background: #F8FAFC;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.auth-input-group input:focus {
  outline: none;
  border-color: #0F1A2B;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(15, 26, 43, 0.12);
}

.auth-input-group .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748B;
  font-size: 15px;
  pointer-events: none;
}

.auth-forgot-link {
  display: block;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: #0F1A2B;
  text-decoration: none;
  margin-top: 2px;
}

.auth-forgot-link:hover {
  text-decoration: underline;
}

.auth-submit-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: #0F1A2B;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(15, 26, 43, 0.25);
  margin-top: 6px;
}

.auth-submit-btn:hover {
  background: #1E293B;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 26, 43, 0.35);
}

.auth-switch-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 13.5px;
  color: #64748B;
}

.auth-switch-footer a {
  color: #0F1A2B;
  font-weight: 700;
  text-decoration: none;
}

.auth-switch-footer a:hover {
  text-decoration: underline;
}

.auth-terms-notice {
  font-size: 11.5px;
  color: #94A3B8;
  margin-top: 14px;
  line-height: 1.4;
}

.auth-terms-notice a {
  color: #0F1A2B;
  font-weight: 600;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE POLISH (< 640px & < 480px)
   ========================================================================== */
@media (max-width: 640px) {
  .header {
    padding: 12px 16px;
  }
  .nav-bar {
    overflow-x: auto;
    padding: 6px 12px;
    -webkit-overflow-scrolling: touch;
  }
  .edit-left-toolbar {
    width: 50px;
    padding: 8px 0;
  }
  .edit-tool-btn {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
  .edit-save-section {
    padding: 12px;
  }
  .result-actions {
    flex-direction: column;
    width: 100%;
  }
  .result-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .logo-text span {
    display: inline;
  }
  .hero-title {
    font-size: 26px !important;
  }
  .card-grid {
    grid-template-columns: 1fr !important;
  }
  .auth-modal-card {
    padding: 24px 18px !important;
    width: 94vw !important;
  }
}

/* ==========================================================================
   10/10 UPGRADE SUITE: Dark Mode, Theme Switcher, Auto-Detect & Polish
   ========================================================================== */
.theme-toggle-btn {
  appearance: none;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid #CBD5E1;
  color: #1E293B;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.theme-toggle-btn:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
  transform: scale(1.08) rotate(15deg);
}

.btn-auto-detect {
  appearance: none;
  background: linear-gradient(135deg, #0284C7, #0369A1);
  color: #FFFFFF;
  border: none;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.btn-auto-detect:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.45);
}

/* Dark Theme Variables & Master Overrides */
[data-theme="dark"] {
  --bg: #090D16;
  --paper: #0F172A;
  --paper-deep: #131C2E;
  --ink: #F8FAFC;
  --ink-soft: #94A3B8;
  --line: #1E293B;
  color-scheme: dark;
}

[data-theme="dark"] body {
  background-color: #090D16 !important;
  color: #F8FAFC !important;
}

/* Header & Brand Navbar */
[data-theme="dark"] header {
  background: rgba(15, 23, 42, 0.92) !important;
  border-bottom-color: #1E293B !important;
}

[data-theme="dark"] .brand-text .name {
  color: #F8FAFC !important;
}

[data-theme="dark"] .brand-text .sub {
  color: #94A3B8 !important;
}

[data-theme="dark"] .search-wrap {
  background: #131C2E !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .search-wrap input {
  color: #F8FAFC !important;
}

[data-theme="dark"] .search-wrap input::placeholder {
  color: #64748B !important;
}

[data-theme="dark"] .search-icon {
  stroke: #94A3B8 !important;
}

[data-theme="dark"] .kbd {
  background: #1E293B !important;
  color: #94A3B8 !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .nav-btn {
  color: #94A3B8 !important;
}

[data-theme="dark"] .nav-btn:hover {
  background: #131C2E !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .nav-btn.active {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  border-color: #0284C7 !important;
}

[data-theme="dark"] .nav-btn .count {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
}

/* Header Auth Buttons & Profile */
[data-theme="dark"] button.btn-nav-login,
[data-theme="dark"] .btn-nav-login {
  background: #0F172A !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] button.btn-nav-login:hover,
[data-theme="dark"] .btn-nav-login:hover {
  background: #1E293B !important;
  border-color: #475569 !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] button.btn-nav-signup,
[data-theme="dark"] .btn-nav-signup {
  background: #38BDF8 !important;
  border-color: #38BDF8 !important;
  color: #090D16 !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.3) !important;
}

[data-theme="dark"] button.btn-nav-signup:hover,
[data-theme="dark"] .btn-nav-signup:hover {
  background: #7DD3FC !important;
  border-color: #7DD3FC !important;
  box-shadow: 0 6px 18px rgba(56, 189, 248, 0.45) !important;
}

[data-theme="dark"] .theme-toggle-btn {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #FACC15 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Hero Section & Stats Ticket */
[data-theme="dark"] .hero h1 {
  color: #F8FAFC !important;
}

[data-theme="dark"] .hero h1 em {
  color: #38BDF8 !important;
}

[data-theme="dark"] .hero .lede {
  color: #94A3B8 !important;
}

[data-theme="dark"] .ticket {
  background: #0F172A !important;
  border-color: #334155 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .ticket-item {
  border-color: #1E293B !important;
}

[data-theme="dark"] .ticket-val {
  color: #F8FAFC !important;
}

[data-theme="dark"] .ticket-lbl {
  color: #94A3B8 !important;
}

/* Tool Mega Suite Cards & Headings */
[data-theme="dark"] .kicker {
  color: #38BDF8 !important;
}

[data-theme="dark"] .suite-head h2 {
  color: #F8FAFC !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] a.card {
  background: #0F172A !important;
  border-color: #1E293B !important;
  color: #F8FAFC !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] a.card:hover {
  border-color: #38BDF8 !important;
  background: #131C2E !important;
  box-shadow: 0 12px 32px rgba(56, 189, 248, 0.2) !important;
}

[data-theme="dark"] .card .tool-name,
[data-theme="dark"] .tool-name {
  color: #F8FAFC !important;
}

[data-theme="dark"] .card .tool-desc,
[data-theme="dark"] .tool-desc {
  color: #94A3B8 !important;
}

[data-theme="dark"] .card .go,
[data-theme="dark"] .go {
  color: #38BDF8 !important;
}

[data-theme="dark"] .icon-sq {
  background: #1E293B !important;
  color: #38BDF8 !important;
}

[data-theme="dark"] .stamp-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #F8FAFC !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Modals & Dialog Overlays */
[data-theme="dark"] .modal-overlay {
  background: rgba(9, 13, 22, 0.85) !important;
  backdrop-filter: blur(8px) !important;
}

[data-theme="dark"] .modal-container,
[data-theme="dark"] .auth-modal-card {
  background: #0F172A !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .modal-header {
  border-bottom-color: #1E293B !important;
  background: #0F172A !important;
}

[data-theme="dark"] .modal-title,
[data-theme="dark"] .auth-modal-title {
  color: #F8FAFC !important;
}

[data-theme="dark"] .close-btn {
  color: #94A3B8 !important;
}

[data-theme="dark"] .close-btn:hover {
  background: #1E293B !important;
  color: #F8FAFC !important;
}

/* Form Controls, Inputs & Options */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #131C2E !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #64748B !important;
}

[data-theme="dark"] .file-drop-zone {
  background: #131C2E !important;
  border-color: #334155 !important;
  color: #94A3B8 !important;
}

[data-theme="dark"] .file-drop-zone:hover {
  border-color: #38BDF8 !important;
  background: #1E293B !important;
}

/* Sign PDF Tool Workspace */
[data-theme="dark"] .sign-left-thumbnails {
  background: #0F172A !important;
  border-right-color: #1E293B !important;
}

[data-theme="dark"] .sign-center-viewport {
  background: #090D16 !important;
}

[data-theme="dark"] .sign-right-controls {
  background: #0F172A !important;
  border-left-color: #1E293B !important;
}

[data-theme="dark"] .sign-panel-title {
  color: #94A3B8 !important;
}

[data-theme="dark"] .field-palette-item {
  background: #131C2E !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .field-palette-item:hover {
  background: #1E293B !important;
  border-color: #38BDF8 !important;
}

[data-theme="dark"] .sig-modal-container {
  background: #0F172A !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .sig-modal-header {
  background: #0F172A !important;
  border-bottom-color: #1E293B !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .sig-mode-toolbar {
  background: #131C2E !important;
  border-right-color: #1E293B !important;
}

[data-theme="dark"] .mode-tool-btn {
  color: #94A3B8 !important;
}

[data-theme="dark"] .mode-tool-btn:hover {
  background: #1E293B !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .mode-tool-btn.active {
  background: #0284C7 !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .font-card {
  background: #131C2E !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .font-card.selected {
  border-color: #38BDF8 !important;
  background: #1E293B !important;
}

/* Edit PDF Workspace */
[data-theme="dark"] .edit-left-toolbar {
  background: #0F172A !important;
  border-right-color: #1E293B !important;
}

[data-theme="dark"] .edit-tool-btn {
  color: #94A3B8 !important;
}

[data-theme="dark"] .edit-tool-btn:hover {
  background: #1E293B !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .edit-tool-btn.active {
  background: #0284C7 !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .edit-right-panel {
  background: #0F172A !important;
  border-left-color: #1E293B !important;
}

/* Compare PDF Workspace */
[data-theme="dark"] .compare-dual-container {
  background: #090D16 !important;
}

[data-theme="dark"] .compare-column-header {
  background: #0F172A !important;
  border-bottom-color: #1E293B !important;
  color: #F8FAFC !important;
}

/* Footer & Copyright */
[data-theme="dark"] footer {
  background: #0F172A !important;
  border-top-color: #1E293B !important;
  color: #94A3B8 !important;
}

[data-theme="dark"] .footer-links a {
  color: #94A3B8 !important;
}

[data-theme="dark"] .footer-links a:hover {
  color: #38BDF8 !important;
}

/* ==========================================================================
   LANDING PAGE FEATURES, FOOTER & AUTH MODAL DARK MODE OVERRIDES
   ========================================================================== */

/* 1. Article & Features Section */
[data-theme="dark"] .article-heading,
[data-theme="dark"] .col-heading {
  color: #F8FAFC !important;
}

[data-theme="dark"] .article-text {
  color: #94A3B8 !important;
}

[data-theme="dark"] .suite-overview-block {
  background: #0F172A !important;
  border: 1px solid #1E293B !important;
  border-radius: 16px !important;
  padding: 24px !important;
}

[data-theme="dark"] .text-rust {
  color: #38BDF8 !important;
}

/* 2. Footer Overrides */
[data-theme="dark"] footer.app-footer,
[data-theme="dark"] .app-footer {
  background: #0F172A !important;
  background-color: #0F172A !important;
  color: #F8FAFC !important;
  border-top: 1px solid #1E293B !important;
}

[data-theme="dark"] .footer-formats-bar {
  background: #131C2E !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .footer-title {
  color: #F8FAFC !important;
}

[data-theme="dark"] .footer-tool-btn,
[data-theme="dark"] .footer-list a {
  color: #94A3B8 !important;
}

[data-theme="dark"] .footer-tool-btn:hover,
[data-theme="dark"] .close-modal-btn:hover {
  background: #334155 !important;
  color: #38BDF8 !important;
}

/* ==========================================================================
   TOOL FEATURE PAGES & PREVIEW VIEWPORT DARK MODE OVERRIDES
   ========================================================================== */

/* 1. Single Doc Preview Live Viewport Header Toolbar */
[data-theme="dark"] .single-doc-toolbar {
  background: #131C2E !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .single-doc-page-indicator {
  color: #F8FAFC !important;
}

[data-theme="dark"] .single-doc-tool-badge {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: #38BDF8 !important;
}

[data-theme="dark"] .single-doc-page-nav .btn-ghost,
[data-theme="dark"] #live-prev-page-btn,
[data-theme="dark"] #live-next-page-btn {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .single-doc-page-nav .btn-ghost:hover,
[data-theme="dark"] #live-prev-page-btn:hover,
[data-theme="dark"] #live-next-page-btn:hover {
  background: #334155 !important;
  color: #38BDF8 !important;
}

/* 2. Tool Parameters Right Panel Container */
[data-theme="dark"] .tool-params-panel,
[data-theme="dark"] .standard-controls-panel,
[data-theme="dark"] #standard-controls-panel,
[data-theme="dark"] .panel-controls-side {
  background: #0F172A !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

/* 3. Controls Titles, Labels & Subtitles (Overriding inline color:#1E293B and color:#334155) */
[data-theme="dark"] .controls-title,
[data-theme="dark"] .tool-params-title,
[data-theme="dark"] .controls-header-row,
[data-theme="dark"] .controls-header-row span,
[data-theme="dark"] .form-group label,
[data-theme="dark"] .tool-params-panel label,
[data-theme="dark"] .standard-controls-panel label,
[data-theme="dark"] .split-checkbox-wrap span,
[data-theme="dark"] label[style*="color"] {
  color: #F8FAFC !important;
}

/* 4. Position Grid Placement Selector Buttons (Overriding inline background:#fff) */
[data-theme="dark"] .btn-pos-grid,
[data-theme="dark"] .pagenum-grid-selector button {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .btn-pos-grid:hover,
[data-theme="dark"] .pagenum-grid-selector button:hover {
  background: #334155 !important;
  color: #38BDF8 !important;
  border-color: #38BDF8 !important;
}

[data-theme="dark"] .btn-pos-grid.active,
[data-theme="dark"] .pagenum-grid-selector button.active {
  background: #0284C7 !important;
  border-color: #38BDF8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
}

/* 5. Select Dropdowns, Text Inputs & Sliders */
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group input[type="text"],
[data-theme="dark"] .form-group input[type="password"],
[data-theme="dark"] .form-group input[type="number"],
[data-theme="dark"] #pagenum-format-select,
[data-theme="dark"] #redact-search-input,
[data-theme="dark"] #watermark-angle-select,
[data-theme="dark"] #translate-from-lang,
[data-theme="dark"] #translate-to-lang {
  background: #131C2E !important;
  border: 1px solid #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] select option {
  background: #131C2E !important;
  color: #F8FAFC !important;
}

/* 6. Execute / Submit Tool Action Buttons */
[data-theme="dark"] #execute-tool-btn,
[data-theme="dark"] .btn-execute-tool,
[data-theme="dark"] .tool-params-panel .btn-primary,
[data-theme="dark"] .standard-controls-panel .btn-primary {
  background: #38BDF8 !important;
  color: #090D16 !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35) !important;
}

[data-theme="dark"] #execute-tool-btn:hover,
[data-theme="dark"] .btn-execute-tool:hover,
[data-theme="dark"] .tool-params-panel .btn-primary:hover,
[data-theme="dark"] .standard-controls-panel .btn-primary:hover {
  background: #7DD3FC !important;
}

[data-theme="dark"] .footer-blog-card {
  background: #131C2E !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .blog-heading {
  color: #F8FAFC !important;
}

[data-theme="dark"] .blog-date {
  color: #64748B !important;
}

[data-theme="dark"] .footer-company-links a {
  background: #131C2E !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .footer-company-links a:hover {
  background: #1E293B !important;
  border-color: #38BDF8 !important;
  color: #38BDF8 !important;
}

[data-theme="dark"] .format-pill {
  background: #1E293B !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .formats-label,
[data-theme="dark"] .fsub,
[data-theme="dark"] .fprivacy {
  color: #94A3B8 !important;
}

/* 3. Auth Modal (Login & Sign Up Overrides) */
[data-theme="dark"] .auth-forgot-link {
  color: #38BDF8 !important;
  font-weight: 600 !important;
}

[data-theme="dark"] .auth-forgot-link:hover {
  color: #7DD3FC !important;
  text-decoration: underline !important;
}

[data-theme="dark"] .auth-submit-btn {
  background: #38BDF8 !important;
  color: #090D16 !important;
  border: none !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .auth-submit-btn:hover {
  background: #7DD3FC !important;
}

[data-theme="dark"] .auth-switch-footer {
  color: #94A3B8 !important;
}

[data-theme="dark"] .auth-switch-footer a,
[data-theme="dark"] #switch-to-signup,
[data-theme="dark"] #switch-to-login {
  color: #38BDF8 !important;
  font-weight: 600 !important;
}

[data-theme="dark"] .auth-terms-notice {
  color: #64748B !important;
}

[data-theme="dark"] .auth-terms-notice a,
[data-theme="dark"] #auth-terms-link,
[data-theme="dark"] #auth-privacy-link {
  color: #38BDF8 !important;
  font-weight: 600 !important;
}

[data-theme="dark"] .auth-input-group input {
  background: #131C2E !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .auth-input-group .input-icon {
  color: #94A3B8 !important;
}

[data-theme="dark"] .auth-brand-logo {
  color: #F8FAFC !important;
}

[data-theme="dark"] .auth-modal-close {
  color: #94A3B8 !important;
  background: #1E293B !important;
}

[data-theme="dark"] .auth-modal-close:hover {
  color: #F8FAFC !important;
  background: #334155 !important;
}

/* ==========================================================================
   WORKSPACES, UPLOAD ZONE, TOOL PARAMS & DOWNLOAD SCREEN DARK MODE
   ========================================================================== */

/* 1. Upload Zone & Dropzone */
[data-theme="dark"] .upload-zone-wrapper,
[data-theme="dark"] .drop-zone,
[data-theme="dark"] #drop-zone {
  background: #131C2E !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .drop-zone h3 {
  color: #F8FAFC !important;
}

[data-theme="dark"] .drop-zone p {
  color: #94A3B8 !important;
}

[data-theme="dark"] .upload-illustration {
  background: #1E293B !important;
  color: #38BDF8 !important;
}

[data-theme="dark"] #select-files-btn {
  background: #38BDF8 !important;
  color: #090D16 !important;
  border: none !important;
  font-weight: 700 !important;
}

/* 2. Active Workspace Preview Panel & Thumbnail Cards */
[data-theme="dark"] .workspace-preview-panel,
[data-theme="dark"] #standard-workspace-preview {
  background: #0F172A !important;
  border-color: #1E293B !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .panel-header {
  border-bottom-color: #1E293B !important;
}

[data-theme="dark"] .panel-title,
[data-theme="dark"] #files-summary-text {
  color: #F8FAFC !important;
}

[data-theme="dark"] #add-more-files-btn,
[data-theme="dark"] #clear-all-files-btn {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .page-card {
  background: #131C2E !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .page-card-footer {
  background: #1E293B !important;
  border-top-color: #334155 !important;
  color: #F8FAFC !important;
}

/* 3. Tool Parameters & Right Options Panel */
[data-theme="dark"] .standard-controls-panel,
[data-theme="dark"] .tool-params-panel {
  background: #0F172A !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .tool-params-title,
[data-theme="dark"] .panel-title-text {
  color: #F8FAFC !important;
}

[data-theme="dark"] .info-alert,
[data-theme="dark"] .alert-box {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: #38BDF8 !important;
}

[data-theme="dark"] .btn-action-primary,
[data-theme="dark"] .btn-submit-tool {
  background: #38BDF8 !important;
  color: #090D16 !important;
  border: none !important;
  font-weight: 700 !important;
}

/* 4. Download & Result Screen Overrides */
[data-theme="dark"] .workspace-modal,
[data-theme="dark"] .result-body-content {
  background-color: #090D16 !important;
  background-image: linear-gradient(#1E293B 1px, transparent 1px), linear-gradient(90deg, #1E293B 1px, transparent 1px) !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .result-title,
[data-theme="dark"] #result-title {
  color: #F8FAFC !important;
}

[data-theme="dark"] .result-sub,
[data-theme="dark"] #result-sub {
  color: #94A3B8 !important;
}

[data-theme="dark"] .result-success-badge {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ADE80 !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] #download-result-btn {
  background: #38BDF8 !important;
  color: #090D16 !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.35) !important;
}

[data-theme="dark"] #download-result-btn:hover {
  background: #7DD3FC !important;
}

[data-theme="dark"] #start-over-btn {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] #start-over-btn:hover {
  background: #334155 !important;
  color: #FFFFFF !important;
}

/* 5. Tool Modal Header Logo & Actions Overrides */
[data-theme="dark"] .modal-tool-icon,
[data-theme="dark"] #active-tool-icon {
  background: #1E293B !important;
  color: #38BDF8 !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] .modal-tool-icon i,
[data-theme="dark"] .modal-tool-icon svg,
[data-theme="dark"] #active-tool-icon i,
[data-theme="dark"] #active-tool-icon svg {
  color: #38BDF8 !important;
  stroke: #38BDF8 !important;
}

[data-theme="dark"] .close-modal-btn {
  background: #1E293B !important;
  color: #F8FAFC !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] .close-modal-btn:hover {
  background: #334155 !important;
  color: #38BDF8 !important;
}

/* ==========================================================================
   DOWNLOAD / RESULT SCREEN COMPLETE DARK MODE OVERRIDES
   ========================================================================== */

/* 1. Full Screen Result Overlay Viewport */
[data-theme="dark"] #result-screen-overlay,
[data-theme="dark"] .result-screen-overlay {
  background-color: #090D16 !important;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
  color: #F8FAFC !important;
}

/* 2. Top Header Bar for Download Page */
[data-theme="dark"] .result-header-bar {
  background: #0F172A !important;
  border-bottom: 1px solid #1E293B !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .result-header-bar .modal-title,
[data-theme="dark"] #result-tool-name {
  color: #F8FAFC !important;
}

[data-theme="dark"] .result-header-bar .modal-subtitle,
[data-theme="dark"] #result-tool-desc {
  color: #94A3B8 !important;
}

/* 3. Result Content Card & Canvas Viewport */
[data-theme="dark"] .result-body-content {
  background: transparent !important;
  color: #F8FAFC !important;
  max-width: 900px !important;
  margin: 30px auto !important;
}

[data-theme="dark"] .result-title,
[data-theme="dark"] #result-title {
  color: #F8FAFC !important;
  font-size: 26px !important;
}

[data-theme="dark"] .result-sub,
[data-theme="dark"] #result-sub {
  color: #94A3B8 !important;
}

[data-theme="dark"] .result-preview-viewport {
  background: #0F172A !important;
  border: 1px solid #1E293B !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
  border-radius: 16px !important;
}

[data-theme="dark"] .result-stats-card {
  background: #0F172A !important;
  border: 1px solid #1E293B !important;
  color: #F8FAFC !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* 4. Download & Action Buttons */
[data-theme="dark"] #download-result-btn {
  background: #38BDF8 !important;
  color: #090D16 !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.4) !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] #download-result-btn:hover {
  background: #7DD3FC !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.55) !important;
}

[data-theme="dark"] #start-over-btn {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] #start-over-btn:hover {
  background: #334155 !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   TOOL ACTION BUTTONS, OPTIONS PANEL TOGGLES & CARD FOOTERS DARK MODE
   ========================================================================== */

/* 1. Main Process / Action Submit Buttons Across All Tools */
[data-theme="dark"] #process-pdf-btn,
[data-theme="dark"] #submit-sign-pdf-btn,
[data-theme="dark"] #edit-save-btn,
[data-theme="dark"] .action-footer .btn-primary,
[data-theme="dark"] .workspace-controls-panel .btn-primary,
[data-theme="dark"] .tool-params-panel .btn-primary,
[data-theme="dark"] .standard-controls-panel .btn-primary,
[data-theme="dark"] button[id^="submit-"] {
  background: #38BDF8 !important;
  color: #090D16 !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.4) !important;
}

[data-theme="dark"] #process-pdf-btn:hover,
[data-theme="dark"] #submit-sign-pdf-btn:hover,
[data-theme="dark"] #edit-save-btn:hover,
[data-theme="dark"] .action-footer .btn-primary:hover,
[data-theme="dark"] button[id^="submit-"]:hover {
  background: #7DD3FC !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(56, 189, 248, 0.55) !important;
}

/* 2. Options Panel Sub-buttons & Toggles (Split, Crop, Organize, etc.) */
[data-theme="dark"] .btn-mode-toggle,
[data-theme="dark"] .btn-sub-toggle,
[data-theme="dark"] .btn-range-type,
[data-theme="dark"] .crop-scope-btn,
[data-theme="dark"] #btn-reset-order,
[data-theme="dark"] #btn-reverse-order,
[data-theme="dark"] #btn-add-split-range,
[data-theme="dark"] .split-top-tabs button,
[data-theme="dark"] .split-mode-btn,
[data-theme="dark"] .crop-dim-box,
[data-theme="dark"] .tool-params-panel button:not(#process-pdf-btn):not(#submit-sign-pdf-btn),
[data-theme="dark"] .standard-controls-panel button:not(#process-pdf-btn):not(#submit-sign-pdf-btn) {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .btn-mode-toggle.active,
[data-theme="dark"] .btn-sub-toggle.active,
[data-theme="dark"] .crop-scope-btn.active,
[data-theme="dark"] .split-top-tabs button.active,
[data-theme="dark"] .split-mode-btn.active {
  background: #0284C7 !important;
  border-color: #38BDF8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35) !important;
}

[data-theme="dark"] .btn-mode-toggle:hover,
[data-theme="dark"] .btn-sub-toggle:hover,
[data-theme="dark"] #btn-reset-order:hover,
[data-theme="dark"] #btn-reverse-order:hover,
[data-theme="dark"] #btn-add-split-range:hover {
  background: #334155 !important;
  color: #38BDF8 !important;
}

/* 3. Page Card Thumbnails & Footers */
[data-theme="dark"] .page-card-footer,
[data-theme="dark"] .page-card-info,
[data-theme="dark"] .page-card-actions {
  background: #131C2E !important;
  border-top-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .page-card-label,
[data-theme="dark"] .page-card-name,
[data-theme="dark"] .page-card-footer span,
[data-theme="dark"] .page-card-footer div,
[data-theme="dark"] .page-card-footer p {
  color: #F8FAFC !important;
}

[data-theme="dark"] .page-card-footer button,
[data-theme="dark"] .page-card-actions button {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .page-card-footer button:hover,
[data-theme="dark"] .page-card-actions button:hover {
  background: #334155 !important;
  color: #38BDF8 !important;
}

/* 4. Hide Native Unstyled File Input Tooltip */
#append-file-input {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* ==========================================================================
   COMPREHENSIVE TOOL OPTIONS, PRESETS & MODAL DARK MODE OVERRIDES
   ========================================================================== */

/* 1. Organize PDF & Compress PDF Buttons (#btn-organize-reset, #btn-organize-reverse, .btn-preset-compress) */
[data-theme="dark"] #btn-organize-reset,
[data-theme="dark"] #btn-organize-reverse,
[data-theme="dark"] .btn-preset-compress {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .btn-preset-compress:hover,
[data-theme="dark"] #btn-organize-reset:hover,
[data-theme="dark"] #btn-organize-reverse:hover {
  background: #334155 !important;
  color: #38BDF8 !important;
  border-color: #38BDF8 !important;
}

[data-theme="dark"] .btn-preset-compress.active {
  background: #0284C7 !important;
  border-color: #38BDF8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
}

/* 2. Compress PDF Badge, Percent Text & Callout Box */
[data-theme="dark"] #compress-percent-badge {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #38BDF8 !important;
}

[data-theme="dark"] #compress-percent-text {
  color: #38BDF8 !important;
}

[data-theme="dark"] .split-callout-box,
[data-theme="dark"] .metrix-info-box {
  background: #131C2E !important;
  border: 1px solid #334155 !important;
  color: #94A3B8 !important;
}

[data-theme="dark"] .split-callout-box div div,
[data-theme="dark"] #compress-estimate-text,
[data-theme="dark"] #compress-estimate-text strong {
  color: #F8FAFC !important;
}

/* 3. Split PDF Range Rows & Checkboxes */
[data-theme="dark"] .split-checkbox-wrap,
[data-theme="dark"] .audit-cert-option {
  color: #F8FAFC !important;
}

[data-theme="dark"] .split-range-item,
[data-theme="dark"] .split-range-row {
  background: #131C2E !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

/* 4. Sign PDF Right Controls Panel (Palette Items, Titles, Badges) */
[data-theme="dark"] .sign-right-controls {
  background: #0F172A !important;
  border-left-color: #1E293B !important;
}

[data-theme="dark"] .sign-panel-title {
  color: #94A3B8 !important;
}

[data-theme="dark"] .field-palette-item {
  background: #131C2E !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .field-palette-item:hover {
  background: #1E293B !important;
  border-color: #38BDF8 !important;
}

[data-theme="dark"] .field-info,
[data-theme="dark"] .field-info span {
  color: #F8FAFC !important;
}

[data-theme="dark"] .field-badge-count {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #38BDF8 !important;
}

/* 5. Upgraded Signature Creation Modal Overrides */
[data-theme="dark"] .sig-modal-container {
  background: #0F172A !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .sig-modal-header {
  background: #0F172A !important;
  border-bottom-color: #1E293B !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .sig-identity-row {
  background: #131C2E !important;
  border-bottom-color: #1E293B !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .sig-input-group label {
  color: #94A3B8 !important;
}

[data-theme="dark"] .sig-input-group input {
  background: #0F172A !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .sig-modal-tabs {
  background: #131C2E !important;
  border-bottom-color: #1E293B !important;
}

[data-theme="dark"] .sig-tab-btn {
  color: #94A3B8 !important;
}

[data-theme="dark"] .sig-tab-btn:hover {
  color: #F8FAFC !important;
}

[data-theme="dark"] .sig-tab-btn.active {
  color: #38BDF8 !important;
  border-bottom-color: #38BDF8 !important;
}

[data-theme="dark"] .sig-modal-footer {
  background: #0F172A !important;
  border-top-color: #1E293B !important;
}

[data-theme="dark"] #cancel-sig-modal-btn {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] #cancel-sig-modal-btn:hover {
  background: #334155 !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] #save-sig-modal-btn {
  background: #38BDF8 !important;
  color: #090D16 !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35) !important;
}

[data-theme="dark"] #save-sig-modal-btn:hover {
  background: #7DD3FC !important;
}

/* 6. Rotate PDF, Image Format & Crop Scope Option Buttons */
[data-theme="dark"] .btn-rotate-option,
[data-theme="dark"] .btn-img-format,
[data-theme="dark"] #btn-crop-single-page,
[data-theme="dark"] #btn-crop-all-pages,
[data-theme="dark"] .tool-params-panel .btn-ghost,
[data-theme="dark"] .standard-controls-panel .btn-ghost,
[data-theme="dark"] .workspace-controls-panel .btn-ghost {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .btn-rotate-option:hover,
[data-theme="dark"] .btn-img-format:hover,
[data-theme="dark"] #btn-crop-single-page:hover,
[data-theme="dark"] #btn-crop-all-pages:hover,
[data-theme="dark"] .tool-params-panel .btn-ghost:hover,
[data-theme="dark"] .standard-controls-panel .btn-ghost:hover {
  background: #334155 !important;
  color: #38BDF8 !important;
  border-color: #38BDF8 !important;
}

[data-theme="dark"] .btn-rotate-option.active,
[data-theme="dark"] .btn-img-format.active,
[data-theme="dark"] #btn-crop-single-page.active,
[data-theme="dark"] #btn-crop-all-pages.active {
  background: #0284C7 !important;
  border-color: #38BDF8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important;
}

[data-theme="dark"] #crop-dimensions-badge,
[data-theme="dark"] .crop-dimensions-badge {
  background: #131C2E !important;
  border: 1px solid #334155 !important;
  color: #F8FAFC !important;
}

/* ==========================================================================
   DOWNLOAD / RESULT SCREEN COMPLETE DARK MODE OVERRIDES (#result-container)
   ========================================================================== */

/* 1. Full Screen Result Viewport Background */
[data-theme="dark"] #result-container,
[data-theme="dark"] .result-container {
  background-color: #090D16 !important;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
  color: #F8FAFC !important;
}

/* 2. Top Header Bar for Download Page */
[data-theme="dark"] .result-header-bar {
  background: #0F172A !important;
  border-bottom: 1px solid #1E293B !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .result-header-bar .modal-title,
[data-theme="dark"] #result-tool-name {
  color: #F8FAFC !important;
}

[data-theme="dark"] .result-header-bar .modal-subtitle,
[data-theme="dark"] #result-tool-desc {
  color: #94A3B8 !important;
}

/* 3. Result Content Card & Headings */
[data-theme="dark"] .result-body-content {
  background: transparent !important;
  color: #F8FAFC !important;
  max-width: 900px !important;
  margin: 40px auto !important;
}

[data-theme="dark"] .result-title,
[data-theme="dark"] #result-title {
  color: #F8FAFC !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  margin-top: 12px !important;
  margin-bottom: 8px !important;
}

[data-theme="dark"] .result-sub,
[data-theme="dark"] #result-sub {
  color: #94A3B8 !important;
  font-size: 15px !important;
}

[data-theme="dark"] .result-success-badge {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ADE80 !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] .result-preview-viewport {
  background: #0F172A !important;
  border: 1px solid #1E293B !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
  border-radius: 16px !important;
}

[data-theme="dark"] .result-stats-card {
  background: #0F172A !important;
  border: 1px solid #1E293B !important;
  color: #F8FAFC !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* 4. Download & Action Buttons */
[data-theme="dark"] #download-result-btn {
  background: #38BDF8 !important;
  color: #090D16 !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.4) !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] #download-result-btn:hover {
  background: #7DD3FC !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.55) !important;
}

[data-theme="dark"] #start-over-btn {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] #start-over-btn:hover {
  background: #334155 !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   NATIVE VIEW TRANSITIONS API PAGE MORPHING ANIMATIONS
   ========================================================================== */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(root) {
  animation-name: vt-fade-scale-out;
}

::view-transition-new(root) {
  animation-name: vt-fade-scale-in;
}

@keyframes vt-fade-scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes vt-fade-scale-in {
  from {
    opacity: 0;
    transform: scale(1.01);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   WHOLE-PAGE COVERAGE FOR 9 INFO & BLOG ROUTES (.info-page-overlay)
   ========================================================================== */

.info-page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: #F8FAFC;
  background-image: 
    linear-gradient(to right, rgba(203, 213, 225, 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(203, 213, 225, 0.35) 1px, transparent 1px);
  background-size: 36px 36px;
  overflow-y: auto;
  will-change: transform, opacity;
  animation: smoothPageEntrance 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.info-page-overlay.hidden {
  display: none !important;
}

.info-page-header-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  padding: 0 24px;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.info-page-body-container {
  max-width: 960px;
  margin: 32px auto 80px auto;
  padding: 0 24px;
}

.info-page-body-container .info-modal-body {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 40px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
}

/* Dark Mode Overrides for Full-Page Info Viewport */
[data-theme="dark"] .info-page-overlay {
  background-color: #090D16 !important;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .info-page-header-bar {
  background: #0F172A !important;
  border-bottom-color: #1E293B !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .info-page-header-bar .modal-title {
  color: #F8FAFC !important;
}

[data-theme="dark"] .info-page-header-bar .modal-subtitle {
  color: #94A3B8 !important;
}

[data-theme="dark"] .info-page-body-container .info-modal-body {
  background: #0F172A !important;
  border-color: #1E293B !important;
  color: #F8FAFC !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .info-article h3,
[data-theme="dark"] .info-article h4,
[data-theme="dark"] .info-article strong,
[data-theme="dark"] .info-article b {
  color: #F8FAFC !important;
}

[data-theme="dark"] .info-article p,
[data-theme="dark"] .info-article li,
[data-theme="dark"] .info-article span,
[data-theme="dark"] .info-article div {
  color: #CBD5E1 !important;
}

[data-theme="dark"] .info-highlight-box {
  background: #131C2E !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

/* ==========================================================================
   PERSISTENT WORKING BAR IN DESKTOP VIEW ONLY (min-width: 981px)
   ========================================================================== */

@media (min-width: 981px) {
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 68px !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 0 32px !important;
    background: rgba(243, 246, 248, 0.96) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  }

  body {
    padding-top: 68px !important;
  }

  .workspace-overlay {
    top: 68px !important;
    height: calc(100vh - 68px) !important;
  }

  #edit-pdf-workspace {
    top: 68px !important;
    height: calc(100vh - 68px) !important;
  }

  #result-container {
    top: 68px !important;
    height: calc(100vh - 68px) !important;
  }

  .info-page-overlay {
    top: 68px !important;
    height: calc(100vh - 68px) !important;
  }
}

/* ==========================================================================
   AdSense & SEO High-Value Master Documentation Hub Styles
   ========================================================================== */
.adsense-seo-content-hub {
  margin-top: 48px;
  padding: 40px 32px;
  background: #0F1A2B !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px;
  color: #FFFFFF !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.adsense-seo-content-hub h2,
.adsense-seo-content-hub h3,
.adsense-seo-content-hub h4 {
  color: #FFFFFF !important;
}

.adsense-seo-content-hub p,
.adsense-seo-content-hub td,
.adsense-seo-content-hub th {
  color: #94A3B8 !important;
}

.adsense-seo-content-hub .seo-card-box {
  background: #F1F4F6 !important;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.adsense-seo-content-hub .seo-card-box h4 {
  color: #0F172A !important;
}

.adsense-seo-content-hub .seo-card-box p {
  color: #334155 !important;
}

.adsense-seo-content-hub .seo-card-box:hover {
  transform: translateY(-2px);
  border-color: #6366F1 !important;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25);
}

.adsense-seo-content-hub table {
  width: 100%;
  border-collapse: collapse;
  background: #F1F4F6 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.adsense-seo-content-hub th {
  background: #E2E8F0 !important;
  color: #0F172A !important;
  font-weight: 700;
}

.adsense-seo-content-hub td {
  color: #334155 !important;
}

.adsense-seo-content-hub tr {
  border-bottom: 1px solid #E2E8F0 !important;
}

.adsense-seo-content-hub tr:last-child {
  border-bottom: none;
}

.adsense-seo-content-hub .seo-faq-item {
  background: #F1F4F6 !important;
  padding: 20px 24px;
  border-radius: 12px;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: border-color 0.2s ease;
}

.adsense-seo-content-hub .seo-faq-item h4 {
  color: #0F172A !important;
}

.adsense-seo-content-hub .seo-faq-item p {
  color: #334155 !important;
}

.adsense-seo-content-hub .seo-faq-item:hover {
  border-color: #6366F1 !important;
}

.adsense-seo-content-hub .seo-blog-pill {
  padding: 10px 18px;
  background: #F1F4F6 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 20px;
  color: #0F172A !important;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.adsense-seo-content-hub .seo-blog-pill:hover {
  background: #6366F1 !important;
  color: #FFFFFF !important;
  border-color: #6366F1 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

.adsense-seo-content-hub .seo-blog-pill:hover i {
  color: #FFFFFF !important;
}

@media (max-width: 768px) {
  .adsense-seo-content-hub {
    padding: 24px 14px !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    border-radius: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .adsense-seo-content-hub h2 {
    font-size: 20px !important;
    line-height: 1.35 !important;
    margin: 10px 0 8px 0 !important;
  }

  .adsense-seo-content-hub h3 {
    font-size: 17px !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
  }

  .adsense-seo-content-hub h4 {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  .adsense-seo-content-hub p {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  .adsense-seo-content-hub .seo-card-box,
  .adsense-seo-content-hub .seo-faq-item {
    padding: 16px 14px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .adsense-seo-content-hub table th,
  .adsense-seo-content-hub table td {
    padding: 8px 10px !important;
    font-size: 11.5px !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .adsense-seo-content-hub hr {
    margin: 24px 0 !important;
  }

  /* Force clean single column stacking on mobile screens */
  .adsense-seo-content-hub div[style*="display: grid"],
  .adsense-seo-content-hub div[style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #sandbox-card-container {
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #sandbox-card-container > div {
    width: 85px !important;
    padding: 8px 4px !important;
  }

  #audit-hash-display {
    word-break: break-all !important;
    font-size: 10px !important;
    display: block !important;
    margin-top: 4px !important;
  }

  .adsense-seo-content-hub .seo-blog-pill {
    padding: 8px 14px !important;
    font-size: 12px !important;
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}