* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background: #0f172a;
  color: white;
  line-height: 1.6;
}

/* HEADER */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.nav {
  display: flex;
  gap: 24px;
}

.nav a {
  color: #d1d5db;
  text-decoration: none;
  font-size: 15px;
  transition: 0.3s;
}

.nav a:hover {
  color: white;
}

.auth {
  display: flex;
  gap: 12px;
}

.btn {
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.login-btn {
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
}

.signup-btn {
  background: #2563eb;
  color: white;
}

/* HERO */

.hero {
  padding: 80px 40px 60px;
  text-align: center;
}

.hero-content {
  max-width: 850px;
  margin: auto;
}

.hero h1 {
  font-size: 56px;
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero p {
  font-size: 20px;
  color: #cbd5e1;
  margin-bottom: 35px;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.primary-btn,
.secondary-btn {
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.primary-btn {
  background: #2563eb;
  color: white;
}

.secondary-btn {
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
}

.primary-btn:hover,
.secondary-btn:hover {
  transform: translateY(-2px);
}

/* TRUST BAR */

.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 30px 60px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #cbd5e1;
}

/* TOOLS */

.tools-section {
  padding: 70px 60px;
  text-align: center;
}

.tools-section h2 {
  font-size: 40px;
  margin-bottom: 10px;
}

.section-subtitle {
  color: #cbd5e1;
  margin-bottom: 40px;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.tool-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 30px 20px;
  text-decoration: none;
  color: white;
  transition: 0.3s;
  backdrop-filter: blur(10px);
}

.tool-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.2);
}

.icon {
  font-size: 36px;
  margin-bottom: 15px;
}

.tool-card h3 {
  margin-bottom: 10px;
  font-size: 20px;
}

.tool-card p {
  color: #cbd5e1;
  font-size: 14px;
}

/* DROP ZONE */

.drop-zone {
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: 16px;
  padding: 50px;
  margin: 30px auto;
  max-width: 700px;
  cursor: pointer;
  background: rgba(255,255,255,0.02);
}

.drop-zone:hover {
  border-color: #2563eb;
}

#fileList {
  margin: 20px auto;
  max-width: 700px;
  text-align: left;
}

/* FORM BUTTON */

button[type="submit"] {
  background: #2563eb;
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: bold;
  margin-top: 15px;
}

button[type="submit"]:hover {
  opacity: 0.9;
}

/* PROGRESS */

.progress-container {
  width: 700px;
  max-width: 90%;
  margin: 30px auto;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
}

.progress-bar {
  width: 0%;
  height: 30px;
  background: #2563eb;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
}

/* FOOTER */

.footer {
  padding: 40px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: #94a3b8;
}

/* TOOL PAGE */

.tool-page {
  padding: 80px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tool-box {
  width: 100%;
  max-width: 900px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 50px;
  backdrop-filter: blur(12px);
  text-align: center;
}

.tool-box h1 {
  font-size: 42px;
  margin-bottom: 15px;
}

.tool-box p {
  color: #cbd5e1;
  margin-bottom: 30px;
  font-size: 16px;
}

.tool-box form {
  margin-top: 20px;
}

/* FORM CENTER FIX */

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

form button[type="submit"] {
  display: inline-block;
  margin-top: 20px;
}

#fileList {
  width: 100%;
  max-width: 700px;
  margin: 20px auto;
  text-align: left;
}

/* iLovePDF STYLE PREMIUM LIGHT UI */

/* BODY */

body {
  background: #f5f7fb;
  color: #1f2937;
}

/* HEADER */

.header {
  background: rgba(245, 247, 251, 0.96);
  border-bottom: 1px solid #dbe3ee;
  backdrop-filter: blur(10px);
}

.logo {
  color: #2563eb;
  font-weight: 800;
  font-size: 24px;
}

.nav a {
  color: #475569;
  font-weight: 500;
}

.nav a:hover {
  color: #2563eb;
}

/* BUTTONS */

.login-btn {
  background: white;
  color: #2563eb;
  border: 1px solid #dbe3ee;
}

.signup-btn {
  background: #2563eb;
  color: white;
  border: none;
}

.primary-btn {
  background: #2563eb;
  color: white;
}

.secondary-btn {
  background: transparent;
  color: #2563eb;
  border: 1px solid #cbd5e1;
}

/* HERO */

.hero {
  background: transparent;
}

.hero h1 {
  color: #0f172a;
}

.hero p {
  color: #64748b;
}

/* TRUST BAR */

.trust-bar {
  background: transparent;
  border-top: 1px solid #dbe3ee;
  border-bottom: 1px solid #dbe3ee;
  color: #475569;
}

/* TOOLS SECTION */

.tools-section h2 {
  color: #0f172a;
}

.section-subtitle {
  color: #64748b;
}

/* TOOL CARDS */

.tool-card {
  background: rgba(255,255,255,0.35);
  border: 1.5px solid #dbe3ee;
  border-radius: 18px;
  backdrop-filter: blur(12px);
  color: #0f172a;
  box-shadow: none;
  transition: 0.3s;
}

.tool-card:hover {
  transform: translateY(-5px);
  border-color: #2563eb;
  background: rgba(255,255,255,0.55);
}

.tool-card h3 {
  color: #0f172a;
}

.tool-card p {
  color: #64748b;
}

/* ICONS */

.icon {
  font-size: 34px;
}

/* TOOL PAGE */

.tool-box {
  background: rgba(255,255,255,0.45);
  border: 1.5px solid #dbe3ee;
  border-radius: 22px;
  backdrop-filter: blur(12px);
  box-shadow: none;
}

.tool-box h1 {
  color: #0f172a;
}

.tool-box p {
  color: #64748b;
}

/* DROP ZONE */

.drop-zone {
  background: rgba(255,255,255,0.35);
  border: 2px dashed #cbd5e1;
}

.drop-zone:hover {
  border-color: #2563eb;
}

/* INPUT */

input[type="text"] {
  background: rgba(255,255,255,0.7) !important;
  color: #0f172a !important;
  border: 1px solid #dbe3ee !important;
}

/* PROGRESS */

.progress-container {
  background: #e2e8f0;
}

.progress-bar {
  background: #2563eb;
  color: white;
}

/* FOOTER */

.footer {
  background: transparent;
  border-top: 1px solid #dbe3ee;
  color: #64748b;
}
/* SAFE LIGHT PREMIUM COLORS ONLY */

/* BODY */

body {
  background: #f4f6fb;
  color: #1e293b;
}

/* HEADER */

.header {
  background: rgba(244, 246, 251, 0.95);
  border-bottom: 1px solid #dbe2ea;
}

.logo {
  color: #2563eb;
}

.nav a {
  color: #475569;
}

.nav a:hover {
  color: #2563eb;
}

/* BUTTONS */

.login-btn {
  background: white;
  color: #2563eb;
  border: 1px solid #dbe2ea;
}

.signup-btn {
  background: #2563eb;
  color: white;
}

/* HERO */

.hero h1 {
  color: #0f172a;
}

.hero p {
  color: #64748b;
}

/* TOOL CARDS */

.tool-card {
  background: rgba(255,255,255,0.55);
  border: 1px solid #dbe2ea;
  color: #0f172a;
  box-shadow: none;
}

.tool-card h3 {
  color: #0f172a;
}

.tool-card p {
  color: #64748b;
}

/* TOOL PAGE */

.tool-box {
  background: rgba(255,255,255,0.65);
  border: 1px solid #dbe2ea;
  box-shadow: none;
}

.tool-box h1 {
  color: #0f172a;
}

.tool-box p {
  color: #64748b;
}

/* DROP ZONE */

.drop-zone {
  background: rgba(255,255,255,0.6);
  border: 2px dashed #cbd5e1;
}

/* FOOTER */

.footer {
  color: #64748b;
  border-top: 1px solid #dbe2ea;
}/* RESET */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #f5f7fb;
  color: #1e293b;
  line-height: 1.6;
}

/* HEADER */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 40px;
  background: rgba(245, 247, 251, 0.96);
  border-bottom: 1px solid #dbe2ea;
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.logo {
  font-size: 24px;
  font-weight: 800;
  color: #2563eb;
}

.nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
}

.nav a {
  text-decoration: none;
  color: #475569;
  font-size: 15px;
  font-weight: 500;
  transition: 0.3s;
}

.nav a:hover {
  color: #2563eb;
}

.auth {
  display: flex;
  gap: 12px;
}

.btn {
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.login-btn {
  background: white;
  color: #2563eb;
  border: 1px solid #dbe2ea;
}

.signup-btn {
  background: #2563eb;
  color: white;
}

/* HERO */

.hero {
  text-align: center;
  padding: 60px 20px 40px;
}

.hero-content {
  max-width: 800px;
  margin: auto;
}

.hero h1 {
  font-size: 44px;
  color: #0f172a;
  margin-bottom: 14px;
}

.hero p {
  font-size: 18px;
  color: #64748b;
  margin-bottom: 26px;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.primary-btn,
.secondary-btn {
  padding: 13px 26px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.primary-btn {
  background: #2563eb;
  color: white;
}

.secondary-btn {
  background: white;
  color: #2563eb;
  border: 1px solid #dbe2ea;
}

.primary-btn:hover,
.secondary-btn:hover {
  transform: translateY(-2px);
}

/* TRUST BAR */

.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 18px 30px;
  text-align: center;
  border-top: 1px solid #dbe2ea;
  border-bottom: 1px solid #dbe2ea;
  color: #475569;
  font-size: 14px;
}

/* TOOLS SECTION */

.tools-section {
  padding: 50px 40px;
  text-align: center;
}

.tools-section h2 {
  font-size: 34px;
  color: #0f172a;
  margin-bottom: 8px;
}

.section-subtitle {
  color: #64748b;
  margin-bottom: 30px;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.tool-card {
  background: rgba(255,255,255,0.55);
  border: 1px solid #dbe2ea;
  border-radius: 18px;
  padding: 24px 18px;
  text-decoration: none;
  color: #0f172a;
  transition: 0.3s;
  backdrop-filter: blur(10px);
}

.tool-card:hover {
  transform: translateY(-5px);
  border-color: #2563eb;
}

.icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.tool-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.tool-card p {
  font-size: 14px;
  color: #64748b;
}

/* TOOL PAGE */

.tool-page {
  padding: 35px 20px 50px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.tool-box {
  width: 100%;
  max-width: 720px;
  background: rgba(255,255,255,0.65);
  border: 1px solid #dbe2ea;
  border-radius: 20px;
  padding: 34px 28px;
  text-align: center;
}

.tool-box h1 {
  font-size: 30px;
  color: #0f172a;
  margin-bottom: 10px;
}

.tool-box p {
  color: #64748b;
  font-size: 15px;
  margin-bottom: 20px;
}

/* FORM */

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.drop-zone {
  width: 100%;
  max-width: 620px;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  padding: 28px 18px;
  margin: 18px auto;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
}

.drop-zone:hover {
  border-color: #2563eb;
}

.drop-zone p {
  margin: 0;
  font-size: 14px;
}

#fileList {
  width: 100%;
  max-width: 620px;
  margin: 14px auto;
  text-align: left;
}

button[type="submit"] {
  margin-top: 14px;
  background: #2563eb;
  color: white;
  border: none;
  padding: 13px 26px;
  min-width: 180px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
}

button[type="submit"]:hover {
  opacity: 0.95;
}

/* INPUT */

input[type="text"] {
  margin-top: 12px;
  padding: 14px;
  width: 300px;
  max-width: 90%;
  border-radius: 12px;
  border: 1px solid #dbe2ea;
  background: white;
  color: #0f172a;
  text-align: center;
}

/* PROGRESS */

.progress-container {
  width: 100%;
  max-width: 620px;
  margin: 20px auto 0;
  background: #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.progress-bar {
  width: 0%;
  height: 28px;
  background: #2563eb;
  color: white;
  line-height: 28px;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
}

/* FOOTER */

.footer {
  padding: 28px;
  text-align: center;
  border-top: 1px solid #dbe2ea;
  color: #64748b;
  font-size: 14px;
}

/* MOBILE */

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
  }

  .nav {
    gap: 12px;
  }

  .hero {
    padding: 40px 16px 30px;
  }

  .hero h1 {
    font-size: 30px;
  }

  .hero p {
    font-size: 15px;
  }

  .trust-bar {
    grid-template-columns: repeat(2, 1fr);
    padding: 18px;
  }

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

  .tools-section {
    padding: 40px 18px;
  }

  .tool-box {
    padding: 26px 18px;
  }

  .tool-box h1 {
    font-size: 24px;
  }

  button[type="submit"] {
    width: 100%;
    max-width: 300px;
  }
}
/* ===== FINAL COMPACT PREMIUM FIX ===== */
/* style.css ke END me paste karo */

/* HEADER */

.header {
  padding: 14px 32px;
  border-bottom: 1.5px solid #cbd5e1;
  background: rgba(245, 247, 251, 0.92);
}

.logo {
  font-size: 20px;
}

.nav {
  gap: 16px;
}

.nav a {
  font-size: 14px;
}

.btn {
  padding: 8px 16px;
  font-size: 14px;
}

/* HERO */

.hero {
  padding: 40px 20px 28px;
}

.hero h1 {
  font-size: 34px;
  margin-bottom: 10px;
}

.hero p {
  font-size: 15px;
  margin-bottom: 18px;
}

.primary-btn,
.secondary-btn {
  padding: 11px 22px;
  font-size: 14px;
}

/* TRUST BAR */

.trust-bar {
  padding: 14px 20px;
  gap: 10px;
  font-size: 13px;
  border-top: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
}

/* TOOLS SECTION */

.tools-section {
  padding: 38px 30px;
}

.tools-section h2 {
  font-size: 28px;
  margin-bottom: 6px;
}

.section-subtitle {
  font-size: 14px;
  margin-bottom: 22px;
}

.tools-grid {
  gap: 14px;
}

.tool-card {
  background: transparent;
  border: 1.5px solid #cbd5e1;
  border-radius: 16px;
  padding: 20px 14px;
  box-shadow: none;
}

.tool-card:hover {
  border-color: #2563eb;
  transform: translateY(-4px);
}

.icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.tool-card h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.tool-card p {
  font-size: 13px;
}

/* TOOL PAGE */

.tool-page {
  padding: 24px 18px 36px;
}

.tool-box {
  max-width: 660px;
  padding: 28px 22px;
  background: transparent;
  border: 1.5px solid #cbd5e1;
  border-radius: 18px;
  box-shadow: none;
}

.tool-box h1 {
  font-size: 26px;
  margin-bottom: 8px;
}

.tool-box p {
  font-size: 14px;
  margin-bottom: 16px;
}

/* DROP ZONE */

.drop-zone {
  max-width: 560px;
  padding: 22px 16px;
  margin: 14px auto;
  background: transparent;
  border: 2px dashed #cbd5e1;
}

.drop-zone p {
  font-size: 13px;
}

#fileList {
  max-width: 560px;
  margin: 10px auto;
}

/* BUTTON */

button[type="submit"] {
  min-width: 170px;
  padding: 11px 22px;
  font-size: 14px;
  margin-top: 12px;
}

/* INPUT */

input[type="text"] {
  padding: 12px;
  font-size: 14px;
}

/* PROGRESS */

.progress-container {
  max-width: 560px;
  margin-top: 16px;
}

.progress-bar {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* FOOTER */

.footer {
  padding: 22px;
  font-size: 13px;
}

/* MOBILE */

@media (max-width: 768px) {
  .hero h1 {
    font-size: 26px;
  }

  .tool-box h1 {
    font-size: 22px;
  }

  .tools-section {
    padding: 32px 16px;
  }

  .tool-box {
    padding: 22px 16px;
  }
}

/* ===== FONT + STRONGER BORDER UPGRADE ===== */
/* style.css ke END me paste karo */

/* GOOGLE FONT STYLE FEEL */

* {
  font-family: 'Segoe UI', 'Inter', 'Poppins', sans-serif;
}

/* HEADER */

.logo {
  font-weight: 700;
  letter-spacing: 0.3px;
}

.nav a {
  font-weight: 600;
  color: #334155;
}

/* HERO */

.hero h1 {
  font-weight: 700;
  letter-spacing: -0.5px;
}

.hero p {
  font-weight: 500;
}

/* TOOL CARDS — BORDER MORE VISIBLE */

.tool-card {
  background: rgba(255,255,255,0.15);
  border: 2px solid #94a3b8;
  box-shadow: none;
}

.tool-card:hover {
  border-color: #2563eb;
  background: rgba(255,255,255,0.25);
}

.tool-card h3 {
  font-weight: 700;
}

.tool-card p {
  color: #475569;
  font-weight: 500;
}

/* TOOL PAGE BOX */

.tool-box {
  background: rgba(255,255,255,0.12);
  border: 2px solid #94a3b8;
}

.tool-box h1 {
  font-weight: 700;
}

.tool-box p {
  font-weight: 500;
}

/* DROP ZONE */

.drop-zone {
  border: 2px dashed #94a3b8;
  background: rgba(255,255,255,0.12);
}

.drop-zone:hover {
  border-color: #2563eb;
}

/* INPUT */

input[type="text"] {
  border: 2px solid #94a3b8;
  font-weight: 500;
}

/* HEADER BORDER */

.header {
  border-bottom: 2px solid #cbd5e1;
}

/* FOOTER */

.footer {
  border-top: 2px solid #cbd5e1;
}

/* HERO DESCRIPTION FONT SIZE FIX */

.hero p {
  font-size: 20px;
  line-height: 1.7;
  max-width: 850px;
  margin: 0 auto 22px;
  font-weight: 500;
  color: #475569;
}

/* TOOL CATEGORY BUTTONS */

.tool-categories {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 20px 35px;
}

.category-btn {
  padding: 12px 22px;
  border-radius: 30px;
  border: 1.5px solid #cbd5e1;
  background: transparent;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.category-btn:hover {
  border-color: #2563eb;
  color: #2563eb;
}

.category-btn.active {
  background: #1e293b;
  color: white;
  border-color: #1e293b;
}

/* MOBILE */

@media (max-width: 768px) {
  .tool-categories {
    gap: 10px;
    padding: 10px 16px 28px;
  }

  .category-btn {
    padding: 10px 18px;
    font-size: 13px;
  }
}/* PREMIUM ILOVEPDF STYLE ICONS */

.icon-stack {
  position: relative;
  width: 34px;
  height: 34px;
  margin: 0 auto 16px;
}

.icon-stack span {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.icon-stack span:first-child {
  top: 0;
  left: 0;
}

.icon-stack span:last-child {
  bottom: 0;
  right: 0;
}

.icon-stack.orange span {
  background: #f97316;
}

.icon-stack.red span {
  background: #ef4444;
}

.icon-grid {
  width: 34px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 0 auto 16px;
}

.icon-grid span {
  width: 16px;
  height: 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.icon-grid.green span {
  background: #65a30d;
}

.icon-file {
  width: 34px;
  height: 34px;
  margin: 0 auto 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  font-weight: bold;
}

.icon-file.blue {
  background: #3b82f6;
}

.icon-file.purple {
  background: #8b5cf6;
}

.icon-file.pink {
  background: #ec4899;
}

.icon-file.sky {
  background: #0ea5e9;
}

.icon-file.teal {
  background: #14b8a6;
}

/* HELLOPDF LOGO */

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #2563eb;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.logo-text {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.5px;
}

/* CATEGORY BUTTON CLICKABLE */

.category-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* GAP REDUCE */

.tool-categories {
  padding-bottom: 18px;
  margin-bottom: 8px;
}

.tools-section {
  margin-top: 0;
  padding-top: 10px;
}

.icon-file i {
  font-size: 34px;
  color: #ffffff;
  line-height: 1;
}

.icon-file.orange {
  background: linear-gradient(135deg, #f97316, #ea580c);
}

.icon-file i {
  font-size: 34px;
  color: #ffffff;
  line-height: 1;
}

.icon-file.orange {
  background: linear-gradient(135deg, #f97316, #ea580c);
}

.icon-file.green {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.icon-file.sky {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}

.icon-file.sky {
  background: linear-gradient(135deg, #22d3ee, #06b6d4);
}

.category-nav {
  max-width: 1200px;
  margin: 30px auto 40px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.category-nav a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 25px rgba(0,0,0,0.07);
  transition: 0.25s ease;
}

.category-nav a:hover {
  transform: translateY(-3px);
  color: #ef4444;
  border-color: #ef4444;
}

.tools-section {
  max-width: 1200px;
  margin: 0 auto 55px;
  padding: 0 20px;
}

.tools-section h2 {
  font-size: 30px;
  color: #111827;
  margin-bottom: 8px;
  text-align: left;
}

.section-subtitle {
  color: #6b7280;
  margin-bottom: 24px;
  font-size: 16px;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.tool-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 22px 18px;
  text-decoration: none;
  color: #111827;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: 0.25s ease;
  min-height: 165px;
}

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

.tool-card h3 {
  margin: 14px 0 8px;
  font-size: 18px;
  color: #111827;
}

.tool-card p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.4;
}

.icon-file {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-file i {
  font-size: 28px;
  color: #ffffff;
}

.icon-file.red {
  background: linear-gradient(135deg, #fb7185, #ef4444);
}

.icon-file.blue {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
}

.icon-file.green {
  background: linear-gradient(135deg, #4ade80, #16a34a);
}

.icon-file.orange {
  background: linear-gradient(135deg, #fb923c, #ea580c);
}

.icon-file.purple {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
}

.icon-file.sky {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
}

.icon-file.teal {
  background: linear-gradient(135deg, #2dd4bf, #0f766e);
}

.icon-file.pink {
  background: linear-gradient(135deg, #f472b6, #db2777);
}

html {
  scroll-behavior: smooth;
}

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

@media (max-width: 850px) {
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tools-section h2 {
    text-align: center;
  }

  .section-subtitle {
    text-align: center;
  }
}

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

  .category-nav a {
    width: 100%;
    justify-content: center;
  }
}

.category-nav {
  max-width: 1200px;
  margin: 30px auto 40px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.category-nav a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 25px rgba(0,0,0,0.07);
  transition: 0.25s ease;
}

.category-nav a:hover {
  transform: translateY(-3px);
  color: #ef4444;
  border-color: #ef4444;
}

.tools-section {
  max-width: 1200px;
  margin: 0 auto 55px;
  padding: 0 20px;
}

.tools-section h2 {
  font-size: 30px;
  color: #111827;
  margin-bottom: 8px;
}

.section-subtitle {
  color: #6b7280;
  margin-bottom: 24px;
  font-size: 16px;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.tool-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 22px 18px;
  text-decoration: none;
  color: #111827;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: 0.25s ease;
  min-height: 165px;
}

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

.tool-card h3 {
  margin: 14px 0 8px;
  font-size: 18px;
  color: #111827;
}

.tool-card p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.4;
}

.icon-file {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-file i {
  font-size: 28px;
  color: #ffffff;
}

.icon-file.red { background: linear-gradient(135deg, #fb7185, #ef4444); }
.icon-file.blue { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.icon-file.green { background: linear-gradient(135deg, #4ade80, #16a34a); }
.icon-file.orange { background: linear-gradient(135deg, #fb923c, #ea580c); }
.icon-file.purple { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.icon-file.sky { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.icon-file.teal { background: linear-gradient(135deg, #2dd4bf, #0f766e); }
.icon-file.pink { background: linear-gradient(135deg, #f472b6, #db2777); }

html {
  scroll-behavior: smooth;
}

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

@media (max-width: 850px) {
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tools-section h2,
  .section-subtitle {
    text-align: center;
  }
}

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

  .category-nav a {
    width: 100%;
    justify-content: center;
  }
}

.main-header {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 100;
}

.main-header .container {
  max-width: 1200px;
  margin: auto;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-weight: bold;
  font-size: 20px;
}

.nav a {
  margin: 0 10px;
  text-decoration: none;
  color: #111827;
  font-weight: 500;
}

.auth-buttons button {
  margin-left: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.login-btn {
  background: transparent;
  border: 1px solid #d1d5db;
}

.signup-btn {
  background: #ef4444;
  color: #fff;
}

body > .login-btn,
body > .signup-btn,
body > button.login-btn,
body > button.signup-btn {
  display: none !important;
}

.main-header {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 100;
}

.main-header .container {
  max-width: 1200px;
  margin: auto;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 21px;
  font-weight: 800;
  color: #2563eb;
  letter-spacing: -0.5px;
}

.nav a {
  margin: 0 14px;
  text-decoration: none;
  color: #111827;
  font-weight: 600;
}

.auth-buttons {
  display: flex;
  gap: 10px;
}

.auth-buttons button {
  padding: 9px 15px;
  border-radius: 8px;
  cursor: pointer;
}

.login-btn {
  background: transparent;
  color: #2563eb;
  border: 1px solid transparent;
}

.signup-btn {
  background: #ef4444;
  color: #ffffff;
  border: none;
}

.main-header {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 9999;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  text-decoration: none;
  color: #2563eb;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.main-nav a {
  text-decoration: none;
  color: #111827;
  font-size: 15px;
  font-weight: 600;
}

.main-nav a:hover {
  color: #2563eb;
}

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

.login-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.signup-link {
  background: #ef4444;
  color: #ffffff;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
}

@media (max-width: 768px) {
  .header-container {
    flex-wrap: wrap;
    gap: 14px;
  }

  .main-nav {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
  }
}

.auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.auth-box {
  width: 100%;
  max-width: 380px;
  background: #ffffff;
  padding: 28px;
  border-radius: 18px;
  position: relative;
  text-align: center;
}

.close-modal {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 26px;
  cursor: pointer;
}

.auth-box input {
  width: 100%;
  padding: 13px;
  margin: 10px 0;
  border: 1px solid #d1d5db;
  border-radius: 10px;
}

.auth-submit {
  width: 100%;
  padding: 13px;
  margin-top: 12px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

#authMessage {
  margin-top: 12px;
  color: #ef4444;
  font-size: 14px;
}

/* =========================
   MOBILE RESPONSIVE FIX
   ========================= */

@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  header,
  .header,
  .navbar {
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .logo,
  header h1,
  .brand {
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  nav,
  .nav-links {
    gap: 14px !important;
    font-size: 13px !important;
  }

  .auth-buttons,
  .header-buttons {
    display: flex !important;
    gap: 8px !important;
  }

  .auth-buttons a,
  .auth-buttons button,
  .login-btn,
  .signup-btn {
    font-size: 12px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
  }

  .tools-menu,
  .top-tools,
  .tool-nav {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 18px !important;
    padding: 10px 14px !important;
    scrollbar-width: none;
  }

  .tools-menu::-webkit-scrollbar,
  .top-tools::-webkit-scrollbar,
  .tool-nav::-webkit-scrollbar {
    display: none;
  }

  .tools-menu a,
  .top-tools a,
  .tool-nav a {
    font-size: 13px !important;
    flex: 0 0 auto !important;
  }

  .hero {
    padding: 34px 18px 24px !important;
    text-align: center !important;
  }

  .hero h1 {
    font-size: 25px !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  .hero p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  .category-buttons,
  .hero-buttons {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding: 8px 4px 4px !important;
    justify-content: flex-start !important;
    scrollbar-width: none;
  }

  .category-buttons::-webkit-scrollbar,
  .hero-buttons::-webkit-scrollbar {
    display: none;
  }

  .category-buttons button,
  .category-buttons a,
  .hero-buttons button,
  .hero-buttons a {
    flex: 0 0 auto !important;
    padding: 12px 18px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
  }

  section,
  .section {
    padding: 22px 16px !important;
  }

  section h2,
  .section-title {
    font-size: 24px !important;
    margin-bottom: 10px !important;
  }

  section p,
  .section-subtitle {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .tools-grid,
  .tool-grid,
  .cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    padding: 16px 0 !important;
  }

  .tool-card,
  .card {
    min-height: 135px !important;
    padding: 18px 10px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
  }

  .tool-card .icon,
  .card .icon,
  .tool-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  .tool-card h3,
  .card h3 {
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
  }

  .tool-card p,
  .card p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 430px) {

  .hero h1 {
    font-size: 23px !important;
  }

  .hero p {
    font-size: 14px !important;
  }

  .tools-grid,
  .tool-grid,
  .cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .tool-card,
  .card {
    min-height: 128px !important;
    padding: 16px 8px !important;
  }

  .tool-card h3,
  .card h3 {
    font-size: 14px !important;
  }

  .tool-card p,
  .card p {
    font-size: 11.5px !important;
  }
}

/* MOBILE RESPONSIVE FIX */

@media screen and (max-width: 768px){

  .tools-grid{
    display:grid !important;
    grid-template-columns: repeat(2,1fr) !important;
    gap:14px !important;
  }

  .tool-card{
    width:100% !important;
    min-height:140px !important;
    padding:16px 10px !important;
    border-radius:16px !important;
  }

  .tool-card h3{
    font-size:15px !important;
  }

  .tool-card p{
    font-size:12px !important;
  }

  .hero h1{
    font-size:28px !important;
    line-height:1.3 !important;
  }

  .hero p{
    font-size:15px !important;
    padding:0 10px !important;
  }

  .categories{
    overflow-x:auto !important;
    white-space:nowrap !important;
    padding-bottom:10px !important;
  }

  .categories button{
    flex:0 0 auto !important;
  }

  header{
    padding:12px !important;
  }

  nav{
    gap:12px !important;
    font-size:13px !important;
  }

}
/* MOBILE RESPONSIVE FIX */

@media screen and (max-width: 768px){

  .tools-grid{
    display:grid !important;
    grid-template-columns: repeat(2,1fr) !important;
    gap:14px !important;
  }

  .tool-card{
    width:100% !important;
    min-height:140px !important;
    padding:16px 10px !important;
    border-radius:16px !important;
  }

  .tool-card h3{
    font-size:15px !important;
  }

  .tool-card p{
    font-size:12px !important;
  }

  .hero h1{
    font-size:28px !important;
    line-height:1.3 !important;
  }

  .hero p{
    font-size:15px !important;
    padding:0 10px !important;
  }

  header{
    padding:12px !important;
  }

}

/* MOBILE HEADER DRAWERS */

.mobile-header {
  display: none;
}

.drawer-overlay {
  display: none;
}

@media (max-width: 768px) {

  .mobile-header {
    display: flex !important;
    height: 64px;
    padding: 0 18px;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .mobile-menu-btn,
  .mobile-grid-btn {
    border: none;
    background: transparent;
    font-size: 34px;
    font-weight: 700;
    color: #1f2937;
    cursor: pointer;
    line-height: 1;
  }

  .mobile-grid-btn {
    font-size: 28px;
    letter-spacing: 2px;
    transform: rotate(90deg);
  }

  .mobile-logo {
    font-size: 26px;
    font-weight: 800;
    color: #2563eb;
    text-decoration: none;
  }

  .tools-drawer,
  .main-drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: 86%;
    max-width: 360px;
    height: 100vh;
    background: #ffffff;
    z-index: 2000;
    padding: 26px 24px;
    transition: 0.3s ease;
    box-shadow: 8px 0 30px rgba(0,0,0,0.12);
    overflow-y: auto;
  }

  .main-drawer {
    left: auto;
    right: -100%;
  }

  .tools-drawer.active {
    left: 0;
  }

  .main-drawer.active {
    right: 0;
  }

  .drawer-close {
    border: none;
    background: transparent;
    font-size: 42px;
    float: right;
    cursor: pointer;
    color: #1f2937;
  }

  .tools-drawer h3 {
    margin-top: 60px;
    margin-bottom: 22px;
    font-size: 26px;
    color: #111827;
  }

  .tools-drawer a,
  .main-drawer a {
    display: block;
    padding: 16px 0;
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    text-decoration: none;
    border-bottom: 1px solid #f1f1f1;
  }

  .drawer-section {
    margin-top: 80px;
    margin-bottom: 28px;
  }

  .drawer-section h4 {
    font-size: 20px;
    color: #6b7280;
    margin: 22px 0;
  }

  .drawer-bottom {
    margin-top: 80px;
    border-top: 1px solid #e5e7eb;
    padding-top: 25px;
  }

  .drawer-login,
  .drawer-signup {
    text-align: center;
    border-radius: 12px;
    margin-top: 14px;
    padding: 16px !important;
    border: 2px solid #ef4444 !important;
    color: #ef4444 !important;
  }

  .drawer-signup {
    background: #ef4444;
    color: #ffffff !important;
  }

  .drawer-overlay.active {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1500;
  }

  /* old desktop header hide on mobile */
  .top-nav,
  .navbar,
  nav {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .desktop-header {
    display: none !important;
  }
}

/* AUTH PAGES */

.auth-page {
  min-height: 100vh;
  background: #f6f8fb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 430px;
  background: #ffffff;
  padding: 34px 28px;
  border-radius: 22px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
  text-align: center;
}

.auth-logo {
  display: inline-block;
  font-size: 30px;
  font-weight: 800;
  color: #2563eb;
  text-decoration: none;
  margin-bottom: 22px;
}

.auth-card h1 {
  font-size: 30px;
  color: #111827;
  margin-bottom: 8px;
}

.auth-card p {
  color: #6b7280;
  font-size: 15px;
  margin-bottom: 24px;
}

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

.auth-form input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid #dbe1ea;
  border-radius: 12px;
  font-size: 15px;
  outline: none;
}

.auth-form input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.auth-form button {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 12px;
  background: #ef4444;
  color: white;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.social-login {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-login button {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #dbe1ea;
  background: #ffffff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.auth-switch {
  margin-top: 22px;
  margin-bottom: 0 !important;
}

.auth-switch a {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 480px) {
  .auth-card {
    padding: 30px 20px;
    border-radius: 18px;
  }

  .auth-card h1 {
    font-size: 26px;
  }
}

/* FINAL FIX: hide desktop header on mobile */
@media (max-width: 768px) {
  .desktop-header {
    display: none !important;
  }
}

/* CATEGORY STYLE LEFT DRAWER */

@media (max-width: 768px) {
  .tools-catalog-drawer {
    width: 92% !important;
    max-width: 420px !important;
    padding: 28px 26px !important;
  }

  .tools-catalog-drawer .drawer-close {
    float: right;
    font-size: 44px;
    margin-bottom: 20px;
  }

  .drawer-category {
    clear: both;
    margin-bottom: 34px;
  }

  .drawer-category h4 {
    font-size: 18px;
    font-weight: 800;
    color: #6b7280;
    margin: 26px 0 14px;
    letter-spacing: 0.5px;
  }

  .drawer-category a {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 13px 0 !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    border-bottom: none !important;
    text-decoration: none !important;
  }
}

/* HELLOPDF NEW DRAWER FINAL */

/* HELLOPDF DRAWER UI FINAL */

.tools-catalog-drawer {
  position: fixed !important;
  top: 0 !important;
  left: -100% !important;
  width: 92% !important;
  max-width: 430px !important;
  height: 100vh !important;
  background: #fff !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
  transition: 0.3s ease !important;
  padding: 26px 24px !important;
}

.tools-catalog-drawer.active {
  left: 0 !important;
}

.tools-catalog-drawer .drawer-close {
  background: none !important;
  border: none !important;
  font-size: 44px !important;
  float: right !important;
  cursor: pointer !important;
  color: #111827 !important;
}

.drawer-category {
  clear: both !important;
  margin-bottom: 30px !important;
}

.drawer-category h4 {
  font-size: 17px !important;
  color: #6b7280 !important;
  font-weight: 900 !important;
  margin: 28px 0 12px !important;
  letter-spacing: 0.4px !important;
}

.drawer-category a {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  text-decoration: none !important;
  color: #111827 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  padding: 12px 0 !important;
  border-bottom: none !important;
}

/* RIGHT DRAWER FINAL FIX */

@media (max-width: 768px) {
  .main-drawer {
    width: 86% !important;
    max-width: 420px !important;
    height: 100vh !important;
    overflow-y: auto !important;
    padding-bottom: 140px !important;
  }

  .main-drawer .drawer-bottom {
    margin-top: 70px !important;
    padding-bottom: 70px !important;
  }

  .main-drawer .drawer-login,
  .main-drawer .drawer-signup {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    padding: 18px !important;
    margin-top: 16px !important;
    text-decoration: none !important;
  }

  .main-drawer .drawer-login {
    border: 3px solid #ef4444 !important;
    color: #ef4444 !important;
    background: #fff !important;
  }

  .main-drawer .drawer-signup {
    border: 3px solid #ef4444 !important;
    color: #fff !important;
    background: #ef4444 !important;
  }
}

/* ===== DESKTOP HEADER FIX ===== */

.desktop-header{
  width:100%;
  height:72px;
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  position:sticky;
  top:0;
  z-index:9999;
}

.desktop-header .logo{
  font-size:24px;
  font-weight:800;
  color:#2563eb;
  text-decoration:none;
}

.desktop-header nav{
  display:flex !important;
  align-items:center;
  gap:28px;
}

.desktop-header nav a{
  color:#111827;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
}

.desktop-header .auth-buttons{
  display:flex;
  align-items:center;
  gap:12px;
}

.desktop-header .login-btn{
  background:#ffffff;
  color:#2563eb;
  border:1px solid #d1d5db;
  padding:10px 16px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
}

.desktop-header .signup-btn{
  background:#ef4444;
  color:#ffffff;
  border:1px solid #ef4444;
  padding:10px 16px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
}

/* DRAWERS HIDE ON DESKTOP */

.tools-drawer,
.main-drawer,
.drawer-overlay{
  display:none;
}

/* MOBILE */

@media(max-width:768px){

  .desktop-header{
    display:none !important;
  }

  .mobile-header{
    display:flex !important;
  }

  /* ===== DRAWER FIX ===== */

/* DRAWERS HIDE ON DESKTOP */

.tools-drawer,
.main-drawer,
.drawer-overlay {
  display: none;
}

.mobile-header {
  display: none;
}

/* MOBILE DRAWERS */

@media (max-width: 768px) {
  .desktop-header {
    display: none !important;
  }

  .mobile-header {
    display: flex !important;
  }

  .tools-drawer,
  .main-drawer {
    display: block;
  }

  .drawer-overlay.active {
    display: block;
    pointer-events: auto;
  }
}

/* ===== PROFESSIONAL PROFILE DROPDOWN ===== */

.profile-menu {
  width: 280px !important;
  padding: 16px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16) !important;
}

.profile-menu strong {
  display: block !important;
  font-size: 16px !important;
  color: #111827 !important;
  margin-bottom: 4px !important;
}

.profile-menu p {
  font-size: 13px !important;
  margin-bottom: 14px !important;
  color: #64748b !important;
  word-break: break-word !important;
}

.profile-menu-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 11px 12px !important;
  color: #111827 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  margin: 4px 0 !important;
  line-height: 1.2 !important;
}

.profile-menu-link:hover {
  background: #f1f5f9 !important;
}

.upgrade-link {
  color: #ef4444 !important;
}

.logout-btn {
  width: 100% !important;
  margin-top: 12px !important;
  padding: 12px !important;
  border: none !important;
  border-radius: 12px !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

/* MOBILE PROFILE */

.mobile-profile-box {
  display: none;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
}

.mobile-profile-box strong {
  display: block;
  color: #111827;
  font-size: 18px;
  margin-bottom: 4px;
}

.mobile-profile-box p {
  color: #64748b;
  font-size: 14px;
  word-break: break-word;
  margin-bottom: 12px;
}

.mobile-logout-btn {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: #ef4444;
  color: white;
  font-weight: 800;
  cursor: pointer;
}

/* ===== MERGE PDF ILOVEPDF STYLE UI ===== */

.merge-page {
  min-height: calc(100vh - 64px);
  background: #f6f8fb;
}

.merge-start-screen {
  min-height: calc(100vh - 64px);
  padding: 70px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #111827;
}

/* ===== MERGE COMPACT PREVIEW FIX ===== */

.merge-page {
  min-height: calc(100vh - 80px) !important;
  background: #f5f6fa !important;
}

.merge-start-screen {
  min-height: auto !important;
  padding: 55px 20px !important;
}

.merge-upload-box {
  max-width: 480px !important;
  min-height: 190px !important;
  padding: 32px 22px !important;
}

.merge-start-screen h1 {
  font-size: 42px !important;
}

.merge-preview-screen {
  min-height: calc(100vh - 80px) !important;
  grid-template-columns: 1fr 285px !important;
  padding: 24px 310px 24px 24px !important;
  gap: 18px !important;
}

.merge-file-grid {
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) !important;
  gap: 14px !important;
}

.merge-file-card {
  min-height: 230px !important;
  padding: 14px 12px !important;
}

.file-card-icon {
  width: 116px !important;
  height: 145px !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #ef4444 !important;
  box-shadow: inset 0 0 0 8px #f8fafc !important;
}

.file-card-icon i {
  font-size: 42px !important;
}

.merge-file-card h3 {
  font-size: 13px !important;
  margin-top: 8px !important;
}

.merge-action-panel {
  width: 280px !important;
  right: 16px !important;
  top: 90px !important;
  bottom: 18px !important;
  border-radius: 18px !important;
  padding: 22px 18px !important;
}

.merge-action-panel h2 {
  font-size: 26px !important;
}

.merge-main-btn {
  padding: 15px 18px !important;
  border-radius: 14px !important;
}

@media (max-width: 980px) {
  .merge-preview-screen {
    grid-template-columns: 1fr !important;
    padding: 16px 16px 135px !important;
  }

  .merge-file-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .merge-file-card {
    min-height: 210px !important;
  }

  .file-card-icon {
    width: 105px !important;
    height: 130px !important;
  }

  .merge-action-panel {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    border-radius: 18px 18px 0 0 !important;
  }
}

.merge-logo-wrap {
  margin-bottom: 18px;
}

.merge-logo-icon {
  width: 86px;
  height: 86px;
  border-radius: 26px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  box-shadow: 0 20px 45px rgba(239, 68, 68, 0.25);
}

.merge-start-screen h1 {
  font-size: 54px;
  line-height: 1.1;
  font-weight: 900;
  margin: 10px 0 12px;
  color: #111827;
}

.merge-start-screen > p {
  max-width: 620px;
  color: #64748b;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 34px;
}

.merge-upload-box {
  width: 100%;
  max-width: 560px;
  min-height: 250px;
  background: #ffffff;
  border: 2px dashed #cbd5e1;
  border-radius: 28px;
  padding: 42px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
  transition: 0.25s ease;
}

.merge-upload-box:hover,
.merge-upload-box.drag-active {
  border-color: #ef4444;
  transform: translateY(-3px);
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.12);
}

.merge-upload-icon {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  background: #fee2e2;
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}

.merge-upload-box h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  color: #ef4444;
}

.merge-upload-box p {
  margin: 0;
  color: #64748b;
  font-size: 15px;
}

.merge-preview-screen {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 26px;
  padding: 34px 370px 34px 34px;
  position: relative;
}

.merge-topbar {
  grid-column: 1 / 2;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
}

.merge-topbar h1 {
  margin: 0;
  font-size: 30px;
  color: #111827;
  font-weight: 900;
}

.merge-topbar p {
  margin: 4px 0 0;
  color: #64748b;
  font-weight: 700;
}

.merge-add-btn {
  border: none;
  background: #111827;
  color: #ffffff;
  border-radius: 14px;
  padding: 13px 18px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.merge-file-grid {
  grid-column: 1 / 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 18px;
  align-content: start;
}

.merge-file-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 22px 16px;
  min-height: 205px;
  text-align: center;
  box-shadow: 0 16px 45px rgba(15, 23, 42, 0.08);
  transition: 0.25s ease;
}

.merge-file-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12);
}

.file-card-icon {
  width: 68px;
  height: 82px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.merge-file-card h3 {
  font-size: 14px;
  color: #111827;
  margin: 0 0 7px;
  word-break: break-word;
  line-height: 1.35;
}

.merge-file-card p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.remove-file-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #fee2e2;
  color: #dc2626;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}

.file-order-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 999px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
}

.merge-action-panel {
  position: fixed;
  right: 26px;
  top: 94px;
  bottom: 26px;
  width: 320px;
  background: #ffffff;
  border-left: 1px solid #e5e7eb;
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.merge-action-panel h2 {
  font-size: 30px;
  color: #111827;
  font-weight: 900;
  margin-bottom: 10px;
}

.merge-action-panel p {
  color: #64748b;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 24px;
}

.merge-main-btn {
  width: 100%;
  border: none;
  background: #ef4444;
  color: #ffffff;
  padding: 17px 22px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  box-shadow: 0 18px 40px rgba(239, 68, 68, 0.28);
}

.merge-main-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.merge-progress {
  width: 100%;
  max-width: 100%;
  margin-top: 18px;
}

.merge-success-screen {
  min-height: calc(100vh - 64px);
  padding: 70px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

.success-check {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: #22c55e;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  margin-bottom: 28px;
  box-shadow: 0 20px 55px rgba(34, 197, 94, 0.28);
}

.merge-success-screen h1 {
  color: #111827;
  font-size: 44px;
  font-weight: 900;
  margin-bottom: 10px;
}

.merge-success-screen p {
  color: #64748b;
  font-size: 18px;
  margin-bottom: 28px;
}

.download-result-btn {
  border: none;
  background: #ef4444;
  color: #ffffff;
  padding: 17px 30px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 18px 40px rgba(239, 68, 68, 0.28);
}

.success-actions {
  margin-top: 22px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.success-actions a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 900;
}

@media (max-width: 980px) {
  .merge-preview-screen {
    grid-template-columns: 1fr;
    padding: 20px 20px 150px;
  }

  .merge-topbar {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-start;
  }

  .merge-file-grid {
    grid-column: auto;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .merge-action-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 22px 22px 0 0;
    padding: 18px;
  }

  .merge-action-panel h2,
  .merge-action-panel p {
    display: none;
  }

  .merge-main-btn {
    padding: 16px;
  }

  .merge-progress {
    margin-top: 12px;
  }

  .merge-start-screen h1 {
    font-size: 40px;
  }

  .merge-success-screen h1 {
    font-size: 34px;
  }
}

@media (max-width: 520px) {
  .merge-upload-box {
    min-height: 220px;
    padding: 32px 18px;
  }

  .merge-upload-box h2 {
    font-size: 24px;
  }

  .merge-file-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .merge-file-card {
    min-height: 180px;
    padding: 20px 10px;
  }

  .file-card-icon {
    width: 56px;
    height: 68px;
    font-size: 26px;
  }

  .merge-file-card h3 {
    font-size: 12px;
  }
}
/* ===== TOOL PAGE DESKTOP HEADER FIX ===== */

.desktop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 32px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 9999;
}

.desktop-header .logo {
  font-size: 26px;
  font-weight: 900;
  color: #2563eb;
  text-decoration: none;
}

.desktop-header nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.desktop-header nav a {
  color: #111827;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
}

.desktop-header nav a:hover {
  color: #ef4444;
}

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

.login-btn {
  color: #111827;
  text-decoration: none;
  font-weight: 800;
}

.signup-btn {
  background: #ef4444;
  color: #ffffff !important;
  padding: 11px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 900;
}

@media (max-width: 768px) {
  .desktop-header {
    display: none !important;
  }
}
/* ===== COMPACT MERGE TOOL SIZE ===== */

.merge-start-screen {
  padding: 45px 20px 35px !important;
}

.merge-start-screen h1 {
  font-size: 44px !important;
  margin-bottom: 10px !important;
}

.merge-start-screen > p {
  font-size: 16px !important;
  margin-bottom: 24px !important;
}

.merge-upload-box {
  max-width: 360px !important;
  min-height: 135px !important;
  padding: 22px 18px !important;
  border-radius: 20px !important;
  gap: 10px !important;
}

.merge-upload-icon {
  width: 56px !important;
  height: 56px !important;
  font-size: 24px !important;
}

.merge-upload-box h2 {
  font-size: 22px !important;
}

.merge-upload-box p {
  font-size: 13px !important;
}

@media (max-width: 768px) {
  .merge-start-screen {
    padding: 35px 16px 24px !important;
  }

  .merge-start-screen h1 {
    font-size: 34px !important;
  }

  .merge-upload-box {
    max-width: 300px !important;
    min-height: 120px !important;
    padding: 18px 14px !important;
  }

  .merge-upload-box h2 {
    font-size: 19px !important;
  }
}
/* ===== MERGE START SCREEN ILOVEPDF STYLE ===== */

.merge-start-screen {
  min-height: auto !important;
  padding: 38px 20px 70px !important;
  text-align: center !important;
  justify-content: flex-start !important;
}

.merge-logo-wrap {
  display: none !important;
}

.merge-start-screen h1 {
  font-size: 44px !important;
  line-height: 1.15 !important;
  margin: 0 0 14px !important;
  color: #2b2f3a !important;
  font-weight: 900 !important;
}

.merge-start-screen > p {
  max-width: 850px !important;
  font-size: 24px !important;
  line-height: 1.45 !important;
  color: #2f3542 !important;
  margin: 0 auto 28px !important;
}

.merge-upload-box {
  width: auto !important;
  max-width: none !important;
  min-height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
}

.merge-upload-icon {
  display: none !important;
}

.merge-upload-box h2 {
  background: #ef2f2f !important;
  color: #ffffff !important;
  min-width: 330px !important;
  padding: 25px 38px !important;
  border-radius: 11px !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  margin: 0 !important;
  box-shadow: 0 10px 22px rgba(239, 47, 47, 0.25) !important;
}

.merge-upload-box p {
  position: absolute !important;
  margin-top: 118px !important;
  color: #303645 !important;
  font-size: 15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.merge-upload-box::after {
  content: "☁";
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ef2f2f;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
}

@media (max-width: 768px) {
  .merge-start-screen {
    padding: 34px 16px 55px !important;
  }

  .merge-start-screen h1 {
    font-size: 34px !important;
  }

  .merge-start-screen > p {
    font-size: 18px !important;
    margin-bottom: 24px !important;
  }

  .merge-upload-box h2 {
    min-width: 250px !important;
    padding: 20px 26px !important;
    font-size: 22px !important;
  }

  .merge-upload-box p {
    margin-top: 100px !important;
  }
}
/* ===== MERGE START SCREEN ILOVEPDF STYLE ===== */

.merge-start-screen {
  min-height: auto !important;
  padding: 38px 20px 70px !important;
  text-align: center !important;
  justify-content: flex-start !important;
}

.merge-logo-wrap {
  display: none !important;
}

.merge-start-screen h1 {
  font-size: 44px !important;
  line-height: 1.15 !important;
  margin: 0 0 14px !important;
  color: #2b2f3a !important;
  font-weight: 900 !important;
}

.merge-start-screen > p {
  max-width: 850px !important;
  font-size: 24px !important;
  line-height: 1.45 !important;
  color: #2f3542 !important;
  margin: 0 auto 28px !important;
}

.merge-upload-box {
  width: auto !important;
  max-width: none !important;
  min-height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
}

.merge-upload-icon {
  display: none !important;
}

.merge-upload-box h2 {
  background: #ef2f2f !important;
  color: #ffffff !important;
  min-width: 330px !important;
  padding: 25px 38px !important;
  border-radius: 11px !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  margin: 0 !important;
  box-shadow: 0 10px 22px rgba(239, 47, 47, 0.25) !important;
}

.merge-upload-box p {
  position: absolute !important;
  margin-top: 118px !important;
  color: #303645 !important;
  font-size: 15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.merge-upload-box::after {
  content: "☁";
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ef2f2f;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
}

@media (max-width: 768px) {
  .merge-start-screen {
    padding: 34px 16px 55px !important;
  }

  .merge-start-screen h1 {
    font-size: 34px !important;
  }

  .merge-start-screen > p {
    font-size: 18px !important;
    margin-bottom: 24px !important;
  }

  .merge-upload-box h2 {
    min-width: 250px !important;
    padding: 20px 26px !important;
    font-size: 22px !important;
  }

  .merge-upload-box p {
    margin-top: 100px !important;
  }
}

/* ===== EXACT ILOVEPDF MERGE PREVIEW LAYOUT ===== */

.merge-preview-screen {
  min-height: calc(100vh - 72px) !important;
  display: grid !important;
  grid-template-columns: 1fr 300px !important;
  gap: 0 !important;
  padding: 0 300px 0 0 !important;
  background: #f5f5fa !important;
}

.merge-topbar {
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.merge-topbar h1,
.merge-topbar p {
  display: none !important;
}

.merge-add-btn {
  position: fixed !important;
  right: 322px !important;
  top: 245px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: #ef2f2f !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 0 !important;
  padding: 0 !important;
  z-index: 20 !important;
  box-shadow: 0 12px 25px rgba(239, 47, 47, 0.28) !important;
}

.merge-add-btn i {
  font-size: 22px !important;
}

.merge-file-grid {
  grid-column: 1 / 2 !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 160px auto 40px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 14px !important;
  align-content: start !important;
}

.merge-file-card {
  position: relative !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
  min-height: 245px !important;
  padding: 30px 16px 12px !important;
  text-align: center !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08) !important;
}

.pdf-preview-box {
  width: 128px !important;
  height: 178px !important;
  margin: 0 auto 10px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  border: 1px solid #f1f5f9 !important;
}

.pdf-preview-box embed {
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

.merge-file-card h3 {
  font-size: 13px !important;
  color: #334155 !important;
  font-weight: 500 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.remove-file-btn {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 3px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.file-order-badge {
  display: none !important;
}

.merge-action-panel {
  position: fixed !important;
  right: 0 !important;
  top: 72px !important;
  bottom: 0 !important;
  width: 300px !important;
  background: #ffffff !important;
  border-left: 1px solid #d8dbe2 !important;
  border-radius: 0 !important;
  padding: 16px 14px 24px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.merge-action-panel h2 {
  display: block !important;
  text-align: center !important;
  font-size: 30px !important;
  color: #1f2937 !important;
  font-weight: 900 !important;
  margin: 25px 0 18px !important;
}

.merge-action-panel p {
  display: block !important;
  background: #dff2ff !important;
  color: #1f2937 !important;
  border-radius: 8px !important;
  padding: 14px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.merge-main-btn {
  width: 100% !important;
  background: #ef2f2f !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 18px 20px !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(239, 47, 47, 0.25) !important;
}

.merge-progress {
  margin-top: 12px !important;
}

@media (max-width: 768px) {
  .merge-preview-screen {
    grid-template-columns: 1fr !important;
    padding: 0 0 130px 0 !important;
  }

  .merge-file-grid {
    margin: 30px auto !important;
    padding: 0 14px !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .merge-file-card {
    min-height: 220px !important;
  }

  .pdf-preview-box {
    width: 110px !important;
    height: 150px !important;
  }

  .merge-add-btn {
    right: 20px !important;
    top: auto !important;
    bottom: 118px !important;
  }

  .merge-action-panel {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    border-left: none !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 14px !important;
  }

  .merge-action-panel h2,
  .merge-action-panel p {
    display: none !important;
  }

  .merge-main-btn {
    font-size: 20px !important;
    padding: 16px !important;
  }
}

/* ===== FINAL MERGE PAGE 1 LAYOUT ===== */

.merge-start-screen {
  min-height: 540px !important;
  padding: 36px 20px 0 !important;
}

.ad-placeholder {
  margin-top: 85px !important;
  width: 730px !important;
  max-width: 90% !important;
  height: 90px !important;
  background: #e6ffff !important;
  border: 1px dashed #94a3b8 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  font-weight: 800 !important;
}

.merge-start-screen h1 {
  font-size: 44px !important;
}

.merge-start-screen > p {
  font-size: 24px !important;
}

.merge-upload-box h2 {
  min-width: 330px !important;
  padding: 24px 38px !important;
  font-size: 27px !important;
}
/* ===== FORCE HIDE MERGE PAGE 2 UNTIL FILE SELECTED ===== */

main.merge-page > #previewScreen[style*="display:none"],
main.merge-page > #previewScreen[style*="display: none"],
main.merge-page > #successScreen[style*="display:none"],
main.merge-page > #successScreen[style*="display: none"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

main.merge-page > #previewScreen[style*="display:none"] *,
main.merge-page > #previewScreen[style*="display: none"] *,
main.merge-page > #successScreen[style*="display:none"] *,
main.merge-page > #successScreen[style*="display: none"] * {
  display: none !important;
}

/* ===== MERGE PAGE FINAL FIX ===== */

.merge-page {
  background: #f3f3f8;
  min-height: calc(100vh - 72px);
}

/* HIDE UNUSED SCREENS */

.hidden-screen {
  display: none !important;
}

/* START SCREEN */

.merge-start-screen {
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 55px;
  text-align: center;
}

/* TITLE */

.merge-start-screen h1 {
  font-size: 62px;
  line-height: 1.1;
  font-weight: 800;
  color: #2f3640;
  margin-bottom: 18px;
}

/* DESCRIPTION */

.merge-start-screen p {
  font-size: 28px;
  color: #4b5563;
  max-width: 980px;
  margin-bottom: 36px;
}

/* BUTTON ROW */

.merge-select-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* MAIN BUTTON */

.merge-upload-box {
  cursor: pointer;
}

.merge-upload-box h2 {
  background: #ef2f2f;
  color: #ffffff;
  min-width: 420px;
  padding: 30px 44px;
  border-radius: 16px;
  font-size: 40px;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(239,47,47,0.25);
}

/* CLOUD BUTTONS */

.cloud-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cloud-buttons button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: #ef2f2f;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

/* DROP TEXT */

.drop-text {
  margin-top: 18px;
  font-size: 18px;
  color: #4b5563;
}

/* AD AREA */

.ad-placeholder {
  margin-top: 80px;
  width: 100%;
  max-width: 1100px;
  height: 320px;
  border-radius: 18px;
  background: transparent;
}

/* FORCE HIDE PREVIEW AREA */

#previewScreen,
#successScreen {
  display: none !important;
}

/* MOBILE */

@media (max-width: 768px) {

  .merge-start-screen {
    padding: 40px 18px;
  }

  .merge-start-screen h1 {
    font-size: 38px;
  }

  .merge-start-screen p {
    font-size: 18px;
    line-height: 1.5;
  }

  .merge-upload-box h2 {
    min-width: 260px;
    padding: 22px 24px;
    font-size: 24px;
  }

  .cloud-buttons button {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }

  .ad-placeholder {
    height: 220px;
  }
}

/* =========================================
   HELLOPDF MERGE PDF FINAL UI
========================================= */

.hidden-screen{
  display:none !important;
}

/* PAGE */

.merge-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

/* START SCREEN */

.merge-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:65px 20px 40px;
  text-align:center;
}

/* TITLE */

.merge-start-screen h1{
  font-size:64px;
  line-height:1.1;
  font-weight:900;
  color:#111827;
  margin-bottom:18px;
}

/* DESCRIPTION */

.merge-start-screen p{
  max-width:920px;
  font-size:28px;
  line-height:1.5;
  color:#4b5563;
  margin-bottom:38px;
}

/* BUTTON ROW */

.merge-select-row{
  display:flex;
  align-items:center;
  gap:14px;
}

/* MAIN BUTTON */

.merge-upload-box{
  cursor:pointer;
}

.merge-upload-box h2{
  min-width:420px;
  padding:30px 42px;
  background:#ef4444;
  color:#ffffff;
  border-radius:18px;
  font-size:40px;
  font-weight:800;
  box-shadow:0 14px 40px rgba(239,68,68,0.25);
  transition:0.25s ease;
}

.merge-upload-box:hover h2{
  transform:translateY(-2px);
}

/* CLOUD BUTTONS */

.cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cloud-buttons button{
  width:54px;
  height:54px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:#ffffff;
  font-size:20px;
  cursor:pointer;
}

/* DROP TEXT */

.drop-text{
  margin-top:20px;
  color:#4b5563;
  font-size:18px;
}

/* EMPTY AREA */

.ad-placeholder{
  width:100%;
  max-width:1100px;
  height:320px;
  margin-top:80px;
}

/* =========================================
   PREVIEW SCREEN
========================================= */

.merge-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  gap:24px;
  padding:24px;
  align-items:start;
}

/* LEFT */

.merge-preview-left{
  width:100%;
}

/* TOPBAR */

.merge-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
}

.merge-topbar h1{
  font-size:40px;
  color:#111827;
  margin-bottom:4px;
}

.merge-topbar p{
  color:#64748b;
  font-size:15px;
}

/* ADD MORE */

.merge-add-btn{
  border:none;
  background:#2563eb;
  color:white;
  padding:14px 18px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
}

/* GRID */

.merge-file-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:18px;
}

/* CARD */

.merge-file-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:16px;
  position:relative;
  text-align:center;
  min-height:240px;
}

/* REMOVE */

.remove-file-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  font-size:18px;
  cursor:pointer;
}

/* ICON */

.file-card-icon{
  width:120px;
  height:150px;
  margin:12px auto;
  border-radius:14px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
}

.file-card-icon i{
  font-size:48px;
  color:#ef4444;
}

/* FILE NAME */

.merge-file-card h3{
  margin-top:10px;
  font-size:14px;
  color:#111827;
  word-break:break-word;
}

/* FILE SIZE */

.merge-file-card p{
  margin-top:6px;
  color:#64748b;
  font-size:13px;
}

/* ORDER */

.file-order-badge{
  position:absolute;
  bottom:12px;
  left:12px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#111827;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
}

/* RIGHT PANEL */

.merge-action-panel{
  position:sticky;
  top:95px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:22px;
  padding:24px;
}

.merge-action-panel h2{
  font-size:34px;
  color:#111827;
  margin-bottom:10px;
}

.merge-action-panel p{
  color:#64748b;
  line-height:1.6;
  margin-bottom:22px;
}

/* MERGE BUTTON */

.merge-main-btn{
  width:100%;
  border:none;
  background:#ef4444;
  color:white;
  padding:18px;
  border-radius:16px;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* PROGRESS */

.merge-progress{
  width:100%;
  max-width:100%;
  margin-top:18px;
}

/* SUCCESS */

.merge-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
}

.merge-success-screen h1{
  font-size:56px;
  color:#111827;
  margin-bottom:14px;
}

.merge-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

.download-result-btn{
  border:none;
  background:#ef4444;
  color:white;
  padding:20px 34px;
  border-radius:18px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:980px){

  .merge-preview-screen{
    grid-template-columns:1fr;
  }

  .merge-action-panel{
    position:static;
  }
}

@media(max-width:768px){

  .merge-start-screen{
    padding:40px 18px;
  }

  .merge-start-screen h1{
    font-size:38px;
  }

  .merge-start-screen p{
    font-size:18px;
  }

  .merge-upload-box h2{
    min-width:260px;
    padding:22px 24px;
    font-size:24px;
  }

  .cloud-buttons button{
    width:42px;
    height:42px;
    font-size:16px;
  }

  .merge-file-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .merge-success-screen h1{
    font-size:34px;
  }

  .download-result-btn{
    width:100%;
    max-width:320px;
    font-size:18px;
  }
}

/* =========================================
   HELLOPDF MERGE PDF FINAL UI
========================================= */

.hidden-screen{
  display:none !important;
}

/* PAGE */

.merge-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

/* START SCREEN */

.merge-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:65px 20px 40px;
  text-align:center;
}

/* TITLE */

.merge-start-screen h1{
  font-size:64px;
  line-height:1.1;
  font-weight:900;
  color:#111827;
  margin-bottom:18px;
}

/* DESCRIPTION */

.merge-start-screen p{
  max-width:920px;
  font-size:28px;
  line-height:1.5;
  color:#4b5563;
  margin-bottom:38px;
}

/* BUTTON ROW */

.merge-select-row{
  display:flex;
  align-items:center;
  gap:14px;
}

/* MAIN BUTTON */

.merge-upload-box{
  cursor:pointer;
}

.merge-upload-box h2{
  min-width:420px;
  padding:30px 42px;
  background:#ef4444;
  color:#ffffff;
  border-radius:18px;
  font-size:40px;
  font-weight:800;
  box-shadow:0 14px 40px rgba(239,68,68,0.25);
  transition:0.25s ease;
}

.merge-upload-box:hover h2{
  transform:translateY(-2px);
}

/* CLOUD BUTTONS */

.cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cloud-buttons button{
  width:54px;
  height:54px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:#ffffff;
  font-size:20px;
  cursor:pointer;
}

/* DROP TEXT */

.drop-text{
  margin-top:20px;
  color:#4b5563;
  font-size:18px;
}

/* EMPTY AREA */

.ad-placeholder{
  width:100%;
  max-width:1100px;
  height:320px;
  margin-top:80px;
}

/* =========================================
   PREVIEW SCREEN
========================================= */

.merge-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  gap:24px;
  padding:24px;
  align-items:start;
}

/* LEFT */

.merge-preview-left{
  width:100%;
}

/* TOPBAR */

.merge-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
}

.merge-topbar h1{
  font-size:40px;
  color:#111827;
  margin-bottom:4px;
}

.merge-topbar p{
  color:#64748b;
  font-size:15px;
}

/* ADD MORE */

.merge-add-btn{
  border:none;
  background:#2563eb;
  color:white;
  padding:14px 18px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
}

/* GRID */

.merge-file-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:18px;
}

/* CARD */

.merge-file-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:16px;
  position:relative;
  text-align:center;
  min-height:240px;
}

/* REMOVE */

.remove-file-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  font-size:18px;
  cursor:pointer;
}

/* ICON */

.file-card-icon{
  width:120px;
  height:150px;
  margin:12px auto;
  border-radius:14px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
}

.file-card-icon i{
  font-size:48px;
  color:#ef4444;
}

/* FILE NAME */

.merge-file-card h3{
  margin-top:10px;
  font-size:14px;
  color:#111827;
  word-break:break-word;
}

/* FILE SIZE */

.merge-file-card p{
  margin-top:6px;
  color:#64748b;
  font-size:13px;
}

/* ORDER */

.file-order-badge{
  position:absolute;
  bottom:12px;
  left:12px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#111827;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
}

/* RIGHT PANEL */

.merge-action-panel{
  position:sticky;
  top:95px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:22px;
  padding:24px;
}

.merge-action-panel h2{
  font-size:34px;
  color:#111827;
  margin-bottom:10px;
}

.merge-action-panel p{
  color:#64748b;
  line-height:1.6;
  margin-bottom:22px;
}

/* MERGE BUTTON */

.merge-main-btn{
  width:100%;
  border:none;
  background:#ef4444;
  color:white;
  padding:18px;
  border-radius:16px;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* PROGRESS */

.merge-progress{
  width:100%;
  max-width:100%;
  margin-top:18px;
}

/* SUCCESS */

.merge-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
}

.merge-success-screen h1{
  font-size:56px;
  color:#111827;
  margin-bottom:14px;
}

.merge-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

.download-result-btn{
  border:none;
  background:#ef4444;
  color:white;
  padding:20px 34px;
  border-radius:18px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:980px){

  .merge-preview-screen{
    grid-template-columns:1fr;
  }

  .merge-action-panel{
    position:static;
  }
}

@media(max-width:768px){

  .merge-start-screen{
    padding:40px 18px;
  }

  .merge-start-screen h1{
    font-size:38px;
  }

  .merge-start-screen p{
    font-size:18px;
  }

  .merge-upload-box h2{
    min-width:260px;
    padding:22px 24px;
    font-size:24px;
  }

  .cloud-buttons button{
    width:42px;
    height:42px;
    font-size:16px;
  }

  .merge-file-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .merge-success-screen h1{
    font-size:34px;
  }

  .download-result-btn{
    width:100%;
    max-width:320px;
    font-size:18px;
  }
}

/* =====================================
   FINAL MERGE PAGE OVERRIDE
===================================== */

.merge-start-screen{
  width:100% !important;
  min-height:calc(100vh - 72px) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
  padding:60px 20px 40px !important;
}

.merge-start-screen h1{
  width:100% !important;
  display:block !important;
  font-size:64px !important;
  font-weight:900 !important;
  line-height:1.1 !important;
  color:#111827 !important;
  margin:0 0 18px !important;
}

.merge-start-screen > p{
  width:100% !important;
  max-width:900px !important;
  display:block !important;
  margin:0 auto 40px !important;
  font-size:28px !important;
  line-height:1.5 !important;
  color:#4b5563 !important;
}

.merge-select-row{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
}

.merge-upload-box{
  width:auto !important;
  max-width:none !important;
  min-height:auto !important;
  padding:0 !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
}

.merge-upload-box h2{
  min-width:420px !important;
  padding:30px 40px !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  border-radius:18px !important;
  font-size:40px !important;
  font-weight:800 !important;
  line-height:1 !important;
  margin:0 !important;
  box-shadow:0 15px 40px rgba(239,68,68,0.25) !important;
}

.cloud-buttons{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.cloud-buttons button{
  width:54px !important;
  height:54px !important;
  border:none !important;
  border-radius:50% !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  font-size:20px !important;
}

.drop-text{
  width:100% !important;
  margin-top:20px !important;
  text-align:center !important;
  font-size:18px !important;
  color:#4b5563 !important;
}

.ad-placeholder{
  width:100% !important;
  height:320px !important;
  margin-top:80px !important;
}

@media(max-width:768px){

  .merge-start-screen h1{
    font-size:38px !important;
  }

  .merge-start-screen > p{
    font-size:18px !important;
  }

  .merge-upload-box h2{
    min-width:260px !important;
    font-size:24px !important;
    padding:22px 24px !important;
  }

  .cloud-buttons button{
    width:42px !important;
    height:42px !important;
    font-size:16px !important;
  }
}
}

/* ===== FORCE MERGE PAGE DESKTOP FIX ===== */

body .merge-page .merge-start-screen{
  width:100% !important;
  min-height:calc(100vh - 72px) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
  padding:55px 20px 40px !important;
}

body .merge-page .merge-start-screen h1{
  display:block !important;
  font-size:44px !important;
  font-weight:900 !important;
  color:#1f2937 !important;
  margin:0 0 10px !important;
  line-height:1.15 !important;
}

body .merge-page .merge-start-screen > p{
  display:block !important;
  max-width:900px !important;
  font-size:24px !important;
  color:#374151 !important;
  margin:0 auto 28px !important;
  line-height:1.4 !important;
}

body .merge-page .merge-select-row{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
}

body .merge-page .merge-upload-box{
  width:auto !important;
  min-height:auto !important;
  max-width:none !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

body .merge-page .merge-upload-box h2{
  background:#ef3030 !important;
  color:#ffffff !important;
  min-width:330px !important;
  padding:25px 38px !important;
  border-radius:11px !important;
  font-size:28px !important;
  font-weight:900 !important;
  margin:0 !important;
  line-height:1 !important;
  box-shadow:0 10px 22px rgba(239,48,48,.25) !important;
}

body .merge-page .cloud-buttons{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

body .merge-page .cloud-buttons button{
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  border:none !important;
  background:#ef3030 !important;
  color:white !important;
  font-size:17px !important;
}

body .merge-page .drop-text{
  margin-top:14px !important;
  font-size:15px !important;
  color:#374151 !important;
}

body .merge-page .ad-placeholder{
  height:300px !important;
  margin-top:70px !important;
}

body .merge-page #previewScreen,
body .merge-page #successScreen,
body .merge-page .hidden-screen{
  display:none !important;
}

/* =========================================
   ILOVEPDF PREVIEW SCREEN FINAL
========================================= */

.merge-preview-screen{
  min-height:calc(100vh - 72px) !important;
  display:grid !important;
  grid-template-columns:1fr 300px !important;
  background:#f3f3f8 !important;
  padding-right:300px !important;
  position:relative !important;
}

/* LEFT SIDE */

.merge-preview-left{
  padding:24px !important;
}

/* TOP AD */

.merge-topbar{
  width:100% !important;
  margin-bottom:28px !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
}

.merge-topbar > div h1{
  font-size:48px !important;
  color:#111827 !important;
  margin-bottom:6px !important;
}

.merge-topbar > div p{
  font-size:16px !important;
  color:#64748b !important;
}

/* ADD FILE BUTTON */

.merge-add-btn{
  width:56px !important;
  height:56px !important;
  border-radius:50% !important;
  background:#ef4444 !important;
  border:none !important;
  color:#ffffff !important;
  font-size:22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  box-shadow:0 10px 24px rgba(239,68,68,.25) !important;
}

/* FILE GRID */

.merge-file-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important;
  gap:18px !important;
}

/* CARD */

.merge-file-card{
  background:#ffffff !important;
  border-radius:16px !important;
  padding:18px 16px !important;
  position:relative !important;
  min-height:290px !important;
  border:1px solid #e5e7eb !important;
}

/* REMOVE */

.remove-file-btn{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  width:28px !important;
  height:28px !important;
  border:none !important;
  border-radius:50% !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  font-size:18px !important;
  cursor:pointer !important;
}

/* PDF PREVIEW */

.file-card-icon{
  width:130px !important;
  height:170px !important;
  background:#ffffff !important;
  border:1px solid #d1d5db !important;
  border-radius:10px !important;
  margin:14px auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.file-card-icon i{
  font-size:54px !important;
  color:#ef4444 !important;
}

/* NAME */

.merge-file-card h3{
  margin-top:14px !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:#111827 !important;
  text-align:center !important;
  word-break:break-word !important;
}

/* SIZE */

.merge-file-card p{
  margin-top:6px !important;
  text-align:center !important;
  font-size:13px !important;
  color:#64748b !important;
}

/* ORDER */

.file-order-badge{
  position:absolute !important;
  bottom:12px !important;
  left:12px !important;
  width:30px !important;
  height:30px !important;
  border-radius:50% !important;
  background:#111827 !important;
  color:#ffffff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:13px !important;
  font-weight:700 !important;
}

/* RIGHT PANEL */

.merge-action-panel{
  position:fixed !important;
  top:72px !important;
  right:0 !important;
  width:300px !important;
  height:calc(100vh - 72px) !important;
  background:#ffffff !important;
  border-left:1px solid #e5e7eb !important;
  padding:26px 22px !important;
  border-radius:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

/* TITLE */

.merge-action-panel h2{
  font-size:42px !important;
  color:#111827 !important;
  margin-bottom:12px !important;
}

/* TEXT */

.merge-action-panel p{
  color:#64748b !important;
  line-height:1.7 !important;
  font-size:16px !important;
}

/* MERGE BUTTON FIXED */

.merge-main-btn{
  margin-top:auto !important;
  width:100% !important;
  border:none !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  padding:20px !important;
  border-radius:16px !important;
  font-size:26px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
}

/* MOBILE */

@media(max-width:980px){

  .merge-preview-screen{
    grid-template-columns:1fr !important;
    padding-right:0 !important;
    padding-bottom:140px !important;
  }

  .merge-action-panel{
    width:100% !important;
    height:auto !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
    border-left:none !important;
    border-top:1px solid #e5e7eb !important;
  }

  .merge-file-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

/* ===== FIX: SHOW PREVIEW AFTER FILE SELECT ===== */

body .merge-page #previewScreen:not(.hidden-screen){
  display:grid !important;
}

body .merge-page #successScreen:not(.hidden-screen){
  display:flex !important;
}

body .merge-page #startScreen.hidden-screen{
  display:none !important;
}

/* ===== FIX PREVIEW SCREEN AFTER FILE SELECT ===== */

body .merge-page #startScreen[style*="display: none"]{
  display:none !important;
}

body .merge-page #previewScreen:not(.hidden-screen){
  display:grid !important;
  grid-template-columns:1fr 310px !important;
  padding:24px 334px 24px 24px !important;
  min-height:calc(100vh - 72px) !important;
  background:#f3f4f8 !important;
}

body .merge-page #previewScreen:not(.hidden-screen) .merge-preview-left{
  display:block !important;
  width:100% !important;
}

body .merge-page #previewScreen:not(.hidden-screen) .merge-file-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important;
  gap:18px !important;
  width:100% !important;
}

body .merge-page #previewScreen:not(.hidden-screen) .merge-file-card{
  display:block !important;
  background:white !important;
  min-height:260px !important;
  border-radius:16px !important;
  padding:16px !important;
}

/* ===== ILOVEPDF PAGE 2 FINAL CLEAN FIX ===== */

.merge-topbar h1,
.merge-topbar p {
  display: none !important;
}

.merge-topbar {
  justify-content: flex-end !important;
  margin-bottom: 28px !important;
}

.merge-add-btn {
  position: fixed !important;
  right: 320px !important;
  top: 245px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  color: transparent !important;
  font-size: 0 !important;
  padding: 0 !important;
  z-index: 50 !important;
}

.merge-add-btn i {
  color: #ffffff !important;
  font-size: 26px !important;
}

.merge-add-btn::after {
  content: "" !important;
}

.merge-file-grid {
  max-width: 850px !important;
  margin: 90px auto 0 !important;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)) !important;
  gap: 18px !important;
}

.merge-file-card {
  min-height: 245px !important;
  padding: 18px 14px 14px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
}

.pdf-thumb-wrap {
  width: 120px !important;
  height: 160px !important;
  margin: 12px auto 10px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;
}

.pdf-thumb {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  pointer-events: none !important;
}

.file-card-icon {
  display: none !important;
}

.merge-file-card h3 {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  margin-top: 8px !important;
}

.merge-file-card p {
  display: none !important;
}

.merge-action-panel h2 {
  font-size: 32px !important;
  text-align: center !important;
}

.merge-main-btn {
  margin-top: auto !important;
  margin-bottom: 24px !important;
}

/* ===== MERGE SUCCESS PAGE FINAL ===== */

body .merge-page #successScreen:not(.hidden-screen){
  min-height:calc(100vh - 72px) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:40px 20px !important;
  background:#f3f4f8 !important;
}

body .merge-page #successScreen h1{
  font-size:54px !important;
  font-weight:900 !important;
  color:#111827 !important;
  margin:0 0 14px !important;
}

body .merge-page #successScreen p{
  font-size:20px !important;
  color:#64748b !important;
  margin:0 0 30px !important;
}

body .merge-page #downloadBtn{
  border:none !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  padding:20px 36px !important;
  border-radius:16px !important;
  font-size:22px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  box-shadow:0 12px 28px rgba(239,68,68,.25) !important;
}

/* =========================================
   SPLIT PDF FINAL UI
========================================= */

.split-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

/* START SCREEN */

.split-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:60px 20px 40px;
}

.split-start-screen h1{
  font-size:64px;
  line-height:1.1;
  font-weight:900;
  color:#111827;
  margin-bottom:18px;
}

.split-start-screen p{
  max-width:920px;
  font-size:28px;
  line-height:1.5;
  color:#4b5563;
  margin-bottom:38px;
}

/* BUTTON ROW */

.split-select-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
}

/* BUTTON */

.split-upload-box{
  cursor:pointer;
}

.split-upload-box h2{
  min-width:420px;
  padding:30px 42px;
  background:#ef4444;
  color:#ffffff;
  border-radius:18px;
  font-size:40px;
  font-weight:800;
  box-shadow:0 14px 40px rgba(239,68,68,0.25);
  transition:0.25s ease;
}

.split-upload-box:hover h2{
  transform:translateY(-2px);
}

/* PREVIEW SCREEN */

.split-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 300px;
  background:#f3f4f8;
  padding-right:300px;
}

/* LEFT */

.split-preview-left{
  padding:24px;
}

/* FILE GRID */

.split-file-grid{
  max-width:850px;
  margin:90px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr));
  gap:18px;
}

/* CARD */

.split-pdf-card{
  min-height:245px;
  padding:18px 14px 14px;
  border-radius:10px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* RIGHT PANEL */

.split-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:300px;
  height:calc(100vh - 72px);
  background:#ffffff;
  border-left:1px solid #e5e7eb;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
}

.split-action-panel h2{
  font-size:40px;
  color:#111827;
  margin-bottom:12px;
}

.split-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:24px;
}

/* OPTION */

.split-option-box{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  margin-bottom:24px;
}

.split-option-box label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:700;
  color:#111827;
  margin-bottom:8px;
}

.split-option-box small{
  color:#64748b;
  line-height:1.5;
  display:block;
}

/* BUTTON */

.split-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:#ffffff;
  padding:20px;
  border-radius:16px;
  font-size:24px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* SUCCESS */

.split-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.split-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
}

.split-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

/* MOBILE */

@media(max-width:980px){

  .split-preview-screen{
    grid-template-columns:1fr;
    padding-right:0;
    padding-bottom:140px;
  }

  .split-action-panel{
    width:100%;
    height:auto;
    left:0;
    right:0;
    top:auto;
    bottom:0;
    border-left:none;
    border-top:1px solid #e5e7eb;
  }

  .split-file-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){

  .split-start-screen{
    padding:40px 18px;
  }

  .split-start-screen h1{
    font-size:38px;
  }

  .split-start-screen p{
    font-size:18px;
  }

  .split-upload-box h2{
    min-width:260px;
    padding:22px 24px;
    font-size:24px;
  }

  .split-success-screen h1{
    font-size:34px;
  }
}

/* ===== SPLIT PDF SIZE + SUCCESS BUTTON FIX ===== */

body .split-page .split-start-screen{
  padding:55px 20px 40px !important;
}

body .split-page .split-start-screen h1{
  font-size:44px !important;
  margin-bottom:14px !important;
}

body .split-page .split-start-screen p{
  max-width:850px !important;
  font-size:24px !important;
  line-height:1.45 !important;
  margin-bottom:28px !important;
}

body .split-page .split-upload-box h2{
  min-width:330px !important;
  padding:25px 38px !important;
  border-radius:11px !important;
  font-size:28px !important;
}

body .split-page .cloud-buttons{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

body .split-page .cloud-buttons button{
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  background:#ef4444 !important;
  color:white !important;
  border:none !important;
  font-size:17px !important;
}

body .split-page .drop-text{
  margin-top:14px !important;
  font-size:15px !important;
}

body .split-page #splitSuccessScreen:not(.hidden-screen){
  min-height:calc(100vh - 72px) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  background:#f3f4f8 !important;
  padding:40px 20px !important;
}

body .split-page #splitSuccessScreen h1{
  font-size:54px !important;
  font-weight:900 !important;
  color:#111827 !important;
  margin:0 0 14px !important;
}

body .split-page #splitSuccessScreen p{
  font-size:20px !important;
  color:#64748b !important;
  margin:0 0 30px !important;
}

body .split-page #downloadBtn{
  border:none !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  padding:20px 36px !important;
  border-radius:16px !important;
  font-size:22px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  box-shadow:0 12px 28px rgba(239,68,68,.25) !important;
}

/* =====================================
   MOBILE UI FINAL FIX LIKE ILOVEPDF
===================================== */

@media(max-width:768px){

  /* PAGE TOP SPACE */

  .merge-start-screen,
  .split-start-screen{
    padding:38px 20px 30px !important;
  }

  /* TITLE */

  .merge-start-screen h1,
  .split-start-screen h1{
    font-size:30px !important;
    line-height:1.2 !important;
    margin-bottom:14px !important;
  }

  /* DESCRIPTION */

  .merge-start-screen p,
  .split-start-screen p{
    max-width:320px !important;
    font-size:18px !important;
    line-height:1.45 !important;
    margin-bottom:26px !important;
  }

  /* BUTTON ROW */

  .merge-select-row,
  .split-select-row{
    flex-direction:column !important;
    gap:18px !important;
  }

  /* MAIN BUTTON */

  .merge-upload-box h2,
  .split-upload-box h2{
    min-width:unset !important;
    width:100% !important;
    max-width:320px !important;
    padding:26px 24px !important;
    font-size:22px !important;
    border-radius:16px !important;
  }

  /* CLOUD BUTTONS */

  .cloud-buttons{
    flex-direction:row !important;
    justify-content:center !important;
    gap:18px !important;
  }

  .cloud-buttons button{
    width:56px !important;
    height:56px !important;
    font-size:22px !important;
  }

  /* DROP TEXT */

  .drop-text{
    margin-top:18px !important;
    font-size:16px !important;
  }

  /* REMOVE BIG EMPTY AREA */

  .ad-placeholder{
    display:none !important;
  }

  /* MOBILE HEADER */

  .mobile-header{
    height:72px !important;
    padding:0 18px !important;
  }

  .mobile-logo{
    font-size:28px !important;
    font-weight:900 !important;
  }

  .mobile-menu-btn,
  .mobile-grid-btn{
    font-size:34px !important;
  }
}

/* ===== MOBILE SUCCESS SCREEN FIX ===== */

@media(max-width:768px){

  body .split-page #splitSuccessScreen:not(.hidden-screen),
  body .merge-page #successScreen:not(.hidden-screen){
    justify-content:flex-start !important;
    padding-top:120px !important;
  }

  body .split-page #splitSuccessScreen h1,
  body .merge-page #successScreen h1{
    font-size:30px !important;
    line-height:1.2 !important;
    margin-bottom:16px !important;
  }

  body .split-page #splitSuccessScreen p,
  body .merge-page #successScreen p{
    font-size:16px !important;
    line-height:1.5 !important;
    margin-bottom:26px !important;
    max-width:300px !important;
  }

  body .split-page #downloadBtn,
  body .merge-page #downloadBtn{
    width:100% !important;
    max-width:320px !important;
    padding:22px 20px !important;
    font-size:18px !important;
    border-radius:18px !important;
  }
}

/* ===== MERGE/SPLIT MOBILE PREVIEW CARD FIX ===== */

@media(max-width:768px){

  body .merge-page #previewScreen:not(.hidden-screen),
  body .split-page #splitPreviewScreen:not(.hidden-screen){
    display:block !important;
    padding:28px 14px 190px !important;
    overflow-x:hidden !important;
  }

  body .merge-page .merge-preview-left,
  body .split-page .split-preview-left{
    width:100% !important;
    padding:0 !important;
  }

  body .merge-page .merge-file-grid,
  body .split-page .split-file-grid{
    width:100% !important;
    max-width:100% !important;
    margin:20px auto 0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  body .merge-page .merge-file-card,
  body .split-page .split-pdf-card{
    width:100% !important;
    max-width:320px !important;
    min-height:auto !important;
    margin:0 auto !important;
    padding:18px 14px 22px !important;
    border-radius:18px !important;
  }

  body .merge-page .pdf-thumb-wrap,
  body .split-page .pdf-thumb-wrap{
    width:160px !important;
    height:210px !important;
    margin:8px auto 14px !important;
  }

  body .merge-page .pdf-thumb,
  body .split-page .pdf-thumb{
    width:100% !important;
    height:100% !important;
  }

  body .merge-page .merge-file-card h3,
  body .split-page .split-pdf-card h3{
    max-width:260px !important;
    margin:8px auto 0 !important;
    font-size:15px !important;
    line-height:1.35 !important;
    text-align:center !important;
    word-break:break-word !important;
  }

  body .merge-page .merge-action-panel,
  body .split-page .split-action-panel{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    padding:14px 16px !important;
    border-radius:18px 18px 0 0 !important;
    z-index:999 !important;
  }

  body .merge-page .merge-action-panel h2,
  body .split-page .split-action-panel h2,
  body .merge-page .merge-action-panel p,
  body .split-page .split-action-panel p,
  body .split-page .split-option-box{
    display:none !important;
  }

  body .merge-page .merge-main-btn,
  body .split-page .split-main-btn{
    margin:0 !important;
    width:100% !important;
    padding:18px !important;
    font-size:20px !important;
    border-radius:14px !important;
  }
}

/* ===== MOBILE CLOUD ICONS SIDE BY SIDE FIX ===== */

@media(max-width:768px){

  .merge-select-row,
  .split-select-row{
    flex-direction:column !important;
    gap:18px !important;
  }

  .merge-select-row .cloud-buttons,
  .split-select-row .cloud-buttons{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    gap:18px !important;
    width:100% !important;
  }

  .merge-select-row .cloud-buttons button,
  .split-select-row .cloud-buttons button{
    width:56px !important;
    height:56px !important;
    border-radius:50% !important;
  }
}

/* ===== FINAL FORCE: MOBILE CLOUD ICONS HORIZONTAL ===== */

@media screen and (max-width: 768px){

  body .merge-page .merge-select-row,
  body .split-page .split-select-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
  }

  body .merge-page .merge-select-row > .cloud-buttons,
  body .split-page .split-select-row > .cloud-buttons{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:18px !important;
    width:100% !important;
    margin-top:0 !important;
  }

  body .merge-page .merge-select-row > .cloud-buttons button,
  body .split-page .split-select-row > .cloud-buttons button{
    display:inline-flex !important;
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
    border-radius:50% !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
  }
}

/* ===== HIDE CENTER CLOUD ICON ON MOBILE ===== */

@media(max-width:768px){

  body .merge-page .mobile-upload-icon,
  body .split-page .mobile-upload-icon,
  body .merge-page .upload-cloud-icon,
  body .split-page .upload-cloud-icon{
    display:none !important;
  }
}

/* =========================================
   COMPRESS PDF FINAL UI
========================================= */

.compress-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

/* START SCREEN */

.compress-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:55px 20px 40px;
}

.compress-start-screen h1{
  font-size:44px;
  line-height:1.15;
  font-weight:900;
  color:#111827;
  margin-bottom:14px;
}

.compress-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.45;
  color:#4b5563;
  margin-bottom:28px;
}

/* SELECT BUTTON */

.compress-select-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
}

.compress-upload-box{
  cursor:pointer;
}

.compress-upload-box h2{
  min-width:330px;
  padding:25px 38px;
  background:#ef4444;
  color:#ffffff;
  border-radius:11px;
  font-size:28px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

/* PREVIEW SCREEN */

.compress-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 300px;
  background:#f3f4f8;
  padding-right:300px;
}

.compress-preview-left{
  padding:24px;
}

.compress-file-grid{
  max-width:850px;
  margin:90px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr));
  gap:18px;
}

.compress-pdf-card{
  min-height:245px;
  padding:18px 14px 14px;
  border-radius:10px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* RIGHT PANEL */

.compress-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:300px;
  height:calc(100vh - 72px);
  background:#ffffff;
  border-left:1px solid #e5e7eb;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
}

.compress-action-panel h2{
  font-size:36px;
  color:#111827;
  margin-bottom:12px;
}

.compress-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:24px;
}

.compress-option-box{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  margin-bottom:24px;
}

.compress-option-box label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:700;
  color:#111827;
  margin-bottom:8px;
}

.compress-option-box small{
  color:#64748b;
  line-height:1.5;
  display:block;
}

.compress-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:#ffffff;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* SUCCESS */

.compress-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.compress-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.compress-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

/* MOBILE */

@media(max-width:980px){

  .compress-preview-screen{
    grid-template-columns:1fr;
    padding-right:0;
    padding-bottom:140px;
  }

  .compress-action-panel{
    width:100%;
    height:auto;
    left:0;
    right:0;
    top:auto;
    bottom:0;
    border-left:none;
    border-top:1px solid #e5e7eb;
  }

  .compress-file-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){

  .compress-start-screen{
    padding:38px 20px 30px !important;
  }

  .compress-start-screen h1{
    font-size:30px !important;
    line-height:1.2 !important;
    margin-bottom:14px !important;
  }

  .compress-start-screen p{
    max-width:320px !important;
    font-size:18px !important;
    line-height:1.45 !important;
    margin-bottom:26px !important;
  }

  .compress-select-row{
    flex-direction:column !important;
    gap:18px !important;
  }

  .compress-upload-box h2{
    min-width:unset !important;
    width:100% !important;
    max-width:320px !important;
    padding:26px 24px !important;
    font-size:22px !important;
    border-radius:16px !important;
  }

  body .compress-page .cloud-buttons{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    gap:18px !important;
    width:100% !important;
  }

  body .compress-page .cloud-buttons button{
    width:56px !important;
    height:56px !important;
    border-radius:50% !important;
  }

  body .compress-page #compressPreviewScreen:not(.hidden-screen){
    display:block !important;
    padding:28px 14px 190px !important;
    overflow-x:hidden !important;
  }

  .compress-preview-left{
    width:100% !important;
    padding:0 !important;
  }

  .compress-file-grid{
    width:100% !important;
    max-width:100% !important;
    margin:20px auto 0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .compress-pdf-card{
    width:100% !important;
    max-width:320px !important;
    min-height:auto !important;
    margin:0 auto !important;
    padding:18px 14px 22px !important;
    border-radius:18px !important;
  }

  body .compress-page .pdf-thumb-wrap{
    width:160px !important;
    height:210px !important;
    margin:8px auto 14px !important;
  }

  body .compress-page .compress-action-panel{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    padding:14px 16px !important;
    border-radius:18px 18px 0 0 !important;
    z-index:999 !important;
  }

  body .compress-page .compress-action-panel h2,
  body .compress-page .compress-action-panel p,
  body .compress-page .compress-option-box{
    display:none !important;
  }

  .compress-main-btn{
    margin:0 !important;
    width:100% !important;
    padding:18px !important;
    font-size:20px !important;
    border-radius:14px !important;
  }

  body .compress-page #compressSuccessScreen:not(.hidden-screen){
    justify-content:flex-start !important;
    padding-top:120px !important;
  }

  body .compress-page #compressSuccessScreen h1{
    font-size:30px !important;
    line-height:1.2 !important;
    margin-bottom:16px !important;
  }

  body .compress-page #compressSuccessScreen p{
    font-size:16px !important;
    line-height:1.5 !important;
    margin-bottom:26px !important;
    max-width:300px !important;
  }

  body .compress-page #downloadBtn{
    width:100% !important;
    max-width:320px !important;
    padding:22px 20px !important;
    font-size:18px !important;
    border-radius:18px !important;
  }
}

/* ===== COMPRESS PAGE FINAL FIXES ===== */

/* Cloud buttons desktop proper red circles */
body .compress-page .cloud-buttons{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

body .compress-page .cloud-buttons button{
  width:38px !important;
  height:38px !important;
  border:none !important;
  border-radius:50% !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  font-size:17px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Compress success desktop button */
body .compress-page #compressSuccessScreen:not(.hidden-screen){
  min-height:calc(100vh - 72px) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  background:#f3f4f8 !important;
  padding:40px 20px !important;
}

body .compress-page #compressSuccessScreen h1{
  font-size:54px !important;
  font-weight:900 !important;
  color:#111827 !important;
  margin:0 0 14px !important;
}

body .compress-page #compressSuccessScreen p{
  font-size:20px !important;
  color:#64748b !important;
  margin:0 0 30px !important;
}

body .compress-page #downloadBtn{
  border:none !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  padding:20px 36px !important;
  border-radius:16px !important;
  font-size:22px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  box-shadow:0 12px 28px rgba(239,68,68,.25) !important;
}

/* Mobile same final size */
@media(max-width:768px){
  body .compress-page #compressSuccessScreen:not(.hidden-screen){
    justify-content:flex-start !important;
    padding-top:120px !important;
  }

  body .compress-page #compressSuccessScreen h1{
    font-size:30px !important;
    line-height:1.2 !important;
  }

  body .compress-page #compressSuccessScreen p{
    font-size:16px !important;
    max-width:300px !important;
  }

  body .compress-page #downloadBtn{
    width:100% !important;
    max-width:320px !important;
    padding:22px 20px !important;
    font-size:18px !important;
  }
}

/* =========================================
   REMOVE PAGES FINAL UI
========================================= */

.remove-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

/* START SCREEN */

.remove-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:55px 20px 40px;
}

.remove-start-screen h1{
  font-size:44px;
  line-height:1.15;
  font-weight:900;
  color:#111827;
  margin-bottom:14px;
}

.remove-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.45;
  color:#4b5563;
  margin-bottom:28px;
}

/* SELECT BUTTON */

.remove-select-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
}

.remove-upload-box{
  cursor:pointer;
}

.remove-upload-box h2{
  min-width:330px;
  padding:25px 38px;
  background:#ef4444;
  color:#ffffff;
  border-radius:11px;
  font-size:28px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

/* CLOUD BUTTONS */

body .remove-page .cloud-buttons{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

body .remove-page .cloud-buttons button{
  width:38px !important;
  height:38px !important;
  border:none !important;
  border-radius:50% !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  font-size:17px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* PREVIEW SCREEN */

.remove-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 300px;
  background:#f3f4f8;
  padding-right:300px;
}

.remove-preview-left{
  padding:24px;
}

.remove-file-grid{
  max-width:850px;
  margin:90px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr));
  gap:18px;
}

.remove-pdf-card{
  min-height:245px;
  padding:18px 14px 14px;
  border-radius:10px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* RIGHT PANEL */

.remove-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:300px;
  height:calc(100vh - 72px);
  background:#ffffff;
  border-left:1px solid #e5e7eb;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
}

.remove-action-panel h2{
  font-size:36px;
  color:#111827;
  margin-bottom:12px;
}

.remove-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:24px;
}

.remove-option-box{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  margin-bottom:24px;
}

.remove-option-box label{
  display:block;
  font-size:16px;
  font-weight:700;
  color:#111827;
  margin-bottom:10px;
}

.remove-option-box input{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:1px solid #d1d5db;
  outline:none;
  font-size:15px;
  margin-bottom:10px;
}

.remove-option-box small{
  color:#64748b;
  line-height:1.5;
  display:block;
}

.remove-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:#ffffff;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* SUCCESS */

.remove-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.remove-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.remove-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

body .remove-page #downloadBtn{
  border:none !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  padding:20px 36px !important;
  border-radius:16px !important;
  font-size:22px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  box-shadow:0 12px 28px rgba(239,68,68,.25) !important;
}

/* MOBILE */

@media(max-width:980px){

  .remove-preview-screen{
    grid-template-columns:1fr;
    padding-right:0;
    padding-bottom:140px;
  }

  .remove-action-panel{
    width:100%;
    height:auto;
    left:0;
    right:0;
    top:auto;
    bottom:0;
    border-left:none;
    border-top:1px solid #e5e7eb;
  }

  .remove-file-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){

  .remove-start-screen{
    padding:38px 20px 30px !important;
  }

  .remove-start-screen h1{
    font-size:30px !important;
    line-height:1.2 !important;
    margin-bottom:14px !important;
  }

  .remove-start-screen p{
    max-width:320px !important;
    font-size:18px !important;
    line-height:1.45 !important;
    margin-bottom:26px !important;
  }

  .remove-select-row{
    flex-direction:column !important;
    gap:18px !important;
  }

  .remove-upload-box h2{
    min-width:unset !important;
    width:100% !important;
    max-width:320px !important;
    padding:26px 24px !important;
    font-size:22px !important;
    border-radius:16px !important;
  }

  body .remove-page .cloud-buttons{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    gap:18px !important;
    width:100% !important;
  }

  body .remove-page .cloud-buttons button{
    width:56px !important;
    height:56px !important;
    border-radius:50% !important;
  }

  body .remove-page #removePreviewScreen:not(.hidden-screen){
    display:block !important;
    padding:28px 14px 190px !important;
    overflow-x:hidden !important;
  }

  .remove-preview-left{
    width:100% !important;
    padding:0 !important;
  }

  .remove-file-grid{
    width:100% !important;
    max-width:100% !important;
    margin:20px auto 0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .remove-pdf-card{
    width:100% !important;
    max-width:320px !important;
    min-height:auto !important;
    margin:0 auto !important;
    padding:18px 14px 22px !important;
    border-radius:18px !important;
  }

  body .remove-page .pdf-thumb-wrap{
    width:160px !important;
    height:210px !important;
    margin:8px auto 14px !important;
  }

  body .remove-page .remove-action-panel{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    padding:14px 16px !important;
    border-radius:18px 18px 0 0 !important;
    z-index:999 !important;
  }

  body .remove-page .remove-action-panel h2,
  body .remove-page .remove-action-panel p{
    display:none !important;
  }

  .remove-option-box{
    margin-bottom:14px !important;
  }

  .remove-main-btn{
    margin:0 !important;
    width:100% !important;
    padding:18px !important;
    font-size:20px !important;
    border-radius:14px !important;
  }

  body .remove-page #removeSuccessScreen:not(.hidden-screen){
    justify-content:flex-start !important;
    padding-top:120px !important;
  }

  body .remove-page #removeSuccessScreen h1{
    font-size:30px !important;
    line-height:1.2 !important;
    margin-bottom:16px !important;
  }

  body .remove-page #removeSuccessScreen p{
    font-size:16px !important;
    line-height:1.5 !important;
    margin-bottom:26px !important;
    max-width:300px !important;
  }

  body .remove-page #downloadBtn{
    width:100% !important;
    max-width:320px !important;
    padding:22px 20px !important;
    font-size:18px !important;
    border-radius:18px !important;
  }
}

/* ===== COMPRESS MOBILE ICON FIX ===== */

@media(max-width:768px){

  body .compress-page .compress-select-row{
    flex-direction:column !important;
    align-items:center !important;
  }

  body .compress-page .compress-select-row .cloud-buttons{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    gap:18px !important;
    margin-top:18px !important;
  }

  body .compress-page .compress-select-row .cloud-buttons button{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#ef4444 !important;
    color:#ffffff !important;
    border:none !important;
    font-size:22px !important;
  }
}

/* =========================================
   EXTRACT PAGES FINAL UI
========================================= */

.extract-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

/* START SCREEN */

.extract-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:55px 20px 40px;
}

.extract-start-screen h1{
  font-size:44px;
  line-height:1.15;
  font-weight:900;
  color:#111827;
  margin-bottom:14px;
}

.extract-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.45;
  color:#4b5563;
  margin-bottom:28px;
}

/* SELECT BUTTON */

.extract-select-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
}

.extract-upload-box{
  cursor:pointer;
}

.extract-upload-box h2{
  min-width:330px;
  padding:25px 38px;
  background:#ef4444;
  color:#ffffff;
  border-radius:11px;
  font-size:28px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

/* CLOUD BUTTONS */

body .extract-page .cloud-buttons{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

body .extract-page .cloud-buttons button{
  width:38px !important;
  height:38px !important;
  border:none !important;
  border-radius:50% !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  font-size:17px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* PREVIEW SCREEN */

.extract-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 300px;
  background:#f3f4f8;
  padding-right:300px;
}

.extract-preview-left{
  padding:24px;
}

.extract-file-grid{
  max-width:850px;
  margin:90px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr));
  gap:18px;
}

.extract-pdf-card{
  min-height:245px;
  padding:18px 14px 14px;
  border-radius:10px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* RIGHT PANEL */

.extract-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:300px;
  height:calc(100vh - 72px);
  background:#ffffff;
  border-left:1px solid #e5e7eb;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
}

.extract-action-panel h2{
  font-size:36px;
  color:#111827;
  margin-bottom:12px;
}

.extract-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:24px;
}

.extract-option-box{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  margin-bottom:24px;
}

.extract-option-box label{
  display:block;
  font-size:16px;
  font-weight:700;
  color:#111827;
  margin-bottom:10px;
}

.extract-option-box input{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:1px solid #d1d5db;
  outline:none;
  font-size:15px;
  margin-bottom:10px;
}

.extract-option-box small{
  color:#64748b;
  line-height:1.5;
  display:block;
}

.extract-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:#ffffff;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* SUCCESS */

.extract-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.extract-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.extract-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

body .extract-page #downloadBtn{
  border:none !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  padding:20px 36px !important;
  border-radius:16px !important;
  font-size:22px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  box-shadow:0 12px 28px rgba(239,68,68,.25) !important;
}

/* MOBILE */

@media(max-width:980px){

  .extract-preview-screen{
    grid-template-columns:1fr;
    padding-right:0;
    padding-bottom:140px;
  }

  .extract-action-panel{
    width:100%;
    height:auto;
    left:0;
    right:0;
    top:auto;
    bottom:0;
    border-left:none;
    border-top:1px solid #e5e7eb;
  }

  .extract-file-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){

  .extract-start-screen{
    padding:38px 20px 30px !important;
  }

  .extract-start-screen h1{
    font-size:30px !important;
    line-height:1.2 !important;
    margin-bottom:14px !important;
  }

  .extract-start-screen p{
    max-width:320px !important;
    font-size:18px !important;
    line-height:1.45 !important;
    margin-bottom:26px !important;
  }

  .extract-select-row{
    flex-direction:column !important;
    gap:18px !important;
  }

  .extract-upload-box h2{
    min-width:unset !important;
    width:100% !important;
    max-width:320px !important;
    padding:26px 24px !important;
    font-size:22px !important;
    border-radius:16px !important;
  }

  body .extract-page .cloud-buttons{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    gap:18px !important;
    width:100% !important;
  }

  body .extract-page .cloud-buttons button{
    width:56px !important;
    height:56px !important;
    border-radius:50% !important;
  }

  body .extract-page #extractPreviewScreen:not(.hidden-screen){
    display:block !important;
    padding:28px 14px 190px !important;
    overflow-x:hidden !important;
  }

  .extract-preview-left{
    width:100% !important;
    padding:0 !important;
  }

  .extract-file-grid{
    width:100% !important;
    max-width:100% !important;
    margin:20px auto 0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .extract-pdf-card{
    width:100% !important;
    max-width:320px !important;
    min-height:auto !important;
    margin:0 auto !important;
    padding:18px 14px 22px !important;
    border-radius:18px !important;
  }

  body .extract-page .pdf-thumb-wrap{
    width:160px !important;
    height:210px !important;
    margin:8px auto 14px !important;
  }

  body .extract-page .extract-action-panel{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    padding:14px 16px !important;
    border-radius:18px 18px 0 0 !important;
    z-index:999 !important;
  }

  body .extract-page .extract-action-panel h2,
  body .extract-page .extract-action-panel p{
    display:none !important;
  }

  .extract-option-box{
    margin-bottom:14px !important;
  }

  .extract-main-btn{
    margin:0 !important;
    width:100% !important;
    padding:18px !important;
    font-size:20px !important;
    border-radius:14px !important;
  }

  body .extract-page #extractSuccessScreen:not(.hidden-screen){
    justify-content:flex-start !important;
    padding-top:120px !important;
  }

  body .extract-page #extractSuccessScreen h1{
    font-size:30px !important;
    line-height:1.2 !important;
    margin-bottom:16px !important;
  }

  body .extract-page #extractSuccessScreen p{
    font-size:16px !important;
    line-height:1.5 !important;
    margin-bottom:26px !important;
    max-width:300px !important;
  }

  body .extract-page #downloadBtn{
    width:100% !important;
    max-width:320px !important;
    padding:22px 20px !important;
    font-size:18px !important;
    border-radius:18px !important;
  }
}

/* =========================================
   REORDER PAGES FINAL UI
========================================= */

.reorder-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

/* START SCREEN */

.reorder-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:55px 20px 40px;
}

.reorder-start-screen h1{
  font-size:44px;
  line-height:1.15;
  font-weight:900;
  color:#111827;
  margin-bottom:14px;
}

.reorder-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.45;
  color:#4b5563;
  margin-bottom:28px;
}

/* SELECT BUTTON */

.reorder-select-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
}

.reorder-upload-box{
  cursor:pointer;
}

.reorder-upload-box h2{
  min-width:330px;
  padding:25px 38px;
  background:#ef4444;
  color:#ffffff;
  border-radius:11px;
  font-size:28px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

/* CLOUD BUTTONS */

body .reorder-page .cloud-buttons{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

body .reorder-page .cloud-buttons button{
  width:38px !important;
  height:38px !important;
  border:none !important;
  border-radius:50% !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  font-size:17px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* PREVIEW SCREEN */

.reorder-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 300px;
  background:#f3f4f8;
  padding-right:300px;
}

.reorder-preview-left{
  padding:24px;
}

.reorder-file-grid{
  max-width:850px;
  margin:90px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr));
  gap:18px;
}

.reorder-pdf-card{
  min-height:245px;
  padding:18px 14px 14px;
  border-radius:10px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* RIGHT PANEL */

.reorder-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:300px;
  height:calc(100vh - 72px);
  background:#ffffff;
  border-left:1px solid #e5e7eb;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
}

.reorder-action-panel h2{
  font-size:36px;
  color:#111827;
  margin-bottom:12px;
}

.reorder-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:24px;
}

.reorder-option-box{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  margin-bottom:24px;
}

.reorder-option-box label{
  display:block;
  font-size:16px;
  font-weight:700;
  color:#111827;
  margin-bottom:10px;
}

.reorder-option-box input{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:1px solid #d1d5db;
  outline:none;
  font-size:15px;
  margin-bottom:10px;
}

.reorder-option-box small{
  color:#64748b;
  line-height:1.5;
  display:block;
}

.reorder-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:#ffffff;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* SUCCESS */

.reorder-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.reorder-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.reorder-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

body .reorder-page #downloadBtn{
  border:none !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  padding:20px 36px !important;
  border-radius:16px !important;
  font-size:22px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  box-shadow:0 12px 28px rgba(239,68,68,.25) !important;
}

/* MOBILE */

@media(max-width:980px){

  .reorder-preview-screen{
    grid-template-columns:1fr;
    padding-right:0;
    padding-bottom:140px;
  }

  .reorder-action-panel{
    width:100%;
    height:auto;
    left:0;
    right:0;
    top:auto;
    bottom:0;
    border-left:none;
    border-top:1px solid #e5e7eb;
  }

  .reorder-file-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){

  .reorder-start-screen{
    padding:38px 20px 30px !important;
  }

  .reorder-start-screen h1{
    font-size:30px !important;
    line-height:1.2 !important;
    margin-bottom:14px !important;
  }

  .reorder-start-screen p{
    max-width:320px !important;
    font-size:18px !important;
    line-height:1.45 !important;
    margin-bottom:26px !important;
  }

  .reorder-select-row{
    flex-direction:column !important;
    gap:18px !important;
  }

  .reorder-upload-box h2{
    min-width:unset !important;
    width:100% !important;
    max-width:320px !important;
    padding:26px 24px !important;
    font-size:22px !important;
    border-radius:16px !important;
  }

  body .reorder-page .cloud-buttons{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    gap:18px !important;
    width:100% !important;
  }

  body .reorder-page .cloud-buttons button{
    width:56px !important;
    height:56px !important;
    border-radius:50% !important;
  }

  body .reorder-page #reorderPreviewScreen:not(.hidden-screen){
    display:block !important;
    padding:28px 14px 190px !important;
    overflow-x:hidden !important;
  }

  .reorder-preview-left{
    width:100% !important;
    padding:0 !important;
  }

  .reorder-file-grid{
    width:100% !important;
    max-width:100% !important;
    margin:20px auto 0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .reorder-pdf-card{
    width:100% !important;
    max-width:320px !important;
    min-height:auto !important;
    margin:0 auto !important;
    padding:18px 14px 22px !important;
    border-radius:18px !important;
  }

  body .reorder-page .pdf-thumb-wrap{
    width:160px !important;
    height:210px !important;
    margin:8px auto 14px !important;
  }

  body .reorder-page .reorder-action-panel{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    padding:14px 16px !important;
    border-radius:18px 18px 0 0 !important;
    z-index:999 !important;
  }

  body .reorder-page .reorder-action-panel h2,
  body .reorder-page .reorder-action-panel p{
    display:none !important;
  }

  .reorder-option-box{
    margin-bottom:14px !important;
  }

  .reorder-main-btn{
    margin:0 !important;
    width:100% !important;
    padding:18px !important;
    font-size:20px !important;
    border-radius:14px !important;
  }

  body .reorder-page #reorderSuccessScreen:not(.hidden-screen){
    justify-content:flex-start !important;
    padding-top:120px !important;
  }

  body .reorder-page #reorderSuccessScreen h1{
    font-size:30px !important;
    line-height:1.2 !important;
    margin-bottom:16px !important;
  }

  body .reorder-page #reorderSuccessScreen p{
    font-size:16px !important;
    line-height:1.5 !important;
    margin-bottom:26px !important;
    max-width:300px !important;
  }

  body .reorder-page #downloadBtn{
    width:100% !important;
    max-width:320px !important;
    padding:22px 20px !important;
    font-size:18px !important;
    border-radius:18px !important;
  }
}

.extract-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

.extract-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:55px 20px 40px;
}

.extract-start-screen h1{
  font-size:44px;
  font-weight:900;
  color:#111827;
  margin:0 0 14px;
}

.extract-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.45;
  color:#4b5563;
  margin:0 auto 28px;
}

.extract-select-row{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
}

.extract-upload-box{
  cursor:pointer;
}

.extract-upload-box h2{
  min-width:330px;
  padding:25px 38px;
  background:#ef4444;
  color:white;
  border-radius:11px;
  font-size:28px;
  font-weight:900;
  margin:0;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

.extract-page .cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.extract-page .cloud-buttons button{
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
}

.extract-page .drop-text{
  margin-top:14px;
  font-size:15px;
  color:#374151;
}

@media(max-width:768px){
  .extract-start-screen{
    padding:38px 20px 30px;
  }

  .extract-start-screen h1{
    font-size:30px;
  }

  .extract-start-screen p{
    max-width:320px;
    font-size:18px;
  }

  .extract-select-row{
    flex-direction:column;
    gap:18px;
  }

  .extract-upload-box h2{
    min-width:unset;
    width:100%;
    max-width:320px;
    padding:26px 24px;
    font-size:22px;
    border-radius:16px;
  }

  .extract-page .cloud-buttons{
    flex-direction:row;
    gap:18px;
  }

  .extract-page .cloud-buttons button{
    width:56px;
    height:56px;
  }
}

/* ===== ROTATE PDF FINAL UI ===== */

.rotate-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

.rotate-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:55px 20px 40px;
}

.rotate-start-screen h1{
  font-size:44px;
  font-weight:900;
  color:#111827;
  margin:0 0 14px;
}

.rotate-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.45;
  color:#4b5563;
  margin:0 auto 28px;
}

.rotate-select-row{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
}

.rotate-upload-box h2{
  min-width:330px;
  padding:25px 38px;
  background:#ef4444;
  color:white;
  border-radius:11px;
  font-size:28px;
  font-weight:900;
  margin:0;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

.rotate-page .cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.rotate-page .cloud-buttons button{
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* PREVIEW */

.rotate-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 300px;
  background:#f3f4f8;
  padding-right:300px;
}

.rotate-preview-left{padding:24px;}

.rotate-file-grid{
  max-width:850px;
  margin:90px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr));
  gap:18px;
}

.rotate-pdf-card{
  min-height:245px;
  padding:18px 14px 14px;
  border-radius:10px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.rotate-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:300px;
  height:calc(100vh - 72px);
  background:white;
  border-left:1px solid #e5e7eb;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
}

.rotate-action-panel h2{
  font-size:36px;
  color:#111827;
  margin-bottom:12px;
}

.rotate-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:24px;
}

.rotate-option-box{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  margin-bottom:24px;
}

.rotate-option-box label{
  display:block;
  font-size:16px;
  font-weight:700;
  color:#111827;
  margin-bottom:10px;
}

.rotate-option-box select{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:1px solid #d1d5db;
  outline:none;
  font-size:15px;
  margin-bottom:10px;
  background:#fff;
}

.rotate-option-box small{
  color:#64748b;
}

.rotate-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:white;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* SUCCESS */

.rotate-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.rotate-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.rotate-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

.rotate-page #downloadBtn{
  border:none!important;
  background:#ef4444!important;
  color:white!important;
  padding:20px 36px!important;
  border-radius:16px!important;
  font-size:22px!important;
  font-weight:800!important;
  cursor:pointer!important;
}

/* MOBILE */

@media(max-width:768px){
  .rotate-start-screen{
    padding:38px 20px 30px!important;
  }

  .rotate-start-screen h1{
    font-size:30px!important;
  }

  .rotate-start-screen p{
    max-width:320px!important;
    font-size:18px!important;
  }

  .rotate-select-row{
    flex-direction:column!important;
    gap:18px!important;
  }

  .rotate-upload-box h2{
    min-width:unset!important;
    width:100%!important;
    max-width:320px!important;
    padding:26px 24px!important;
    font-size:22px!important;
    border-radius:16px!important;
  }

  .rotate-page .cloud-buttons{
    flex-direction:row!important;
    gap:18px!important;
  }

  .rotate-page .cloud-buttons button{
    width:56px!important;
    height:56px!important;
  }

  .rotate-preview-screen{
    display:block!important;
    padding:28px 14px 190px!important;
    overflow-x:hidden!important;
  }

  .rotate-preview-left{
    padding:0!important;
  }

  .rotate-file-grid{
    width:100%!important;
    max-width:100%!important;
    margin:20px auto 0!important;
    grid-template-columns:1fr!important;
  }

  .rotate-pdf-card{
    max-width:320px!important;
    margin:0 auto!important;
    border-radius:18px!important;
  }

  .rotate-action-panel{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    height:auto!important;
    padding:14px 16px!important;
    border-radius:18px 18px 0 0!important;
  }

  .rotate-action-panel h2,
  .rotate-action-panel p{
    display:none!important;
  }

  .rotate-option-box{
    margin-bottom:14px!important;
  }

  .rotate-main-btn{
    margin:0!important;
    padding:18px!important;
    font-size:20px!important;
  }

  .rotate-success-screen{
    justify-content:flex-start!important;
    padding-top:120px!important;
  }

  .rotate-success-screen h1{
    font-size:30px!important;
  }

  .rotate-success-screen p{
    font-size:16px!important;
    max-width:300px!important;
  }

  .rotate-page #downloadBtn{
    width:100%!important;
    max-width:320px!important;
    font-size:18px!important;
  }
}

/* ===== ROTATE PDF FINAL UI ===== */

.rotate-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

.rotate-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:55px 20px 40px;
}

.rotate-start-screen h1{
  font-size:44px;
  font-weight:900;
  color:#111827;
  margin:0 0 14px;
}

.rotate-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.45;
  color:#4b5563;
  margin:0 auto 28px;
}

.rotate-select-row{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
}

.rotate-upload-box h2{
  min-width:330px;
  padding:25px 38px;
  background:#ef4444;
  color:white;
  border-radius:11px;
  font-size:28px;
  font-weight:900;
  margin:0;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

.rotate-page .cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.rotate-page .cloud-buttons button{
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* PREVIEW */

.rotate-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 300px;
  background:#f3f4f8;
  padding-right:300px;
}

.rotate-preview-left{padding:24px;}

.rotate-file-grid{
  max-width:850px;
  margin:90px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr));
  gap:18px;
}

.rotate-pdf-card{
  min-height:245px;
  padding:18px 14px 14px;
  border-radius:10px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.rotate-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:300px;
  height:calc(100vh - 72px);
  background:white;
  border-left:1px solid #e5e7eb;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
}

.rotate-action-panel h2{
  font-size:36px;
  color:#111827;
  margin-bottom:12px;
}

.rotate-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:24px;
}

.rotate-option-box{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  margin-bottom:24px;
}

.rotate-option-box label{
  display:block;
  font-size:16px;
  font-weight:700;
  color:#111827;
  margin-bottom:10px;
}

.rotate-option-box select{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:1px solid #d1d5db;
  outline:none;
  font-size:15px;
  margin-bottom:10px;
  background:#fff;
}

.rotate-option-box small{
  color:#64748b;
}

.rotate-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:white;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* SUCCESS */

.rotate-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.rotate-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.rotate-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

.rotate-page #downloadBtn{
  border:none!important;
  background:#ef4444!important;
  color:white!important;
  padding:20px 36px!important;
  border-radius:16px!important;
  font-size:22px!important;
  font-weight:800!important;
  cursor:pointer!important;
}

/* MOBILE */

@media(max-width:768px){
  .rotate-start-screen{
    padding:38px 20px 30px!important;
  }

  .rotate-start-screen h1{
    font-size:30px!important;
  }

  .rotate-start-screen p{
    max-width:320px!important;
    font-size:18px!important;
  }

  .rotate-select-row{
    flex-direction:column!important;
    gap:18px!important;
  }

  .rotate-upload-box h2{
    min-width:unset!important;
    width:100%!important;
    max-width:320px!important;
    padding:26px 24px!important;
    font-size:22px!important;
    border-radius:16px!important;
  }

  .rotate-page .cloud-buttons{
    flex-direction:row!important;
    gap:18px!important;
  }

  .rotate-page .cloud-buttons button{
    width:56px!important;
    height:56px!important;
  }

  .rotate-preview-screen{
    display:block!important;
    padding:28px 14px 190px!important;
    overflow-x:hidden!important;
  }

  .rotate-preview-left{
    padding:0!important;
  }

  .rotate-file-grid{
    width:100%!important;
    max-width:100%!important;
    margin:20px auto 0!important;
    grid-template-columns:1fr!important;
  }

  .rotate-pdf-card{
    max-width:320px!important;
    margin:0 auto!important;
    border-radius:18px!important;
  }

  .rotate-action-panel{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    height:auto!important;
    padding:14px 16px!important;
    border-radius:18px 18px 0 0!important;
  }

  .rotate-action-panel h2,
  .rotate-action-panel p{
    display:none!important;
  }

  .rotate-option-box{
    margin-bottom:14px!important;
  }

  .rotate-main-btn{
    margin:0!important;
    padding:18px!important;
    font-size:20px!important;
  }

  .rotate-success-screen{
    justify-content:flex-start!important;
    padding-top:120px!important;
  }

  .rotate-success-screen h1{
    font-size:30px!important;
  }

  .rotate-success-screen p{
    font-size:16px!important;
    max-width:300px!important;
  }

  .rotate-page #downloadBtn{
    width:100%!important;
    max-width:320px!important;
    font-size:18px!important;
  }
}

/* ===== PAGE NUMBER FINAL UI ===== */

.page-number-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

.page-number-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:55px 20px 40px;
}

.page-number-start-screen h1{
  font-size:44px;
  font-weight:900;
  color:#111827;
  margin:0 0 14px;
}

.page-number-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.45;
  color:#4b5563;
  margin:0 auto 28px;
}

.page-number-select-row{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
}

.page-number-upload-box h2{
  min-width:330px;
  padding:25px 38px;
  background:#ef4444;
  color:white;
  border-radius:11px;
  font-size:28px;
  font-weight:900;
  margin:0;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

.page-number-page .cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.page-number-page .cloud-buttons button{
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* PREVIEW */

.page-number-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  background:#f3f4f8;
  padding-right:320px;
}

.page-number-preview-left{
  padding:24px;
}

.page-number-file-grid{
  max-width:850px;
  margin:90px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr));
  gap:18px;
}

.page-number-pdf-card{
  min-height:245px;
  padding:18px 14px 14px;
  border-radius:10px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* RIGHT PANEL */

.page-number-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:320px;
  height:calc(100vh - 72px);
  background:white;
  border-left:1px solid #e5e7eb;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
}

.page-number-action-panel h2{
  font-size:36px;
  color:#111827;
  margin-bottom:12px;
}

.page-number-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:24px;
}

.page-number-option-box{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  margin-bottom:18px;
}

.page-number-radio{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:17px;
  font-weight:700;
  color:#111827;
  margin-bottom:8px;
}

.page-number-radio input{
  width:18px;
  height:18px;
}

.page-number-option-box small{
  color:#64748b;
  line-height:1.5;
}

.page-number-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:white;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* SUCCESS */

.page-number-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.page-number-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.page-number-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

.page-number-page #downloadBtn{
  border:none!important;
  background:#ef4444!important;
  color:white!important;
  padding:20px 36px!important;
  border-radius:16px!important;
  font-size:22px!important;
  font-weight:800!important;
  cursor:pointer!important;
}

/* MOBILE */

@media(max-width:768px){

  .page-number-start-screen{
    padding:38px 20px 30px!important;
  }

  .page-number-start-screen h1{
    font-size:30px!important;
  }

  .page-number-start-screen p{
    max-width:320px!important;
    font-size:18px!important;
  }

  .page-number-select-row{
    flex-direction:column!important;
    gap:18px!important;
  }

  .page-number-upload-box h2{
    min-width:unset!important;
    width:100%!important;
    max-width:320px!important;
    padding:26px 24px!important;
    font-size:22px!important;
    border-radius:16px!important;
  }

  .page-number-page .cloud-buttons{
    flex-direction:row!important;
    gap:18px!important;
  }

  .page-number-page .cloud-buttons button{
    width:56px!important;
    height:56px!important;
  }

  .page-number-preview-screen{
    display:block!important;
    padding:28px 14px 210px!important;
    overflow-x:hidden!important;
  }

  .page-number-preview-left{
    padding:0!important;
  }

  .page-number-file-grid{
    width:100%!important;
    max-width:100%!important;
    margin:20px auto 0!important;
    grid-template-columns:1fr!important;
  }

  .page-number-pdf-card{
    max-width:320px!important;
    margin:0 auto!important;
    border-radius:18px!important;
  }

  .page-number-action-panel{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    height:auto!important;
    padding:14px 16px!important;
    border-radius:18px 18px 0 0!important;
  }

  .page-number-action-panel h2,
  .page-number-action-panel p{
    display:none!important;
  }

  .page-number-main-btn{
    margin:0!important;
    padding:18px!important;
    font-size:20px!important;
  }

  .page-number-success-screen{
    justify-content:flex-start!important;
    padding-top:120px!important;
  }

  .page-number-success-screen h1{
    font-size:30px!important;
  }

  .page-number-success-screen p{
    font-size:16px!important;
    max-width:300px!important;
  }

  .page-number-page #downloadBtn{
    width:100%!important;
    max-width:320px!important;
    font-size:18px!important;
  }
}

/* ===== WATERMARK PDF FINAL UI ===== */

.watermark-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

.watermark-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:55px 20px 40px;
}

.watermark-start-screen h1{
  font-size:44px;
  font-weight:900;
  color:#111827;
  margin:0 0 14px;
}

.watermark-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.45;
  color:#4b5563;
  margin:0 auto 28px;
}

.watermark-select-row{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
}

.watermark-upload-box h2{
  min-width:330px;
  padding:25px 38px;
  background:#ef4444;
  color:white;
  border-radius:11px;
  font-size:28px;
  font-weight:900;
  margin:0;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

.watermark-page .cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.watermark-page .cloud-buttons button{
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* PREVIEW */

.watermark-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  background:#f3f4f8;
  padding-right:320px;
}

.watermark-preview-left{
  padding:24px;
}

.watermark-file-grid{
  max-width:850px;
  margin:90px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr));
  gap:18px;
}

.watermark-pdf-card{
  min-height:245px;
  padding:18px 14px 14px;
  border-radius:10px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* RIGHT PANEL */

.watermark-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:320px;
  height:calc(100vh - 72px);
  background:white;
  border-left:1px solid #e5e7eb;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
}

.watermark-action-panel h2{
  font-size:36px;
  color:#111827;
  margin-bottom:12px;
}

.watermark-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:22px;
}

.watermark-option-box{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
  margin-bottom:14px;
}

.watermark-option-box label{
  display:block;
  font-size:15px;
  font-weight:800;
  color:#111827;
  margin-bottom:10px;
}

.watermark-option-box input[type="text"]{
  width:100%;
  padding:13px 14px;
  border-radius:12px;
  border:1px solid #d1d5db;
  outline:none;
  font-size:15px;
  margin:0;
  color:#111827;
  background:white;
  text-align:left;
}

.watermark-option-box input[type="range"]{
  width:100%;
  cursor:pointer;
}

.watermark-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:white;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* SUCCESS */

.watermark-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.watermark-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.watermark-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

.watermark-page #downloadBtn{
  border:none!important;
  background:#ef4444!important;
  color:white!important;
  padding:20px 36px!important;
  border-radius:16px!important;
  font-size:22px!important;
  font-weight:800!important;
  cursor:pointer!important;
}

/* MOBILE */

@media(max-width:768px){

  .watermark-start-screen{
    padding:38px 20px 30px!important;
  }

  .watermark-start-screen h1{
    font-size:30px!important;
  }

  .watermark-start-screen p{
    max-width:320px!important;
    font-size:18px!important;
  }

  .watermark-select-row{
    flex-direction:column!important;
    gap:18px!important;
  }

  .watermark-upload-box h2{
    min-width:unset!important;
    width:100%!important;
    max-width:320px!important;
    padding:26px 24px!important;
    font-size:22px!important;
    border-radius:16px!important;
  }

  .watermark-page .cloud-buttons{
    flex-direction:row!important;
    gap:18px!important;
  }

  .watermark-page .cloud-buttons button{
    width:56px!important;
    height:56px!important;
  }

  .watermark-preview-screen{
    display:block!important;
    padding:28px 14px 250px!important;
    overflow-x:hidden!important;
  }

  .watermark-preview-left{
    padding:0!important;
  }

  .watermark-file-grid{
    width:100%!important;
    max-width:100%!important;
    margin:20px auto 0!important;
    grid-template-columns:1fr!important;
  }

  .watermark-pdf-card{
    max-width:320px!important;
    margin:0 auto!important;
    border-radius:18px!important;
  }

  .watermark-action-panel{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    height:auto!important;
    max-height:62vh!important;
    overflow-y:auto!important;
    padding:14px 16px!important;
    border-radius:18px 18px 0 0!important;
  }

  .watermark-action-panel h2,
  .watermark-action-panel p{
    display:none!important;
  }

  .watermark-option-box{
    margin-bottom:10px!important;
    padding:12px!important;
  }

  .watermark-option-box label{
    font-size:14px!important;
    margin-bottom:8px!important;
  }

  .watermark-main-btn{
    margin:0!important;
    padding:18px!important;
    font-size:20px!important;
  }

  .watermark-success-screen{
    justify-content:flex-start!important;
    padding-top:120px!important;
  }

  .watermark-success-screen h1{
    font-size:30px!important;
  }

  .watermark-success-screen p{
    font-size:16px!important;
    max-width:300px!important;
  }

  .watermark-page #downloadBtn{
    width:100%!important;
    max-width:320px!important;
    font-size:18px!important;
  }
}

/* ===== PROTECT PDF FINAL UI ===== */

.protect-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

.protect-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:55px 20px 40px;
}

.protect-start-screen h1{
  font-size:44px;
  font-weight:900;
  color:#111827;
  margin:0 0 14px;
}

.protect-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.45;
  color:#4b5563;
  margin:0 auto 28px;
}

.protect-select-row{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
}

.protect-upload-box h2{
  min-width:330px;
  padding:25px 38px;
  background:#ef4444;
  color:white;
  border-radius:11px;
  font-size:28px;
  font-weight:900;
  margin:0;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

.protect-page .cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.protect-page .cloud-buttons button{
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* PREVIEW */

.protect-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  background:#f3f4f8;
  padding-right:320px;
}

.protect-preview-left{
  padding:24px;
}

.protect-file-grid{
  max-width:850px;
  margin:90px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr));
  gap:18px;
}

.protect-pdf-card{
  min-height:245px;
  padding:18px 14px 14px;
  border-radius:10px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* RIGHT PANEL */

.protect-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:320px;
  height:calc(100vh - 72px);
  background:white;
  border-left:1px solid #e5e7eb;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
}

.protect-action-panel h2{
  font-size:36px;
  color:#111827;
  margin-bottom:12px;
}

.protect-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:22px;
}

.protect-option-box{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  margin-bottom:18px;
}

.protect-option-box label{
  display:block;
  font-size:15px;
  font-weight:800;
  color:#111827;
  margin-bottom:10px;
}

.protect-option-box input{
  width:100%;
  padding:13px 14px;
  border-radius:12px;
  border:1px solid #d1d5db;
  outline:none;
  font-size:15px;
  color:#111827;
  background:white;
}

.protect-option-box small{
  display:block;
  margin-top:10px;
  color:#64748b;
  line-height:1.5;
}

.protect-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:white;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* SUCCESS */

.protect-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.protect-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.protect-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

.protect-page #downloadBtn{
  border:none!important;
  background:#ef4444!important;
  color:white!important;
  padding:20px 36px!important;
  border-radius:16px!important;
  font-size:22px!important;
  font-weight:800!important;
  cursor:pointer!important;
}

/* MOBILE */

@media(max-width:768px){

  .protect-start-screen{
    padding:38px 20px 30px!important;
  }

  .protect-start-screen h1{
    font-size:30px!important;
  }

  .protect-start-screen p{
    max-width:320px!important;
    font-size:18px!important;
  }

  .protect-select-row{
    flex-direction:column!important;
    gap:18px!important;
  }

  .protect-upload-box h2{
    min-width:unset!important;
    width:100%!important;
    max-width:320px!important;
    padding:26px 24px!important;
    font-size:22px!important;
    border-radius:16px!important;
  }

  .protect-page .cloud-buttons{
    flex-direction:row!important;
    gap:18px!important;
  }

  .protect-page .cloud-buttons button{
    width:56px!important;
    height:56px!important;
  }

  .protect-preview-screen{
    display:block!important;
    padding:28px 14px 220px!important;
    overflow-x:hidden!important;
  }

  .protect-preview-left{
    padding:0!important;
  }

  .protect-file-grid{
    width:100%!important;
    max-width:100%!important;
    margin:20px auto 0!important;
    grid-template-columns:1fr!important;
  }

  .protect-pdf-card{
    max-width:320px!important;
    margin:0 auto!important;
    border-radius:18px!important;
  }

  .protect-action-panel{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    height:auto!important;
    padding:14px 16px!important;
    border-radius:18px 18px 0 0!important;
  }

  .protect-action-panel h2,
  .protect-action-panel p{
    display:none!important;
  }

  .protect-option-box{
    margin-bottom:12px!important;
    padding:12px!important;
  }

  .protect-main-btn{
    margin:0!important;
    padding:18px!important;
    font-size:20px!important;
  }

  .protect-success-screen{
    justify-content:flex-start!important;
    padding-top:120px!important;
  }

  .protect-success-screen h1{
    font-size:30px!important;
  }

  .protect-success-screen p{
    font-size:16px!important;
    max-width:300px!important;
  }

  .protect-page #downloadBtn{
    width:100%!important;
    max-width:320px!important;
    font-size:18px!important;
  }
}

.show-password-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  font-size:14px;
  font-weight:700;
  color:#374151;
  cursor:pointer;
}

.show-password-row input{
  width:16px !important;
  height:16px !important;
}

/* ===== FINAL CLEAN UNLOCK PDF ===== */

.unlock-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

/* START SCREEN */

.unlock-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:70px 20px 40px;
}

.unlock-start-screen h1{
  font-size:56px;
  font-weight:900;
  color:#111827;
  margin:0 0 18px;
}

.unlock-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.5;
  color:#4b5563;
  margin:0 0 34px;
}

.unlock-select-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.unlock-upload-box h2{
  width:340px;
  padding:28px 22px;
  margin:0;
  background:#ef4444;
  color:#ffffff;
  border:none;
  border-radius:14px;
  font-size:28px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

.unlock-page .cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.unlock-page .cloud-buttons button{
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.unlock-page .drop-text{
  margin-top:14px;
  font-size:16px;
  color:#374151;
}

/* PREVIEW SCREEN */

.unlock-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  background:#f3f4f8;
  padding-right:320px;
}

.unlock-preview-left{
  padding:24px;
}

.unlock-file-grid{
  max-width:900px;
  margin:70px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;
}

.unlock-pdf-card{
  min-height:260px;
  padding:18px 14px 14px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* RIGHT PANEL */

.unlock-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:320px;
  height:calc(100vh - 72px);
  background:white;
  border-left:1px solid #e5e7eb;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
}

.unlock-action-panel h2{
  font-size:34px;
  color:#111827;
  margin-bottom:12px;
}

.unlock-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:22px;
}

.unlock-option-box{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  margin-bottom:18px;
}

.unlock-option-box label{
  display:block;
  font-size:15px;
  font-weight:800;
  color:#111827;
  margin-bottom:10px;
}

.unlock-option-box input{
  width:100%;
  padding:13px 14px;
  border-radius:12px;
  border:1px solid #d1d5db;
  outline:none;
  font-size:15px;
  color:#111827;
  background:white;
}

.show-password-row{
  display:flex !important;
  align-items:center;
  gap:8px;
  margin-top:12px;
  font-size:14px;
  font-weight:700;
  color:#374151;
  cursor:pointer;
}

.show-password-row input{
  width:16px !important;
  height:16px !important;
}

.unlock-option-box small{
  display:block;
  margin-top:10px;
  color:#64748b;
  line-height:1.5;
}

.unlock-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:#ffffff;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* SUCCESS */

.unlock-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.unlock-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.unlock-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

.unlock-page #downloadBtn{
  border:none !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  padding:20px 36px !important;
  border-radius:16px !important;
  font-size:22px !important;
  font-weight:800 !important;
  cursor:pointer !important;
}

/* MOBILE */

@media(max-width:768px){

  .unlock-start-screen{
    padding:42px 20px 30px;
  }

  .unlock-start-screen h1{
    font-size:34px;
  }

  .unlock-start-screen p{
    max-width:320px;
    font-size:18px;
    line-height:1.5;
  }

  .unlock-select-row{
    flex-direction:column;
    gap:20px;
  }

  .unlock-upload-box h2{
    width:100%;
    max-width:320px;
    padding:26px 18px;
    font-size:22px;
    border-radius:16px;
  }

  .unlock-page .cloud-buttons{
    flex-direction:row;
    gap:18px;
  }

  .unlock-page .cloud-buttons button{
    width:56px;
    height:56px;
  }

  .unlock-preview-screen{
    display:block !important;
    padding:24px 14px 220px;
  }

  .unlock-preview-left{
    padding:0;
  }

  .unlock-file-grid{
    width:100%;
    max-width:100%;
    margin:20px auto 0;
    grid-template-columns:1fr;
  }

  .unlock-pdf-card{
    max-width:320px;
    margin:0 auto;
    border-radius:18px;
  }

  .unlock-action-panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    width:100%;
    height:auto;
    padding:14px 16px;
    border-radius:18px 18px 0 0;
  }

  .unlock-action-panel h2,
  .unlock-action-panel p{
    display:none;
  }

  .unlock-option-box{
    margin-bottom:12px;
    padding:12px;
  }

  .unlock-main-btn{
    margin:0;
    padding:18px;
    font-size:20px;
  }

  .unlock-success-screen{
    justify-content:flex-start;
    padding-top:120px;
  }

  .unlock-success-screen h1{
    font-size:30px;
  }

  .unlock-success-screen p{
    font-size:16px;
    max-width:300px;
  }

  .unlock-page #downloadBtn{
    width:100%;
    max-width:320px;
    font-size:18px;
  }
}

/* ===== JPG TO PDF ===== */

.jpg-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

.jpg-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:55px 20px 40px;
}

.jpg-start-screen h1{
  font-size:56px;
  font-weight:900;
  color:#111827;
  margin:0 0 18px;
}

.jpg-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.5;
  color:#4b5563;
  margin:0 0 34px;
}

.jpg-select-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.jpg-upload-box h2{
  width:340px;
  padding:28px 22px;
  margin:0;
  background:#ef4444;
  color:#ffffff;
  border:none;
  border-radius:14px;
  font-size:28px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

.jpg-page .cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.jpg-page .cloud-buttons button{
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
}

.jpg-page .drop-text{
  margin-top:14px;
  font-size:16px;
  color:#374151;
}

/* PREVIEW */

.jpg-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  background:#f3f4f8;
  padding-right:320px;
}

.jpg-preview-left{
  padding:24px;
}

.jpg-file-grid{
  max-width:900px;
  margin:70px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;
}

.jpg-card{
  min-height:260px;
  padding:18px 14px 14px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.image-thumb-wrap{
  width:100%;
  height:180px;
  overflow:hidden;
  border-radius:10px;
  background:#f3f4f6;
}

.image-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* PANEL */

.jpg-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:320px;
  height:calc(100vh - 72px);
  background:white;
  border-left:1px solid #e5e7eb;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
}

.jpg-action-panel h2{
  font-size:34px;
  color:#111827;
  margin-bottom:12px;
}

.jpg-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:22px;
}

.jpg-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:#ffffff;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* SUCCESS */

.jpg-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.jpg-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.jpg-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

.jpg-page #downloadBtn{
  border:none!important;
  background:#ef4444!important;
  color:#ffffff!important;
  padding:20px 36px!important;
  border-radius:16px!important;
  font-size:22px!important;
  font-weight:800!important;
  cursor:pointer!important;
}

/* MOBILE */

@media(max-width:768px){

  .jpg-start-screen{
    padding:42px 20px 30px;
  }

  .jpg-start-screen h1{
    font-size:34px;
  }

  .jpg-start-screen p{
    max-width:320px;
    font-size:18px;
  }

  .jpg-select-row{
    flex-direction:column;
    gap:20px;
  }

  .jpg-upload-box h2{
    width:100%;
    max-width:320px;
    padding:26px 18px;
    font-size:22px;
    border-radius:16px;
  }

  .jpg-page .cloud-buttons{
    flex-direction:row;
    gap:18px;
  }

  .jpg-page .cloud-buttons button{
    width:56px;
    height:56px;
  }

  .jpg-preview-screen{
    display:block!important;
    padding:24px 14px 220px;
  }

  .jpg-preview-left{
    padding:0;
  }

  .jpg-file-grid{
    width:100%;
    max-width:100%;
    margin:20px auto 0;
    grid-template-columns:1fr;
  }

  .jpg-card{
    max-width:320px;
    margin:0 auto;
    border-radius:18px;
  }

  .jpg-action-panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    width:100%;
    height:auto;
    padding:14px 16px;
    border-radius:18px 18px 0 0;
  }

  .jpg-action-panel h2,
  .jpg-action-panel p{
    display:none;
  }

  .jpg-main-btn{
    margin:0;
    padding:18px;
    font-size:20px;
  }

  .jpg-success-screen{
    justify-content:flex-start;
    padding-top:120px;
  }

  .jpg-success-screen h1{
    font-size:30px;
  }

  .jpg-success-screen p{
    font-size:16px;
    max-width:300px;
  }

  .jpg-page #downloadBtn{
    width:100%;
    max-width:320px;
    font-size:18px;
  }
}

/* ===== JPG TO PDF ===== */

.jpg-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

.jpg-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:55px 20px 40px;
}

.jpg-start-screen h1{
  font-size:56px;
  font-weight:900;
  color:#111827;
  margin:0 0 18px;
}

.jpg-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.5;
  color:#4b5563;
  margin:0 0 34px;
}

.jpg-select-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.jpg-upload-box h2{
  width:340px;
  padding:28px 22px;
  margin:0;
  background:#ef4444;
  color:#ffffff;
  border:none;
  border-radius:14px;
  font-size:28px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

.jpg-page .cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.jpg-page .cloud-buttons button{
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
}

.jpg-page .drop-text{
  margin-top:14px;
  font-size:16px;
  color:#374151;
}

/* PREVIEW */

.jpg-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  background:#f3f4f8;
  padding-right:320px;
}

.jpg-preview-left{
  padding:24px;
}

.jpg-file-grid{
  max-width:900px;
  margin:70px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;
}

.jpg-card{
  min-height:260px;
  padding:18px 14px 14px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.image-thumb-wrap{
  width:100%;
  height:180px;
  overflow:hidden;
  border-radius:10px;
  background:#f3f4f6;
}

.image-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* PANEL */

.jpg-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:320px;
  height:calc(100vh - 72px);
  background:white;
  border-left:1px solid #e5e7eb;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
}

.jpg-action-panel h2{
  font-size:34px;
  color:#111827;
  margin-bottom:12px;
}

.jpg-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:22px;
}

.add-more-btn{
  width:100%;
  margin-bottom:14px;
  border:none;
  background:#111827;
  color:#ffffff;
  padding:16px;
  border-radius:14px;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.jpg-main-btn{
  width:100%;
  border:none;
  background:#ef4444;
  color:#ffffff;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.jpg-progress{
  margin-top:16px;
}

/* SUCCESS */

.jpg-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.jpg-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.jpg-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

.jpg-page #downloadBtn{
  border:none!important;
  background:#ef4444!important;
  color:#ffffff!important;
  padding:20px 36px!important;
  border-radius:16px!important;
  font-size:22px!important;
  font-weight:800!important;
  cursor:pointer!important;
}

/* MOBILE */

@media(max-width:768px){

  .jpg-start-screen{
    padding:42px 20px 30px;
  }

  .jpg-start-screen h1{
    font-size:34px;
  }

  .jpg-start-screen p{
    max-width:320px;
    font-size:18px;
  }

  .jpg-select-row{
    flex-direction:column;
    gap:20px;
  }

  .jpg-upload-box h2{
    width:100%;
    max-width:320px;
    padding:26px 18px;
    font-size:22px;
    border-radius:16px;
  }

  .jpg-page .cloud-buttons{
    flex-direction:row;
    gap:18px;
  }

  .jpg-page .cloud-buttons button{
    width:56px;
    height:56px;
  }

  .jpg-preview-screen{
    display:block!important;
    padding:24px 14px 220px;
  }

  .jpg-preview-left{
    padding:0;
  }

  .jpg-file-grid{
    width:100%;
    max-width:100%;
    margin:20px auto 0;
    grid-template-columns:1fr;
  }

  .jpg-card{
    max-width:320px;
    margin:0 auto;
    border-radius:18px;
  }

  .jpg-action-panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    width:100%;
    height:auto;
    padding:14px 16px;
    border-radius:18px 18px 0 0;
  }

  .jpg-action-panel h2,
  .jpg-action-panel p{
    display:none;
  }

  .add-more-btn{
    margin-bottom:10px;
    padding:15px;
    font-size:16px;
  }

  .jpg-main-btn{
    padding:18px;
    font-size:20px;
  }

  .jpg-success-screen{
    justify-content:flex-start;
    padding-top:120px;
  }

  .jpg-success-screen h1{
    font-size:30px;
  }

  .jpg-success-screen p{
    font-size:16px;
    max-width:300px;
  }

  .jpg-page #downloadBtn{
    width:100%;
    max-width:320px;
    font-size:18px;
  }

}

/* ===== JPG TO PDF FINAL CLEAN ===== */

.jpg-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

.jpg-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:55px 20px 40px;
}

.jpg-start-screen h1{
  font-size:56px;
  font-weight:900;
  color:#111827;
  margin:0 0 18px;
}

.jpg-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.5;
  color:#4b5563;
  margin:0 0 34px;
}

.jpg-select-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.jpg-upload-box h2{
  width:340px;
  padding:28px 22px;
  margin:0;
  background:#ef4444;
  color:#ffffff;
  border:none;
  border-radius:14px;
  font-size:28px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

.jpg-page .cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.jpg-page .cloud-buttons button{
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
}

.jpg-page .drop-text{
  margin-top:14px;
  font-size:16px;
  color:#374151;
}

/* PREVIEW */

.jpg-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  background:#f3f4f8;
  padding-right:320px;
}

.jpg-preview-left{
  position:relative;
  padding:24px;
}

.jpg-file-grid{
  max-width:900px;
  margin:70px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;
}

.jpg-card{
  min-height:260px;
  padding:18px 14px 14px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.image-thumb-wrap{
  width:100%;
  height:180px;
  overflow:hidden;
  border-radius:10px;
  background:#f3f4f6;
}

.image-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
}

.jpg-floating-add-btn{
  position:fixed;
  right:338px;
  top:290px;
  width:56px;
  height:56px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  font-size:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 12px 25px rgba(239,48,48,.3);
  z-index:20;
}

/* PANEL */

.jpg-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:320px;
  height:calc(100vh - 72px);
  background:white;
  border-left:1px solid #e5e7eb;
  padding:40px 22px 26px;
  display:flex;
  flex-direction:column;
}

.jpg-action-panel h2{
  font-size:34px;
  color:#111827;
  margin-bottom:18px;
}

.jpg-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:22px;
}

.jpg-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:#ffffff;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.jpg-progress{
  margin-top:16px;
}

/* SUCCESS */

.jpg-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.jpg-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.jpg-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

.jpg-page #downloadBtn{
  border:none!important;
  background:#ef4444!important;
  color:#ffffff!important;
  padding:20px 36px!important;
  border-radius:16px!important;
  font-size:22px!important;
  font-weight:800!important;
  cursor:pointer!important;
}

/* MOBILE */

@media(max-width:768px){

  .jpg-start-screen{
    padding:42px 20px 30px;
  }

  .jpg-start-screen h1{
    font-size:34px;
  }

  .jpg-start-screen p{
    max-width:320px;
    font-size:18px;
  }

  .jpg-select-row{
    flex-direction:column;
    gap:20px;
  }

  .jpg-upload-box h2{
    width:100%;
    max-width:320px;
    padding:26px 18px;
    font-size:22px;
    border-radius:16px;
  }

  .jpg-page .cloud-buttons{
    flex-direction:row;
    gap:18px;
  }

  .jpg-page .cloud-buttons button{
    width:56px;
    height:56px;
  }

  .jpg-preview-screen{
    display:block!important;
    padding:24px 14px 220px;
  }

  .jpg-preview-left{
    padding:0;
  }

  .jpg-file-grid{
    width:100%;
    max-width:100%;
    margin:20px auto 0;
    grid-template-columns:1fr;
  }

  .jpg-card{
    max-width:320px;
    margin:0 auto;
    border-radius:18px;
  }

  .jpg-floating-add-btn{
    position:fixed;
    right:18px;
    bottom:155px;
    top:auto;
    width:58px;
    height:58px;
    font-size:26px;
  }

  .jpg-action-panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    width:100%;
    height:auto;
    padding:14px 16px;
    border-radius:18px 18px 0 0;
  }

  .jpg-action-panel h2,
  .jpg-action-panel p{
    display:none;
  }

  .jpg-main-btn{
    padding:18px;
    font-size:20px;
  }

  .jpg-success-screen{
    justify-content:flex-start;
    padding-top:120px;
  }

  .jpg-success-screen h1{
    font-size:30px;
  }

  .jpg-success-screen p{
    font-size:16px;
    max-width:300px;
  }

  .jpg-page #downloadBtn{
    width:100%;
    max-width:320px;
    font-size:18px;
  }
}

/* ===== PDF TO JPG ===== */

.pdf-jpg-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

.pdf-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:55px 20px 40px;
}

.pdf-start-screen h1{
  font-size:56px;
  font-weight:900;
  color:#111827;
  margin:0 0 18px;
}

.pdf-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.5;
  color:#4b5563;
  margin:0 0 34px;
}

.pdf-select-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.pdf-upload-box h2{
  width:340px;
  padding:28px 22px;
  margin:0;
  background:#ef4444;
  color:#ffffff;
  border:none;
  border-radius:14px;
  font-size:28px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

.pdf-jpg-page .cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.pdf-jpg-page .cloud-buttons button{
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
}

.pdf-jpg-page .drop-text{
  margin-top:14px;
  font-size:16px;
  color:#374151;
}

/* PREVIEW */

.pdf-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  background:#f3f4f8;
  padding-right:320px;
}

.pdf-preview-left{
  position:relative;
  padding:24px;
}

.pdf-file-grid{
  max-width:900px;
  margin:70px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;
}

.pdf-card{
  min-height:260px;
  padding:18px 14px 14px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.pdf-preview-thumb{
  width:100%;
  height:180px;
  border-radius:10px;
  background:#fef2f2;
  display:flex;
  align-items:center;
  justify-content:center;
}

.pdf-preview-thumb i{
  font-size:90px;
  color:#ef4444;
}

.pdf-floating-add-btn{
  position:fixed;
  right:338px;
  top:290px;
  width:56px;
  height:56px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  font-size:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 12px 25px rgba(239,48,48,.3);
  z-index:20;
}

/* PANEL */

.pdf-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:320px;
  height:calc(100vh - 72px);
  background:white;
  border-left:1px solid #e5e7eb;
  padding:40px 22px 26px;
  display:flex;
  flex-direction:column;
}

.pdf-action-panel h2{
  font-size:34px;
  color:#111827;
  margin-bottom:18px;
}

.pdf-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:22px;
}

.pdf-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:#ffffff;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.pdf-progress{
  margin-top:16px;
}

/* SUCCESS */

.pdf-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.pdf-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.pdf-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

.pdf-jpg-page #downloadBtn{
  border:none!important;
  background:#ef4444!important;
  color:#ffffff!important;
  padding:20px 36px!important;
  border-radius:16px!important;
  font-size:22px!important;
  font-weight:800!important;
  cursor:pointer!important;
}

/* MOBILE */

@media(max-width:768px){

  .pdf-start-screen{
    padding:42px 20px 30px;
  }

  .pdf-start-screen h1{
    font-size:34px;
  }

  .pdf-start-screen p{
    max-width:320px;
    font-size:18px;
  }

  .pdf-select-row{
    flex-direction:column;
    gap:20px;
  }

  .pdf-upload-box h2{
    width:100%;
    max-width:320px;
    padding:26px 18px;
    font-size:22px;
    border-radius:16px;
  }

  .pdf-jpg-page .cloud-buttons{
    flex-direction:row;
    gap:18px;
  }

  .pdf-jpg-page .cloud-buttons button{
    width:56px;
    height:56px;
  }

  .pdf-preview-screen{
    display:block!important;
    padding:24px 14px 220px;
  }

  .pdf-preview-left{
    padding:0;
  }

  .pdf-file-grid{
    width:100%;
    max-width:100%;
    margin:20px auto 0;
    grid-template-columns:1fr;
  }

  .pdf-card{
    max-width:320px;
    margin:0 auto;
    border-radius:18px;
  }

  .pdf-floating-add-btn{
    position:fixed;
    right:18px;
    bottom:155px;
    top:auto;
    width:58px;
    height:58px;
    font-size:26px;
  }

  .pdf-action-panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    width:100%;
    height:auto;
    padding:14px 16px;
    border-radius:18px 18px 0 0;
  }

  .pdf-action-panel h2,
  .pdf-action-panel p{
    display:none;
  }

  .pdf-main-btn{
    padding:18px;
    font-size:20px;
  }

  .pdf-success-screen{
    justify-content:flex-start;
    padding-top:120px;
  }

  .pdf-success-screen h1{
    font-size:30px;
  }

  .pdf-success-screen p{
    font-size:16px;
    max-width:300px;
  }

  .pdf-jpg-page #downloadBtn{
    width:100%;
    max-width:320px;
    font-size:18px;
  }

}

/* ===== PDF TO PNG ===== */

.pdf-png-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

.png-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:55px 20px 40px;
}

.png-start-screen h1{
  font-size:56px;
  font-weight:900;
  color:#111827;
  margin:0 0 18px;
}

.png-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.5;
  color:#4b5563;
  margin:0 0 34px;
}

.png-select-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.png-upload-box h2{
  width:340px;
  padding:28px 22px;
  margin:0;
  background:#ef4444;
  color:#ffffff;
  border:none;
  border-radius:14px;
  font-size:28px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

.pdf-png-page .cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.pdf-png-page .cloud-buttons button{
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
}

.pdf-png-page .drop-text{
  margin-top:14px;
  font-size:16px;
  color:#374151;
}

/* PREVIEW */

.png-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  background:#f3f4f8;
  padding-right:320px;
}

.png-preview-left{
  position:relative;
  padding:24px;
}

.png-file-grid{
  max-width:900px;
  margin:70px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;
}

.png-card{
  min-height:260px;
  padding:18px 14px 14px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.png-floating-add-btn{
  position:fixed;
  right:338px;
  top:290px;
  width:56px;
  height:56px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  font-size:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 12px 25px rgba(239,48,48,.3);
  z-index:20;
}

/* PANEL */

.png-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:320px;
  height:calc(100vh - 72px);
  background:white;
  border-left:1px solid #e5e7eb;
  padding:40px 22px 26px;
  display:flex;
  flex-direction:column;
}

.png-action-panel h2{
  font-size:34px;
  color:#111827;
  margin-bottom:18px;
}

.png-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:22px;
}

.png-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:#ffffff;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.png-progress{
  margin-top:16px;
}

/* SUCCESS */

.png-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.png-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.png-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

.pdf-png-page #downloadBtn{
  border:none!important;
  background:#ef4444!important;
  color:#ffffff!important;
  padding:20px 36px!important;
  border-radius:16px!important;
  font-size:22px!important;
  font-weight:800!important;
  cursor:pointer!important;
}

/* MOBILE */

@media(max-width:768px){

  .png-start-screen{
    padding:42px 20px 30px;
  }

  .png-start-screen h1{
    font-size:34px;
  }

  .png-start-screen p{
    max-width:320px;
    font-size:18px;
  }

  .png-select-row{
    flex-direction:column;
    gap:20px;
  }

  .png-upload-box h2{
    width:100%;
    max-width:320px;
    padding:26px 18px;
    font-size:22px;
    border-radius:16px;
  }

  .pdf-png-page .cloud-buttons{
    flex-direction:row;
    gap:18px;
  }

  .pdf-png-page .cloud-buttons button{
    width:56px;
    height:56px;
  }

  .png-preview-screen{
    display:block!important;
    padding:24px 14px 220px;
  }

  .png-preview-left{
    padding:0;
  }

  .png-file-grid{
    width:100%;
    max-width:100%;
    margin:20px auto 0;
    grid-template-columns:1fr;
  }

  .png-card{
    max-width:320px;
    margin:0 auto;
    border-radius:18px;
  }

  .png-floating-add-btn{
    position:fixed;
    right:18px;
    bottom:155px;
    top:auto;
    width:58px;
    height:58px;
    font-size:26px;
  }

  .png-action-panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    width:100%;
    height:auto;
    padding:14px 16px;
    border-radius:18px 18px 0 0;
  }

  .png-action-panel h2,
  .png-action-panel p{
    display:none;
  }

  .png-main-btn{
    padding:18px;
    font-size:20px;
  }

  .png-success-screen{
    justify-content:flex-start;
    padding-top:120px;
  }

  .png-success-screen h1{
    font-size:30px;
  }

  .png-success-screen p{
    font-size:16px;
    max-width:300px;
  }

  .pdf-png-page #downloadBtn{
    width:100%;
    max-width:320px;
    font-size:18px;
  }

}

/* ===== PDF TO TEXT ===== */

.pdf-text-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

.text-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:55px 20px 40px;
}

.text-start-screen h1{
  font-size:56px;
  font-weight:900;
  color:#111827;
  margin:0 0 18px;
}

.text-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.5;
  color:#4b5563;
  margin:0 0 34px;
}

.text-select-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.text-upload-box h2{
  width:340px;
  padding:28px 22px;
  margin:0;
  background:#ef4444;
  color:#ffffff;
  border:none;
  border-radius:14px;
  font-size:28px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

.pdf-text-page .cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.pdf-text-page .cloud-buttons button{
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
}

.pdf-text-page .drop-text{
  margin-top:14px;
  font-size:16px;
  color:#374151;
}

.text-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  background:#f3f4f8;
  padding-right:320px;
}

.text-preview-left{
  position:relative;
  padding:24px;
}

.text-file-grid{
  max-width:900px;
  margin:70px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;
}

.text-card{
  min-height:260px;
  padding:18px 14px 14px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.text-floating-add-btn{
  position:fixed;
  right:338px;
  top:290px;
  width:56px;
  height:56px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  font-size:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 12px 25px rgba(239,48,48,.3);
  z-index:20;
}

.text-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:320px;
  height:calc(100vh - 72px);
  background:white;
  border-left:1px solid #e5e7eb;
  padding:40px 22px 26px;
  display:flex;
  flex-direction:column;
}

.text-action-panel h2{
  font-size:34px;
  color:#111827;
  margin-bottom:18px;
}

.text-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:22px;
}

.text-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:#ffffff;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.text-progress{
  margin-top:16px;
}

.text-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.text-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.text-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

.pdf-text-page #downloadBtn{
  border:none!important;
  background:#ef4444!important;
  color:#ffffff!important;
  padding:20px 36px!important;
  border-radius:16px!important;
  font-size:22px!important;
  font-weight:800!important;
  cursor:pointer!important;
}

@media(max-width:768px){
  .text-start-screen{
    padding:42px 20px 30px;
  }

  .text-start-screen h1{
    font-size:34px;
  }

  .text-start-screen p{
    max-width:320px;
    font-size:18px;
  }

  .text-select-row{
    flex-direction:column;
    gap:20px;
  }

  .text-upload-box h2{
    width:100%;
    max-width:320px;
    padding:26px 18px;
    font-size:22px;
    border-radius:16px;
  }

  .pdf-text-page .cloud-buttons{
    flex-direction:row;
    gap:18px;
  }

  .pdf-text-page .cloud-buttons button{
    width:56px;
    height:56px;
  }

  .text-preview-screen{
    display:block!important;
    padding:24px 14px 220px;
  }

  .text-preview-left{
    padding:0;
  }

  .text-file-grid{
    width:100%;
    max-width:100%;
    margin:20px auto 0;
    grid-template-columns:1fr;
  }

  .text-card{
    max-width:320px;
    margin:0 auto;
    border-radius:18px;
  }

  .text-floating-add-btn{
    position:fixed;
    right:18px;
    bottom:155px;
    top:auto;
    width:58px;
    height:58px;
    font-size:26px;
  }

  .text-action-panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    width:100%;
    height:auto;
    padding:14px 16px;
    border-radius:18px 18px 0 0;
  }

  .text-action-panel h2,
  .text-action-panel p{
    display:none;
  }

  .text-main-btn{
    padding:18px;
    font-size:20px;
  }

  .text-success-screen{
    justify-content:flex-start;
    padding-top:120px;
  }

  .text-success-screen h1{
    font-size:30px;
  }

  .text-success-screen p{
    font-size:16px;
    max-width:300px;
  }

  .pdf-text-page #downloadBtn{
    width:100%;
    max-width:320px;
    font-size:18px;
  }
}

/* ===== IMAGE TO PDF FINAL CLEAN ===== */

.image-page{
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

.image-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:55px 20px 40px;
}

.image-start-screen h1{
  font-size:56px;
  font-weight:900;
  color:#111827;
  margin:0 0 18px;
}

.image-start-screen p{
  max-width:850px;
  font-size:24px;
  line-height:1.5;
  color:#4b5563;
  margin:0 0 34px;
}

.image-select-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.image-upload-box h2{
  width:340px;
  padding:28px 22px;
  margin:0;
  background:#ef4444;
  color:#ffffff;
  border:none;
  border-radius:14px;
  font-size:28px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(239,48,48,.25);
}

.image-page .cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.image-page .cloud-buttons button{
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
}

.image-page .drop-text{
  margin-top:14px;
  font-size:16px;
  color:#374151;
}

.image-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  background:#f3f4f8;
  padding-right:320px;
}

.image-preview-left{
  position:relative;
  padding:24px;
}

.image-file-grid{
  max-width:900px;
  margin:70px auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;
}

.image-card{
  min-height:260px;
  padding:18px 14px 14px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.image-floating-add-btn{
  position:fixed;
  right:338px;
  top:290px;
  width:56px;
  height:56px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:white;
  font-size:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 12px 25px rgba(239,48,48,.3);
  z-index:20;
}

.image-action-panel{
  position:fixed;
  top:72px;
  right:0;
  width:320px;
  height:calc(100vh - 72px);
  background:white;
  border-left:1px solid #e5e7eb;
  padding:40px 22px 26px;
  display:flex;
  flex-direction:column;
}

.image-action-panel h2{
  font-size:34px;
  color:#111827;
  margin-bottom:18px;
}

.image-action-panel p{
  color:#64748b;
  line-height:1.7;
  font-size:16px;
  margin-bottom:22px;
}

.image-main-btn{
  margin-top:auto;
  width:100%;
  border:none;
  background:#ef4444;
  color:#ffffff;
  padding:20px;
  border-radius:16px;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.image-progress{
  margin-top:16px;
}

.image-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f3f4f8;
}

.image-success-screen h1{
  font-size:54px;
  color:#111827;
  margin-bottom:14px;
  font-weight:900;
}

.image-success-screen p{
  font-size:20px;
  color:#64748b;
  margin-bottom:28px;
}

.image-page #downloadBtn{
  border:none!important;
  background:#ef4444!important;
  color:#ffffff!important;
  padding:20px 36px!important;
  border-radius:16px!important;
  font-size:22px!important;
  font-weight:800!important;
  cursor:pointer!important;
}

@media(max-width:768px){
  .image-start-screen{
    padding:42px 20px 30px;
  }

  .image-start-screen h1{
    font-size:34px;
  }

  .image-start-screen p{
    max-width:320px;
    font-size:18px;
  }

  .image-select-row{
    flex-direction:column;
    gap:20px;
  }

  .image-upload-box h2{
    width:100%;
    max-width:320px;
    padding:26px 18px;
    font-size:22px;
    border-radius:16px;
  }

  .image-page .cloud-buttons{
    flex-direction:row;
    gap:18px;
  }

  .image-page .cloud-buttons button{
    width:56px;
    height:56px;
  }

  .image-preview-screen{
    display:block!important;
    padding:24px 14px 220px;
  }

  .image-preview-left{
    padding:0;
  }

  .image-file-grid{
    width:100%;
    max-width:100%;
    margin:20px auto 0;
    grid-template-columns:1fr;
  }

  .image-card{
    max-width:320px;
    margin:0 auto;
    border-radius:18px;
  }

  .image-floating-add-btn{
    position:fixed;
    right:18px;
    bottom:155px;
    top:auto;
    width:58px;
    height:58px;
    font-size:26px;
  }

  .image-action-panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    width:100%;
    height:auto;
    padding:14px 16px;
    border-radius:18px 18px 0 0;
  }

  .image-action-panel h2,
  .image-action-panel p{
    display:none;
  }

  .image-main-btn{
    padding:18px;
    font-size:20px;
  }

  .image-success-screen{
    justify-content:flex-start;
    padding-top:120px;
  }

  .image-success-screen h1{
    font-size:30px;
  }

  .image-success-screen p{
    font-size:16px;
    max-width:300px;
  }

  .image-page #downloadBtn{
    width:100%;
    max-width:320px;
    font-size:18px;
  }
}

/* ================================
   PDF TO WORD TOOL PAGE
================================ */

.pdf-word-page {
  min-height: calc(100vh - 70px);
  background: #f7f7fb;
}

.pdf-word-start-screen {
  min-height: calc(100vh - 70px);
  padding: 70px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pdf-word-start-screen h1 {
  font-size: 46px;
  font-weight: 800;
  color: #222;
  margin-bottom: 12px;
}

.pdf-word-start-screen p {
  font-size: 18px;
  color: #555;
  max-width: 620px;
  margin-bottom: 32px;
}

.pdf-word-select-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pdf-word-upload-box {
  background: #e5322d;
  color: #fff;
  padding: 24px 58px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.25);
  transition: 0.25s ease;
}

.pdf-word-upload-box:hover,
.pdf-word-upload-box.drag-active {
  background: #c92420;
  transform: translateY(-2px);
}

.pdf-word-upload-box h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
}

.pdf-word-preview-screen {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: 1fr 330px;
  background: #f4f4f8;
}

.pdf-word-preview-left {
  padding: 28px;
  overflow-y: auto;
}

.pdf-word-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.pdf-word-topbar h1 {
  font-size: 34px;
  margin: 0 0 5px;
  color: #222;
}

.pdf-word-topbar p {
  margin: 0;
  color: #666;
  font-size: 15px;
}

.pdf-word-add-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  background: #e5322d;
  color: #fff;
  cursor: pointer;
  font-size: 0;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-word-add-btn i {
  font-size: 24px;
}

.pdf-word-add-btn:hover {
  background: #c92420;
}

.pdf-word-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

.pdf-word-file-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  min-height: 290px;
}

.pdf-word-file-card h3 {
  font-size: 14px;
  color: #333;
  margin: 12px 0 0;
  line-height: 1.4;
  word-break: break-word;
}

.pdf-word-action-panel {
  background: #fff;
  border-left: 1px solid #ddd;
  padding: 32px 24px;
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
}

.pdf-word-action-panel h2 {
  font-size: 28px;
  margin: 0 0 12px;
  color: #222;
}

.pdf-word-action-panel p {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 24px;
}

.pdf-word-main-btn {
  width: 100%;
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pdf-word-main-btn:hover {
  background: #c92420;
}

.pdf-word-main-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.pdf-word-progress {
  margin-top: 16px;
}

.pdf-word-success-screen {
  min-height: calc(100vh - 70px);
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f7f7fb;
}

.pdf-word-success-screen h1 {
  font-size: 42px;
  color: #222;
  margin-bottom: 12px;
}

.pdf-word-success-screen p {
  font-size: 18px;
  color: #555;
  margin-bottom: 26px;
}

/* Mobile PDF to Word */
@media (max-width: 768px) {
  .pdf-word-start-screen {
    min-height: calc(100vh - 56px);
    padding: 55px 16px 28px;
  }

  .pdf-word-start-screen h1 {
    font-size: 34px;
  }

  .pdf-word-start-screen p {
    font-size: 16px;
  }

  .pdf-word-upload-box {
    padding: 20px 36px;
    width: 100%;
    max-width: 320px;
  }

  .pdf-word-upload-box h2 {
    font-size: 21px;
  }

  .pdf-word-preview-screen {
    grid-template-columns: 1fr;
    padding-bottom: 190px;
  }

  .pdf-word-preview-left {
    padding: 18px;
  }

  .pdf-word-topbar {
    align-items: flex-start;
  }

  .pdf-word-topbar h1 {
    font-size: 28px;
  }

  .pdf-word-add-btn {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }

  .pdf-word-file-grid {
    grid-template-columns: 1fr;
  }

  .pdf-word-action-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    z-index: 90;
    border-left: none;
    border-top: 1px solid #ddd;
    padding: 16px;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
  }

  .pdf-word-action-panel h2 {
    font-size: 22px;
    margin-bottom: 5px;
  }

  .pdf-word-action-panel p {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .pdf-word-main-btn {
    margin-top: 0;
    padding: 14px 18px;
    font-size: 16px;
  }

  .pdf-word-success-screen h1 {
    font-size: 32px;
  }
}

/* PDF TO WORD FIXES */
.pdf-word-page .cloud-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pdf-word-page .cloud-buttons button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #333;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-word-page .cloud-buttons button:hover {
  background: #f1f1f1;
}

.pdf-word-success-screen .download-result-btn {
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 34px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.25);
}

.pdf-word-success-screen .download-result-btn:hover {
  background: #c92420;
}

/* PDF TO WORD - CLOUD ICON SAME AS MERGE TOOL */
.pdf-word-page .cloud-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdf-word-page .cloud-buttons button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #ef2f2f;
  color: #fff;
  font-size: 21px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(239, 47, 47, 0.25);
}

.pdf-word-page .cloud-buttons button i {
  color: #fff;
  font-size: 21px;
}

.pdf-word-page .cloud-buttons button:hover {
  background: #d92727;
  transform: translateY(-1px);
}

/* ================================
   WORD TO PDF TOOL PAGE
================================ */

.word-pdf-page {
  min-height: calc(100vh - 70px);
  background: #f7f7fb;
}

.word-pdf-start-screen {
  min-height: calc(100vh - 70px);
  padding: 70px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.word-pdf-start-screen h1 {
  font-size: 46px;
  font-weight: 800;
  color: #222;
  margin-bottom: 12px;
}

.word-pdf-start-screen p {
  font-size: 18px;
  color: #555;
  max-width: 620px;
  margin-bottom: 32px;
}

.word-pdf-select-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.word-pdf-upload-box {
  background: #e5322d;
  color: #fff;
  padding: 24px 58px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.25);
  transition: 0.25s ease;
}

.word-pdf-upload-box:hover,
.word-pdf-upload-box.drag-active {
  background: #c92420;
  transform: translateY(-2px);
}

.word-pdf-upload-box h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
}

.word-pdf-page .cloud-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.word-pdf-page .cloud-buttons button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #ef2f2f;
  color: #fff;
  font-size: 21px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(239, 47, 47, 0.25);
}

.word-pdf-page .cloud-buttons button i {
  color: #fff;
  font-size: 21px;
}

.word-pdf-page .cloud-buttons button:hover {
  background: #d92727;
  transform: translateY(-1px);
}

.word-pdf-preview-screen {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: 1fr 330px;
  background: #f4f4f8;
}

.word-pdf-preview-left {
  padding: 28px;
  overflow-y: auto;
}

.word-pdf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.word-pdf-topbar h1 {
  font-size: 34px;
  margin: 0 0 5px;
  color: #222;
}

.word-pdf-topbar p {
  margin: 0;
  color: #666;
  font-size: 15px;
}

.word-pdf-add-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  background: #e5322d;
  color: #fff;
  cursor: pointer;
  font-size: 0;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.word-pdf-add-btn i {
  font-size: 24px;
}

.word-pdf-add-btn:hover {
  background: #c92420;
}

.word-pdf-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

.word-pdf-file-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  min-height: 290px;
}

.word-file-preview {
  height: 190px;
  border-radius: 10px;
  background: #f0f5ff;
  border: 1px solid #d8e4ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.word-file-preview i {
  font-size: 70px;
  color: #2b65d9;
  margin-bottom: 12px;
}

.word-file-preview span {
  background: #2b65d9;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 20px;
}

.word-pdf-file-card h3 {
  font-size: 14px;
  color: #333;
  margin: 12px 0 5px;
  line-height: 1.4;
  word-break: break-word;
}

.word-pdf-file-card p {
  margin: 0;
  color: #777;
  font-size: 13px;
}

.word-pdf-action-panel {
  background: #fff;
  border-left: 1px solid #ddd;
  padding: 32px 24px;
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
}

.word-pdf-action-panel h2 {
  font-size: 28px;
  margin: 0 0 12px;
  color: #222;
}

.word-pdf-action-panel p {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 24px;
}

.word-pdf-main-btn {
  width: 100%;
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.word-pdf-main-btn:hover {
  background: #c92420;
}

.word-pdf-main-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.word-pdf-progress {
  margin-top: 16px;
}

.word-pdf-success-screen {
  min-height: calc(100vh - 70px);
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f7f7fb;
}

.word-pdf-success-screen h1 {
  font-size: 42px;
  color: #222;
  margin-bottom: 12px;
}

.word-pdf-success-screen p {
  font-size: 18px;
  color: #555;
  margin-bottom: 26px;
}

.word-pdf-success-screen .download-result-btn {
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 34px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.25);
}

.word-pdf-success-screen .download-result-btn:hover {
  background: #c92420;
}

@media (max-width: 768px) {
  .word-pdf-start-screen {
    min-height: calc(100vh - 56px);
    padding: 55px 16px 28px;
  }

  .word-pdf-start-screen h1 {
    font-size: 34px;
  }

  .word-pdf-start-screen p {
    font-size: 16px;
  }

  .word-pdf-upload-box {
    padding: 20px 36px;
    width: 100%;
    max-width: 320px;
  }

  .word-pdf-upload-box h2 {
    font-size: 21px;
  }

  .word-pdf-preview-screen {
    grid-template-columns: 1fr;
    padding-bottom: 190px;
  }

  .word-pdf-preview-left {
    padding: 18px;
  }

  .word-pdf-topbar {
    align-items: flex-start;
  }

  .word-pdf-topbar h1 {
    font-size: 28px;
  }

  .word-pdf-add-btn {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }

  .word-pdf-file-grid {
    grid-template-columns: 1fr;
  }

  .word-pdf-action-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    z-index: 90;
    border-left: none;
    border-top: 1px solid #ddd;
    padding: 16px;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
  }

  .word-pdf-action-panel h2 {
    font-size: 22px;
    margin-bottom: 5px;
  }

  .word-pdf-action-panel p {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .word-pdf-main-btn {
    margin-top: 0;
    padding: 14px 18px;
    font-size: 16px;
  }

  .word-pdf-success-screen h1 {
    font-size: 32px;
  }
}

/* WORD TO PDF - CLEAN FILE PREVIEW FIX */
.word-pdf-file-card {
  max-width: 270px;
  margin: 0 auto;
}

.word-file-preview {
  height: 190px;
  border-radius: 10px;
  background: #eef4ff;
  border: 1px solid #cfe0ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.word-file-preview i {
  font-size: 76px;
  color: #2b65d9;
  margin-bottom: 12px;
}

.word-file-preview span {
  background: #2b65d9;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 999px;
}

.word-pdf-file-card h3 {
  font-size: 14px;
  color: #222;
  margin: 14px 0 6px;
  line-height: 1.35;
  word-break: break-word;
}

.word-pdf-file-card p {
  font-size: 13px;
  color: #666;
  margin: 0;
}

/* ================================
   PDF TO EXCEL TOOL PAGE
================================ */

.pdf-excel-page {
  min-height: calc(100vh - 70px);
  background: #f7f7fb;
}

.pdf-excel-start-screen {
  min-height: calc(100vh - 70px);
  padding: 70px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pdf-excel-start-screen h1 {
  font-size: 46px;
  font-weight: 800;
  color: #222;
  margin-bottom: 12px;
}

.pdf-excel-start-screen p {
  font-size: 18px;
  color: #555;
  max-width: 620px;
  margin-bottom: 32px;
}

.pdf-excel-select-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pdf-excel-upload-box {
  background: #e5322d;
  color: #fff;
  padding: 24px 58px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.25);
  transition: 0.25s ease;
}

.pdf-excel-upload-box:hover,
.pdf-excel-upload-box.drag-active {
  background: #c92420;
  transform: translateY(-2px);
}

.pdf-excel-upload-box h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
}

.pdf-excel-page .cloud-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdf-excel-page .cloud-buttons button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #ef2f2f;
  color: #fff;
  font-size: 21px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(239, 47, 47, 0.25);
}

.pdf-excel-page .cloud-buttons button i {
  color: #fff;
  font-size: 21px;
}

.pdf-excel-page .cloud-buttons button:hover {
  background: #d92727;
  transform: translateY(-1px);
}

.pdf-excel-preview-screen {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: 1fr 330px;
  background: #f4f4f8;
}

.pdf-excel-preview-left {
  padding: 28px;
  overflow-y: auto;
}

.pdf-excel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.pdf-excel-topbar h1 {
  font-size: 34px;
  margin: 0 0 5px;
  color: #222;
}

.pdf-excel-topbar p {
  margin: 0;
  color: #666;
  font-size: 15px;
}

.pdf-excel-add-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  background: #e5322d;
  color: #fff;
  cursor: pointer;
  font-size: 0;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-excel-add-btn i {
  font-size: 24px;
}

.pdf-excel-add-btn:hover {
  background: #c92420;
}

.pdf-excel-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

.pdf-excel-file-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  min-height: 290px;
}

.pdf-excel-file-card h3 {
  font-size: 14px;
  color: #333;
  margin: 12px 0 0;
  line-height: 1.4;
  word-break: break-word;
}

.pdf-excel-action-panel {
  background: #fff;
  border-left: 1px solid #ddd;
  padding: 32px 24px;
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
}

.pdf-excel-action-panel h2 {
  font-size: 28px;
  margin: 0 0 12px;
  color: #222;
}

.pdf-excel-action-panel p {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 24px;
}

.pdf-excel-main-btn {
  width: 100%;
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pdf-excel-main-btn:hover {
  background: #c92420;
}

.pdf-excel-main-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.pdf-excel-progress {
  margin-top: 16px;
}

.pdf-excel-success-screen {
  min-height: calc(100vh - 70px);
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f7f7fb;
}

.pdf-excel-success-screen h1 {
  font-size: 42px;
  color: #222;
  margin-bottom: 12px;
}

.pdf-excel-success-screen p {
  font-size: 18px;
  color: #555;
  margin-bottom: 26px;
}

.pdf-excel-success-screen .download-result-btn {
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 34px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.25);
}

.pdf-excel-success-screen .download-result-btn:hover {
  background: #c92420;
}

@media (max-width: 768px) {
  .pdf-excel-start-screen {
    min-height: calc(100vh - 56px);
    padding: 55px 16px 28px;
  }

  .pdf-excel-start-screen h1 {
    font-size: 34px;
  }

  .pdf-excel-start-screen p {
    font-size: 16px;
  }

  .pdf-excel-upload-box {
    padding: 20px 36px;
    width: 100%;
    max-width: 320px;
  }

  .pdf-excel-upload-box h2 {
    font-size: 21px;
  }

  .pdf-excel-preview-screen {
    grid-template-columns: 1fr;
    padding-bottom: 190px;
  }

  .pdf-excel-preview-left {
    padding: 18px;
  }

  .pdf-excel-topbar {
    align-items: flex-start;
  }

  .pdf-excel-topbar h1 {
    font-size: 28px;
  }

  .pdf-excel-add-btn {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }

  .pdf-excel-file-grid {
    grid-template-columns: 1fr;
  }

  .pdf-excel-action-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    z-index: 90;
    border-left: none;
    border-top: 1px solid #ddd;
    padding: 16px;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
  }

  .pdf-excel-action-panel h2 {
    font-size: 22px;
    margin-bottom: 5px;
  }

  .pdf-excel-action-panel p {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .pdf-excel-main-btn {
    margin-top: 0;
    padding: 14px 18px;
    font-size: 16px;
  }

  .pdf-excel-success-screen h1 {
    font-size: 32px;
  }
}

/* ================================
   EXCEL TO PDF TOOL PAGE
================================ */

.excel-pdf-page {
  min-height: calc(100vh - 70px);
  background: #f7f7fb;
}

.excel-pdf-start-screen {
  min-height: calc(100vh - 70px);
  padding: 70px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.excel-pdf-start-screen h1 {
  font-size: 46px;
  font-weight: 800;
  color: #222;
  margin-bottom: 12px;
}

.excel-pdf-start-screen p {
  font-size: 18px;
  color: #555;
  max-width: 620px;
  margin-bottom: 32px;
}

.excel-pdf-select-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.excel-pdf-upload-box {
  background: #e5322d;
  color: #fff;
  padding: 24px 58px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.25);
  transition: 0.25s ease;
}

.excel-pdf-upload-box:hover,
.excel-pdf-upload-box.drag-active {
  background: #c92420;
  transform: translateY(-2px);
}

.excel-pdf-upload-box h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
}

.excel-pdf-page .cloud-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.excel-pdf-page .cloud-buttons button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #ef2f2f;
  color: #fff;
  font-size: 21px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(239, 47, 47, 0.25);
}

.excel-pdf-page .cloud-buttons button i {
  color: #fff;
  font-size: 21px;
}

.excel-pdf-page .cloud-buttons button:hover {
  background: #d92727;
  transform: translateY(-1px);
}

.excel-pdf-preview-screen {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: 1fr 330px;
  background: #f4f4f8;
}

.excel-pdf-preview-left {
  padding: 28px;
  overflow-y: auto;
}

.excel-pdf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.excel-pdf-topbar h1 {
  font-size: 34px;
  margin: 0 0 5px;
  color: #222;
}

.excel-pdf-topbar p {
  margin: 0;
  color: #666;
  font-size: 15px;
}

.excel-pdf-add-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  background: #e5322d;
  color: #fff;
  cursor: pointer;
  font-size: 0;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.excel-pdf-add-btn i {
  font-size: 24px;
}

.excel-pdf-add-btn:hover {
  background: #c92420;
}

.excel-pdf-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

.excel-pdf-file-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  min-height: 290px;
}

.excel-file-preview {
  height: 190px;
  border-radius: 10px;
  background: #eefbf3;
  border: 1px solid #ccebd7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.excel-file-preview i {
  font-size: 74px;
  color: #1f9d55;
  margin-bottom: 12px;
}

.excel-file-preview span {
  background: #1f9d55;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 999px;
}

.excel-pdf-file-card h3 {
  font-size: 14px;
  color: #333;
  margin: 12px 0 5px;
  line-height: 1.4;
  word-break: break-word;
}

.excel-pdf-file-card p {
  margin: 0;
  color: #777;
  font-size: 13px;
}

.excel-pdf-action-panel {
  background: #fff;
  border-left: 1px solid #ddd;
  padding: 32px 24px;
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
}

.excel-pdf-action-panel h2 {
  font-size: 28px;
  margin: 0 0 12px;
  color: #222;
}

.excel-pdf-action-panel p {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 24px;
}

.excel-pdf-main-btn {
  width: 100%;
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.excel-pdf-main-btn:hover {
  background: #c92420;
}

.excel-pdf-main-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.excel-pdf-progress {
  margin-top: 16px;
}

.excel-pdf-success-screen {
  min-height: calc(100vh - 70px);
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f7f7fb;
}

.excel-pdf-success-screen h1 {
  font-size: 42px;
  color: #222;
  margin-bottom: 12px;
}

.excel-pdf-success-screen p {
  font-size: 18px;
  color: #555;
  margin-bottom: 26px;
}

.excel-pdf-success-screen .download-result-btn {
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 34px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.25);
}

.excel-pdf-success-screen .download-result-btn:hover {
  background: #c92420;
}

@media (max-width: 768px) {
  .excel-pdf-start-screen {
    min-height: calc(100vh - 56px);
    padding: 55px 16px 28px;
  }

  .excel-pdf-start-screen h1 {
    font-size: 34px;
  }

  .excel-pdf-start-screen p {
    font-size: 16px;
  }

  .excel-pdf-upload-box {
    padding: 20px 36px;
    width: 100%;
    max-width: 320px;
  }

  .excel-pdf-upload-box h2 {
    font-size: 21px;
  }

  .excel-pdf-preview-screen {
    grid-template-columns: 1fr;
    padding-bottom: 190px;
  }

  .excel-pdf-preview-left {
    padding: 18px;
  }

  .excel-pdf-topbar {
    align-items: flex-start;
  }

  .excel-pdf-topbar h1 {
    font-size: 28px;
  }

  .excel-pdf-add-btn {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }

  .excel-pdf-file-grid {
    grid-template-columns: 1fr;
  }

  .excel-pdf-action-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    z-index: 90;
    border-left: none;
    border-top: 1px solid #ddd;
    padding: 16px;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
  }

  .excel-pdf-action-panel h2 {
    font-size: 22px;
    margin-bottom: 5px;
  }

  .excel-pdf-action-panel p {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .excel-pdf-main-btn {
    margin-top: 0;
    padding: 14px 18px;
    font-size: 16px;
  }

  .excel-pdf-success-screen h1 {
    font-size: 32px;
  }
}

/* ================================
   PDF TO POWERPOINT TOOL PAGE
================================ */

.pdf-ppt-page {
  min-height: calc(100vh - 70px);
  background: #f7f7fb;
}

.pdf-ppt-start-screen {
  min-height: calc(100vh - 70px);
  padding: 70px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pdf-ppt-start-screen h1 {
  font-size: 46px;
  font-weight: 800;
  color: #222;
  margin-bottom: 12px;
}

.pdf-ppt-start-screen p {
  font-size: 18px;
  color: #555;
  max-width: 620px;
  margin-bottom: 32px;
}

.pdf-ppt-select-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pdf-ppt-upload-box {
  background: #e5322d;
  color: #fff;
  padding: 24px 58px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.25);
  transition: 0.25s ease;
}

.pdf-ppt-upload-box:hover,
.pdf-ppt-upload-box.drag-active {
  background: #c92420;
  transform: translateY(-2px);
}

.pdf-ppt-upload-box h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
}

.pdf-ppt-page .cloud-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdf-ppt-page .cloud-buttons button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #ef2f2f;
  color: #fff;
  font-size: 21px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(239, 47, 47, 0.25);
}

.pdf-ppt-page .cloud-buttons button i {
  color: #fff;
  font-size: 21px;
}

.pdf-ppt-page .cloud-buttons button:hover {
  background: #d92727;
  transform: translateY(-1px);
}

.pdf-ppt-preview-screen {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: 1fr 330px;
  background: #f4f4f8;
}

.pdf-ppt-preview-left {
  padding: 28px;
  overflow-y: auto;
}

.pdf-ppt-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.pdf-ppt-topbar h1 {
  font-size: 34px;
  margin: 0 0 5px;
  color: #222;
}

.pdf-ppt-topbar p {
  margin: 0;
  color: #666;
  font-size: 15px;
}

.pdf-ppt-add-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  background: #e5322d;
  color: #fff;
  cursor: pointer;
  font-size: 0;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-ppt-add-btn i {
  font-size: 24px;
}

.pdf-ppt-add-btn:hover {
  background: #c92420;
}

.pdf-ppt-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

.pdf-ppt-file-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  min-height: 290px;
}

.pdf-ppt-file-card h3 {
  font-size: 14px;
  color: #333;
  margin: 12px 0 0;
  line-height: 1.4;
  word-break: break-word;
}

.pdf-ppt-action-panel {
  background: #fff;
  border-left: 1px solid #ddd;
  padding: 32px 24px;
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
}

.pdf-ppt-action-panel h2 {
  font-size: 28px;
  margin: 0 0 12px;
  color: #222;
}

.pdf-ppt-action-panel p {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 24px;
}

.pdf-ppt-main-btn {
  width: 100%;
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pdf-ppt-main-btn:hover {
  background: #c92420;
}

.pdf-ppt-main-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.pdf-ppt-progress {
  margin-top: 16px;
}

.pdf-ppt-success-screen {
  min-height: calc(100vh - 70px);
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f7f7fb;
}

.pdf-ppt-success-screen h1 {
  font-size: 42px;
  color: #222;
  margin-bottom: 12px;
}

.pdf-ppt-success-screen p {
  font-size: 18px;
  color: #555;
  margin-bottom: 26px;
}

.pdf-ppt-success-screen .download-result-btn {
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 34px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.25);
}

.pdf-ppt-success-screen .download-result-btn:hover {
  background: #c92420;
}

@media (max-width: 768px) {
  .pdf-ppt-start-screen {
    min-height: calc(100vh - 56px);
    padding: 55px 16px 28px;
  }

  .pdf-ppt-start-screen h1 {
    font-size: 34px;
  }

  .pdf-ppt-start-screen p {
    font-size: 16px;
  }

  .pdf-ppt-upload-box {
    padding: 20px 36px;
    width: 100%;
    max-width: 320px;
  }

  .pdf-ppt-upload-box h2 {
    font-size: 21px;
  }

  .pdf-ppt-preview-screen {
    grid-template-columns: 1fr;
    padding-bottom: 190px;
  }

  .pdf-ppt-preview-left {
    padding: 18px;
  }

  .pdf-ppt-topbar {
    align-items: flex-start;
  }

  .pdf-ppt-topbar h1 {
    font-size: 28px;
  }

  .pdf-ppt-add-btn {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }

  .pdf-ppt-file-grid {
    grid-template-columns: 1fr;
  }

  .pdf-ppt-action-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    z-index: 90;
    border-left: none;
    border-top: 1px solid #ddd;
    padding: 16px;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
  }

  .pdf-ppt-action-panel h2 {
    font-size: 22px;
    margin-bottom: 5px;
  }

  .pdf-ppt-action-panel p {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .pdf-ppt-main-btn {
    margin-top: 0;
    padding: 14px 18px;
    font-size: 16px;
  }

  .pdf-ppt-success-screen h1 {
    font-size: 32px;
  }
}

/* ================================
   POWERPOINT TO PDF TOOL PAGE
================================ */

.ppt-pdf-page{
  min-height:calc(100vh - 70px);
  background:#f7f7fb;
}

.ppt-pdf-start-screen{
  min-height:calc(100vh - 70px);
  padding:70px 20px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.ppt-pdf-start-screen h1{
  font-size:46px;
  font-weight:800;
  color:#222;
  margin-bottom:12px;
}

.ppt-pdf-start-screen p{
  font-size:18px;
  color:#555;
  max-width:620px;
  margin-bottom:32px;
}

.ppt-pdf-select-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.ppt-pdf-upload-box{
  background:#e5322d;
  color:#fff;
  padding:24px 58px;
  border-radius:10px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(229,50,45,0.25);
  transition:.25s ease;
}

.ppt-pdf-upload-box:hover,
.ppt-pdf-upload-box.drag-active{
  background:#c92420;
  transform:translateY(-2px);
}

.ppt-pdf-upload-box h2{
  margin:0;
  font-size:24px;
  font-weight:800;
}

.ppt-pdf-page .cloud-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ppt-pdf-page .cloud-buttons button{
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:#ef2f2f;
  color:#fff;
  font-size:21px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(239,47,47,0.25);
}

.ppt-pdf-page .cloud-buttons button i{
  color:#fff;
  font-size:21px;
}

.ppt-pdf-page .cloud-buttons button:hover{
  background:#d92727;
  transform:translateY(-1px);
}

.ppt-pdf-preview-screen{
  min-height:calc(100vh - 70px);
  display:grid;
  grid-template-columns:1fr 330px;
  background:#f4f4f8;
}

.ppt-pdf-preview-left{
  padding:28px;
  overflow-y:auto;
}

.ppt-pdf-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:24px;
}

.ppt-pdf-topbar h1{
  font-size:34px;
  margin:0 0 5px;
  color:#222;
}

.ppt-pdf-topbar p{
  margin:0;
  color:#666;
  font-size:15px;
}

.ppt-pdf-add-btn{
  width:62px;
  height:62px;
  border-radius:50%;
  border:none;
  background:#e5322d;
  color:#fff;
  cursor:pointer;
  font-size:0;
  box-shadow:0 8px 20px rgba(229,50,45,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
}

.ppt-pdf-add-btn i{
  font-size:24px;
}

.ppt-pdf-add-btn:hover{
  background:#c92420;
}

.ppt-pdf-file-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:22px;
}

.ppt-pdf-file-card{
  position:relative;
  background:#fff;
  border-radius:14px;
  padding:14px;
  box-shadow:0 4px 16px rgba(0,0,0,0.08);
  min-height:290px;
}

.ppt-file-preview{
  height:190px;
  border-radius:10px;
  background:#fff4ec;
  border:1px solid #ffd8bf;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.ppt-file-preview i{
  font-size:74px;
  color:#ea580c;
  margin-bottom:12px;
}

.ppt-file-preview span{
  background:#ea580c;
  color:#fff;
  font-weight:800;
  font-size:13px;
  padding:6px 16px;
  border-radius:999px;
}

.ppt-pdf-file-card h3{
  font-size:14px;
  color:#333;
  margin:12px 0 5px;
  line-height:1.4;
  word-break:break-word;
}

.ppt-pdf-file-card p{
  margin:0;
  color:#777;
  font-size:13px;
}

.ppt-pdf-action-panel{
  background:#fff;
  border-left:1px solid #ddd;
  padding:32px 24px;
  position:sticky;
  top:70px;
  height:calc(100vh - 70px);
  display:flex;
  flex-direction:column;
}

.ppt-pdf-action-panel h2{
  font-size:28px;
  margin:0 0 12px;
  color:#222;
}

.ppt-pdf-action-panel p{
  font-size:15px;
  color:#666;
  line-height:1.5;
  margin-bottom:24px;
}

.ppt-pdf-main-btn{
  width:100%;
  border:none;
  background:#e5322d;
  color:#fff;
  padding:16px 20px;
  border-radius:8px;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.ppt-pdf-main-btn:hover{
  background:#c92420;
}

.ppt-pdf-main-btn:disabled{
  opacity:.75;
  cursor:not-allowed;
}

.ppt-pdf-progress{
  margin-top:16px;
}

.ppt-pdf-success-screen{
  min-height:calc(100vh - 70px);
  padding:60px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#f7f7fb;
}

.ppt-pdf-success-screen h1{
  font-size:42px;
  color:#222;
  margin-bottom:12px;
}

.ppt-pdf-success-screen p{
  font-size:18px;
  color:#555;
  margin-bottom:26px;
}

.ppt-pdf-success-screen .download-result-btn{
  border:none;
  background:#e5322d;
  color:#fff;
  padding:16px 34px;
  border-radius:8px;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(229,50,45,0.25);
}

.ppt-pdf-success-screen .download-result-btn:hover{
  background:#c92420;
}

/* ================================
   HTML TO PDF TOOL PAGE
================================ */

.html-pdf-page {
  min-height: calc(100vh - 70px);
  background: #f7f7fb;
}

.html-pdf-start-screen {
  min-height: calc(100vh - 70px);
  padding: 55px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.html-pdf-start-screen h1 {
  font-size: 46px;
  font-weight: 800;
  color: #222;
  margin-bottom: 12px;
}

.html-pdf-start-screen p {
  font-size: 18px;
  color: #555;
  max-width: 620px;
  margin-bottom: 24px;
}

.html-pdf-code-box {
  width: 100%;
  max-width: 820px;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.html-pdf-code-box textarea {
  width: 100%;
  min-height: 260px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 16px;
  font-size: 15px;
  line-height: 1.5;
  outline: none;
  resize: vertical;
  font-family: Consolas, Monaco, monospace;
}

.html-pdf-code-box textarea:focus {
  border-color: #e5322d;
}

.html-pdf-start-btn {
  margin-top: 20px;
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 42px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.25);
}

.html-pdf-start-btn:hover {
  background: #c92420;
}

.html-pdf-preview-screen {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: 1fr 330px;
  background: #f4f4f8;
}

.html-pdf-preview-left {
  padding: 28px;
  overflow-y: auto;
}

.html-pdf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.html-pdf-topbar h1 {
  font-size: 34px;
  margin: 0 0 5px;
  color: #222;
}

.html-pdf-topbar p {
  margin: 0;
  color: #666;
  font-size: 15px;
}

.html-pdf-add-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  background: #e5322d;
  color: #fff;
  cursor: pointer;
  font-size: 0;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.html-pdf-add-btn i {
  font-size: 22px;
}

.html-pdf-add-btn:hover {
  background: #c92420;
}

.html-pdf-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

.html-pdf-file-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  min-height: 290px;
}

.html-file-preview {
  height: 190px;
  border-radius: 10px;
  background: #f5f0ff;
  border: 1px solid #ddd0ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.html-file-preview i {
  font-size: 74px;
  color: #7c3aed;
  margin-bottom: 12px;
}

.html-file-preview span {
  background: #7c3aed;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 999px;
}

.html-pdf-file-card h3 {
  font-size: 14px;
  color: #333;
  margin: 12px 0 5px;
}

.html-pdf-file-card p {
  margin: 0;
  color: #777;
  font-size: 13px;
}

.html-pdf-action-panel {
  background: #fff;
  border-left: 1px solid #ddd;
  padding: 32px 24px;
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
}

.html-pdf-action-panel h2 {
  font-size: 28px;
  margin: 0 0 12px;
  color: #222;
}

.html-pdf-action-panel p {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 24px;
}

.html-pdf-main-btn {
  width: 100%;
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.html-pdf-main-btn:hover {
  background: #c92420;
}

.html-pdf-main-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.html-pdf-progress {
  margin-top: 16px;
}

.html-pdf-success-screen {
  min-height: calc(100vh - 70px);
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f7f7fb;
}

.html-pdf-success-screen h1 {
  font-size: 42px;
  color: #222;
  margin-bottom: 12px;
}

.html-pdf-success-screen p {
  font-size: 18px;
  color: #555;
  margin-bottom: 26px;
}

.html-pdf-success-screen .download-result-btn {
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 34px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.25);
}

.html-pdf-success-screen .download-result-btn:hover {
  background: #c92420;
}

@media (max-width: 768px) {
  .html-pdf-start-screen {
    min-height: calc(100vh - 56px);
    padding: 45px 16px 28px;
  }

  .html-pdf-start-screen h1 {
    font-size: 34px;
  }

  .html-pdf-start-screen p {
    font-size: 16px;
  }

  .html-pdf-code-box textarea {
    min-height: 230px;
  }

  .html-pdf-preview-screen {
    grid-template-columns: 1fr;
    padding-bottom: 190px;
  }

  .html-pdf-preview-left {
    padding: 18px;
  }

  .html-pdf-topbar {
    align-items: flex-start;
  }

  .html-pdf-topbar h1 {
    font-size: 28px;
  }

  .html-pdf-add-btn {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }

  .html-pdf-file-grid {
    grid-template-columns: 1fr;
  }

  .html-pdf-action-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    z-index: 90;
    border-left: none;
    border-top: 1px solid #ddd;
    padding: 16px;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
  }

  .html-pdf-action-panel h2 {
    font-size: 22px;
    margin-bottom: 5px;
  }

  .html-pdf-action-panel p {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .html-pdf-main-btn {
    margin-top: 0;
    padding: 14px 18px;
    font-size: 16px;
  }

  .html-pdf-success-screen h1 {
    font-size: 32px;
  }
}

/* ================================
   REPAIR PDF TOOL PAGE
================================ */

.repair-page {
  min-height: calc(100vh - 70px);
  background: #f7f7fb;
}

.repair-start-screen {
  min-height: calc(100vh - 70px);
  padding: 70px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.repair-start-screen h1 {
  font-size: 46px;
  font-weight: 800;
  color: #222;
  margin-bottom: 12px;
}

.repair-start-screen p {
  font-size: 18px;
  color: #555;
  max-width: 620px;
  margin-bottom: 32px;
}

.repair-select-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.repair-upload-box {
  background: #e5322d;
  color: #fff;
  padding: 24px 58px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.25);
  transition: 0.25s ease;
}

.repair-upload-box:hover,
.repair-upload-box.drag-active {
  background: #c92420;
  transform: translateY(-2px);
}

.repair-upload-box h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
}

.repair-page .cloud-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.repair-page .cloud-buttons button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #ef2f2f;
  color: #fff;
  font-size: 21px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(239, 47, 47, 0.25);
}

.repair-page .cloud-buttons button i {
  color: #fff;
  font-size: 21px;
}

.repair-page .cloud-buttons button:hover {
  background: #d92727;
  transform: translateY(-1px);
}

.repair-preview-screen {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: 1fr 330px;
  background: #f4f4f8;
}

.repair-preview-left {
  padding: 28px;
  overflow-y: auto;
}

.repair-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.repair-topbar h1 {
  font-size: 34px;
  margin: 0 0 5px;
  color: #222;
}

.repair-topbar p {
  margin: 0;
  color: #666;
  font-size: 15px;
}

.repair-add-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  background: #e5322d;
  color: #fff;
  cursor: pointer;
  font-size: 0;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.repair-add-btn i {
  font-size: 24px;
}

.repair-add-btn:hover {
  background: #c92420;
}

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

.repair-file-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  min-height: 290px;
}

.repair-file-card h3 {
  font-size: 14px;
  color: #333;
  margin: 12px 0 0;
  line-height: 1.4;
  word-break: break-word;
}

.repair-action-panel {
  background: #fff;
  border-left: 1px solid #ddd;
  padding: 32px 24px;
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
}

.repair-action-panel h2 {
  font-size: 28px;
  margin: 0 0 12px;
  color: #222;
}

.repair-action-panel p {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 24px;
}

.repair-main-btn {
  width: 100%;
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.repair-main-btn:hover {
  background: #c92420;
}

.repair-main-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.repair-progress {
  margin-top: 16px;
}

.repair-success-screen {
  min-height: calc(100vh - 70px);
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f7f7fb;
}

.repair-success-screen h1 {
  font-size: 42px;
  color: #222;
  margin-bottom: 12px;
}

.repair-success-screen p {
  font-size: 18px;
  color: #555;
  margin-bottom: 26px;
}

.repair-success-screen .download-result-btn {
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 34px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(229, 50, 45, 0.25);
}

.repair-success-screen .download-result-btn:hover {
  background: #c92420;
}

@media (max-width: 768px) {
  .repair-start-screen {
    min-height: calc(100vh - 56px);
    padding: 55px 16px 28px;
  }

  .repair-start-screen h1 {
    font-size: 34px;
  }

  .repair-start-screen p {
    font-size: 16px;
  }

  .repair-upload-box {
    padding: 20px 36px;
    width: 100%;
    max-width: 320px;
  }

  .repair-upload-box h2 {
    font-size: 21px;
  }

  .repair-preview-screen {
    grid-template-columns: 1fr;
    padding-bottom: 190px;
  }

  .repair-preview-left {
    padding: 18px;
  }

  .repair-topbar {
    align-items: flex-start;
  }

  .repair-topbar h1 {
    font-size: 28px;
  }

  .repair-add-btn {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }

  .repair-file-grid {
    grid-template-columns: 1fr;
  }

  .repair-action-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    z-index: 90;
    border-left: none;
    border-top: 1px solid #ddd;
    padding: 16px;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
  }

  .repair-action-panel h2 {
    font-size: 22px;
    margin-bottom: 5px;
  }

  .repair-action-panel p {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .repair-main-btn {
    margin-top: 0;
    padding: 14px 18px;
    font-size: 16px;
  }

  .repair-success-screen h1 {
    font-size: 32px;
  }
}

.tool-icon.repair {
  background: linear-gradient(135deg, #ff5f57, #e5322d);
  color: #fff;
}

.tool-icon.repair i {
  color: #fff;
  font-size: 30px;
}
/* =========================
   REDACT PDF PRO UI
========================= */

.redact-editor-screen{
  min-height:calc(100vh - 70px);
  display:grid;
  grid-template-columns:190px 1fr 360px;
  background:#eef0f4;
}

/* LEFT */

.redact-left-sidebar{
  background:#f3f4f8;
  border-right:1px solid #d8d8dd;
  overflow:auto;
  padding:18px 14px;
}

.thumb-page{
  margin-bottom:26px;
  text-align:center;
  cursor:pointer;
}

.thumb-preview{
  width:115px;
  height:160px;
  background:#fff;
  margin:0 auto 10px;
  border:1px solid #ddd;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.active-thumb .thumb-preview{
  border:2px solid #1d7cff;
}

.thumb-page span{
  color:#444;
  font-size:15px;
}

/* CENTER */

.redact-center-viewer{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.redact-top-toolbar{
  height:58px;
  background:#fff;
  border-bottom:1px solid #ddd;
  display:flex;
  align-items:center;
  padding:0 18px;
  gap:8px;
}

.toolbar-btn{
  height:40px;
  padding:0 14px;
  border:none;
  background:#fff;
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:8px;
  cursor:pointer;
  font-size:15px;
}

.toolbar-btn:hover{
  background:#f3f4f6;
}

.active-tool{
  background:#fff1f1;
  color:#e5322d;
}

.redact-pdf-stage{
  flex:1;
  overflow:auto;
  padding:30px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

/* RIGHT */

.redact-editor-panel{
  background:#fff;
  border-left:1px solid #ddd;
  padding:18px;
  display:flex;
  flex-direction:column;
}

.redact-editor-panel h2{
  text-align:center;
  font-size:26px;
  margin-bottom:16px;
}

.redact-search{
  width:100%;
  height:48px;
  border:1px solid #ccc;
  border-radius:8px;
  padding:0 14px;
  font-size:16px;
  margin-bottom:14px;
}

.redact-option{
  width:100%;
  height:54px;
  border:1px solid #d7d7db;
  border-radius:8px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 16px;
  font-size:17px;
  cursor:pointer;
  margin-bottom:10px;
}

.redact-option i{
  width:24px;
  text-align:center;
}

.active-option{
  border:2px solid #3b82f6;
  background:#f0f7ff;
}

.redact-actions{
  display:flex;
  justify-content:flex-end;
  gap:14px;
  margin:16px 0;
}

.redact-cancel-btn{
  background:none;
  border:none;
  color:#111827;
  font-size:17px;
  cursor:pointer;
}

.redact-accept-btn{
  border:none;
  background:#e5322d;
  color:#fff;
  height:42px;
  padding:0 20px;
  border-radius:8px;
  font-size:17px;
  font-weight:700;
  cursor:pointer;
}

.redact-warning-box{
  background:#fff2df;
  border:1px solid #ffbe69;
  border-radius:10px;
  padding:16px;
  display:flex;
  gap:14px;
  margin-bottom:16px;
}

.redact-warning-box i{
  color:#ff8a00;
  font-size:22px;
  margin-top:2px;
}

.redact-warning-box p{
  margin:0;
  font-size:15px;
  line-height:1.5;
}

/* MOBILE */

@media(max-width:768px){

  .redact-editor-screen{
    grid-template-columns:1fr;
    padding-bottom:230px;
  }

  .redact-left-sidebar{
    display:none;
  }

  .redact-editor-panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    z-index:999;
    max-height:230px;
    overflow:auto;
  }

  .redact-warning-box{
    display:none;
  }

  .redact-top-toolbar{
    overflow:auto;
  }

}

/* REDACT PDF START SCREEN FINAL FIX */

.redact-start-screen {
  min-height: calc(100vh - 70px) !important;
  padding: 70px 20px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  background: #f7f7fb !important;
}

.redact-start-screen h1 {
  font-size: 46px !important;
  font-weight: 800 !important;
  color: #222 !important;
  margin: 0 0 12px !important;
}

.redact-start-screen p {
  font-size: 18px !important;
  color: #555 !important;
  max-width: 650px !important;
  margin: 0 0 32px !important;
}

.redact-select-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.redact-upload-box {
  background: #e5322d !important;
  color: #fff !important;
  padding: 24px 58px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(229,50,45,0.25) !important;
}

.redact-upload-box h2 {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}

.redact-page .cloud-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.redact-page .cloud-buttons button {
  width: 42px !important;
  height: 42px !important;
  border: none !important;
  border-radius: 50% !important;
  background: #ef2f2f !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 18px rgba(239,47,47,0.25) !important;
}

.redact-page .cloud-buttons button i {
  color: #fff !important;
  font-size: 21px !important;
}

/* REDACT PDF EDITOR FINAL OVERRIDE */

.redact-editor-screen {
  min-height: calc(100vh - 70px) !important;
  display: grid !important;
  grid-template-columns: 190px 1fr 360px !important;
  background: #eef0f4 !important;
}

.redact-left-sidebar {
  display: block !important;
  background: #f3f4f8 !important;
  border-right: 1px solid #d8d8dd !important;
  overflow-y: auto !important;
  padding: 18px 14px !important;
}

.redact-center-viewer {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

.redact-top-toolbar {
  height: 58px !important;
  background: #fff !important;
  border-bottom: 1px solid #ddd !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 18px !important;
  gap: 8px !important;
}

.redact-pdf-stage {
  flex: 1 !important;
  overflow: auto !important;
  padding: 30px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

.redact-canvas-wrap {
  position: relative !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.15) !important;
}

.redact-editor-panel {
  position: static !important;
  background: #fff !important;
  border-left: 1px solid #ddd !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 70px) !important;
  width: auto !important;
}

.redact-editor-panel h2 {
  text-align: center !important;
  font-size: 30px !important;
  margin: 0 0 16px !important;
}

.redact-search {
  width: 100% !important;
  height: 48px !important;
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
  margin-bottom: 14px !important;
}

.redact-option {
  width: 100% !important;
  height: 54px !important;
  border: 1px solid #d7d7db !important;
  border-radius: 8px !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 16px !important;
  font-size: 17px !important;
  cursor: pointer !important;
  margin-bottom: 10px !important;
}

.redact-main-btn {
  margin-top: auto !important;
  width: 100% !important;
  border: none !important;
  background: #e5322d !important;
  color: #fff !important;
  padding: 18px 20px !important;
  border-radius: 10px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.redact-page-controls {
  position: sticky !important;
  bottom: 18px !important;
  margin: 0 auto 18px !important;
  width: fit-content !important;
  background: #3f3f46 !important;
  color: #fff !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  z-index: 30 !important;
}

@media (max-width: 768px) {
  .redact-editor-screen {
    grid-template-columns: 1fr !important;
    padding-bottom: 230px !important;
  }

  .redact-left-sidebar {
    display: none !important;
  }

  .redact-editor-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    min-height: auto !important;
    max-height: 230px !important;
    overflow-y: auto !important;
    z-index: 999 !important;
    border-left: none !important;
    border-top: 1px solid #ddd !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.14) !important;
  }
}

/* HOME PAGE EMERGENCY DISPLAY FIX */

body {
  background: #f7f7fb !important;
  color: #111827 !important;
}

.hero,
.category-nav,
.tools-section {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.hero {
  padding: 70px 20px 35px !important;
  text-align: center !important;
}

.hero h1 {
  color: #111827 !important;
}

.hero p {
  color: #4b5563 !important;
}

.tools-grid {
  display: grid !important;
}

.drawer-overlay {
  display: none;
}

.drawer-overlay.active {
  display: block;
}

/* ===============================
   GLOBAL NEW TOOLS START SCREEN FIX
================================ */

.crop-start-screen,
.compare-start-screen,
.flatten-start-screen,
.redact-start-screen {
  min-height: calc(100vh - 70px) !important;
  padding: 80px 20px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  background: #f7f7fb !important;
}

.crop-start-screen h1,
.compare-start-screen h1,
.flatten-start-screen h1,
.redact-start-screen h1 {
  font-size: 46px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin: 0 0 14px !important;
}

.crop-start-screen p,
.compare-start-screen p,
.flatten-start-screen p,
.redact-start-screen p {
  font-size: 18px !important;
  color: #4b5563 !important;
  max-width: 680px !important;
  margin: 0 0 34px !important;
}

.crop-select-row,
.flatten-select-row,
.redact-select-row,
.compare-upload-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.crop-upload-box,
.flatten-upload-box,
.redact-upload-box,
.compare-upload-box {
  background: #e5322d !important;
  color: #fff !important;
  padding: 24px 58px !important;
  min-width: 285px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  box-shadow: 0 10px 24px rgba(229, 50, 45, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.crop-upload-box h2,
.flatten-upload-box h2,
.redact-upload-box h2,
.compare-upload-box h2 {
  margin: 0 !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  color: #fff !important;
}

.crop-page .cloud-buttons,
.flatten-page .cloud-buttons,
.redact-page .cloud-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.crop-page .cloud-buttons button,
.flatten-page .cloud-buttons button,
.redact-page .cloud-buttons button {
  width: 42px !important;
  height: 42px !important;
  border: none !important;
  border-radius: 50% !important;
  background: #ef2f2f !important;
  color: #fff !important;
  font-size: 21px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 18px rgba(239, 47, 47, 0.25) !important;
}

.crop-page .cloud-buttons button i,
.flatten-page .cloud-buttons button i,
.redact-page .cloud-buttons button i {
  color: #fff !important;
  font-size: 21px !important;
}

.drop-text {
  margin-top: 12px !important;
  font-size: 16px !important;
  color: #111827 !important;
}

/* old simple tool pages center fix */
.tool-container,
.converter-box,
.pdf-tool-box {
  margin: 70px auto 0 !important;
}

/* ===============================
   NEW TOOLS PREVIEW SCREEN FINAL FIX
================================ */

/* shared preview layout */
.compare-preview-screen,
.flatten-preview-screen {
  min-height: calc(100vh - 70px) !important;
  display: grid !important;
  grid-template-columns: 1fr 360px !important;
  background: #eef0f4 !important;
}

.compare-preview-left,
.flatten-preview-left {
  padding: 28px !important;
  overflow-y: auto !important;
}

.compare-topbar,
.flatten-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
}

.compare-topbar h1,
.flatten-topbar h1 {
  font-size: 34px !important;
  margin: 0 0 6px !important;
  color: #111827 !important;
}

.compare-topbar p,
.flatten-topbar p {
  margin: 0 !important;
  color: #666 !important;
}

.compare-file-grid,
.flatten-file-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 22px !important;
}

.compare-file-card,
.flatten-file-card {
  position: relative !important;
  background: #fff !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
  min-height: 290px !important;
}

.compare-file-card h3,
.flatten-file-card h3 {
  font-size: 14px !important;
  margin: 12px 0 0 !important;
  color: #111827 !important;
  word-break: break-word !important;
}

.compare-action-panel,
.flatten-action-panel {
  background: #fff !important;
  border-left: 1px solid #ddd !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 70px) !important;
}

.compare-action-panel h2,
.flatten-action-panel h2 {
  font-size: 32px !important;
  margin: 0 0 16px !important;
  color: #111827 !important;
}

.compare-help,
.flatten-help {
  background: #dff2ff !important;
  color: #1f2937 !important;
  padding: 12px 14px !important;
  border-radius: 7px !important;
  line-height: 1.5 !important;
  display: flex !important;
  gap: 10px !important;
  font-size: 15px !important;
  margin-bottom: 24px !important;
}

.compare-main-btn,
.flatten-main-btn {
  margin-top: auto !important;
  width: 100% !important;
  border: none !important;
  background: #e5322d !important;
  color: #fff !important;
  padding: 18px 20px !important;
  border-radius: 10px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.compare-progress,
.flatten-progress {
  margin-top: 16px !important;
}

/* plus button */
.flatten-add-btn,
.crop-add-btn {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  border: none !important;
  border-radius: 50% !important;
  background: #e5322d !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(229,50,45,0.35) !important;
  font-size: 0 !important;
}

.flatten-add-btn i,
.crop-add-btn i {
  font-size: 24px !important;
  color: #fff !important;
}

/* thumbnails */
.pdf-thumb-wrap {
  width: 100% !important;
  height: 190px !important;
  background: #f8fafc !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pdf-thumb {
  width: 100% !important;
  height: 100% !important;
}

/* remove + order */
.remove-file-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 28px !important;
  height: 28px !important;
  border: none !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 18px !important;
  cursor: pointer !important;
  z-index: 5 !important;
}

.file-order-badge {
  position: absolute !important;
  left: 12px !important;
  bottom: 12px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #111827 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
}

/* flatten options */
.flatten-option-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.flatten-check {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 16px !important;
}

.flatten-check input {
  width: 20px !important;
  height: 20px !important;
}

/* mobile */
@media (max-width: 768px) {
  .compare-preview-screen,
  .flatten-preview-screen {
    grid-template-columns: 1fr !important;
    padding-bottom: 220px !important;
  }

  .compare-preview-left,
  .flatten-preview-left {
    padding: 18px !important;
  }

  .compare-file-grid,
  .flatten-file-grid {
    grid-template-columns: 1fr !important;
  }

  .compare-action-panel,
  .flatten-action-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 999 !important;
    min-height: auto !important;
    border-left: none !important;
    border-top: 1px solid #ddd !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.14) !important;
  }
}

/* CROP PDF FINAL FIX */

.crop-page {
  min-height: calc(100vh - 70px);
  background: #f7f7fb;
}

.crop-start-screen {
  min-height: calc(100vh - 70px);
  padding: 80px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.crop-start-screen h1 {
  font-size: 46px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 14px;
}

.crop-start-screen p {
  font-size: 18px;
  color: #4b5563;
  margin: 0 0 34px;
}

.crop-select-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.crop-upload-box {
  background: #e5322d;
  color: #fff;
  padding: 24px 58px;
  min-width: 285px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(229,50,45,.25);
}

.crop-upload-box h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 800;
}

.crop-page .cloud-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crop-page .cloud-buttons button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #ef2f2f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}

.crop-editor-screen {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: 1fr 375px;
  background: #eef0f4;
}

.crop-editor-left {
  position: relative;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  overflow: auto;
}

.crop-canvas-wrap {
  position: relative;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  margin: 0 auto 20px;
}

#pdfCanvas {
  display: block;
}

.crop-box {
  position: absolute;
  border: 3px solid #e5322d;
  background: rgba(229,50,45,.08);
  cursor: move;
  box-sizing: border-box;
}

.crop-handle {
  width: 16px;
  height: 16px;
  background: #e5322d;
  border: 2px solid #fff;
  border-radius: 50%;
  position: absolute;
}

.crop-handle.tl { left: -9px; top: -9px; cursor: nwse-resize; }
.crop-handle.tr { right: -9px; top: -9px; cursor: nesw-resize; }
.crop-handle.bl { left: -9px; bottom: -9px; cursor: nesw-resize; }
.crop-handle.br { right: -9px; bottom: -9px; cursor: nwse-resize; }

.crop-page-controls {
  background: #4a4a55;
  color: #fff;
  border-radius: 6px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
}

.crop-page-controls button {
  background: transparent;
  color: #fff;
  border: none;
  font-size: 22px;
  cursor: pointer;
}

.crop-editor-panel {
  background: #fff;
  border-left: 1px solid #d4d4d8;
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 70px);
}

.crop-editor-panel h2 {
  text-align: center;
  font-size: 30px;
  margin: 0 0 18px;
}

.crop-help {
  background: #dff2ff;
  color: #1f2937;
  padding: 12px 14px;
  border-radius: 7px;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  font-size: 15px;
  margin-bottom: 28px;
}

.crop-reset-btn {
  background: none;
  border: none;
  color: #e5322d;
  font-size: 15px;
  text-decoration: underline;
  align-self: flex-end;
  cursor: pointer;
  margin-bottom: 8px;
}

.crop-radio-box h3 {
  font-size: 16px;
  margin: 0 0 12px;
}

.crop-radio-box label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 18px;
  font-size: 16px;
}

.crop-radio-box input {
  width: 22px;
  height: 22px;
  accent-color: #22c55e;
}

.crop-main-btn {
  margin-top: auto;
  width: 100%;
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 18px 20px;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
}

.crop-progress {
  margin-top: 16px;
}

.crop-success-screen {
  min-height: calc(100vh - 70px);
  padding: 60px 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f7f7fb;
}

.crop-success-screen h1 {
  font-size: 42px;
  margin-bottom: 12px;
}

.crop-success-screen .download-result-btn {
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 34px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

@media(max-width:768px) {
  .crop-editor-screen {
    grid-template-columns: 1fr;
    padding-bottom: 260px;
  }

  .crop-editor-left {
    padding: 18px 12px;
    align-items: flex-start;
    overflow-x: auto;
  }

  .crop-editor-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    min-height: auto;
    z-index: 999;
    border-left: none;
    border-top: 1px solid #ddd;
    padding: 16px;
    box-shadow: 0 -8px 24px rgba(0,0,0,.14);
  }

  .crop-help {
    display: none;
  }

  .crop-main-btn {
    font-size: 18px;
    padding: 15px;
  }
}

/* COMPARE PDF FINAL FULL FIX */

.compare-page {
  min-height: calc(100vh - 70px);
  background: #f7f7fb;
}

.compare-start-screen {
  min-height: calc(100vh - 70px);
  padding: 80px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.compare-start-screen h1 {
  font-size: 46px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 14px;
}

.compare-start-screen p {
  font-size: 18px;
  color: #4b5563;
  margin: 0 0 34px;
}

.compare-upload-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.compare-upload-box {
  background: #e5322d;
  color: #fff;
  padding: 24px 58px;
  min-width: 285px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(229,50,45,.25);
}

.compare-upload-box h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 800;
  color: #fff;
}

.compare-preview-screen {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: 1fr 370px;
  background: #eef0f4;
}

.compare-preview-left {
  padding: 24px;
  overflow: auto;
}

.compare-topbar {
  margin-bottom: 22px;
}

.compare-topbar h1 {
  font-size: 34px;
  margin: 0 0 6px;
  color: #111827;
}

.compare-topbar p {
  margin: 0;
  color: #4b5563;
}

.compare-file-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.compare-file-card,
.compare-second-upload {
  position: relative;
  min-height: 540px;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

.compare-second-upload {
  border: 2px dashed #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  color: #4b5563;
}

.compare-second-upload i {
  font-size: 48px;
  color: #e5322d;
  margin-bottom: 12px;
}

.compare-second-upload h3 {
  font-size: 20px;
  margin: 0 0 6px;
  color: #111827;
}

.compare-second-upload p {
  margin: 0;
  font-size: 14px;
}

.pdf-viewer-wrap {
  height: 430px;
  background: #e5e7eb;
  overflow: auto;
  border-radius: 8px;
  padding: 14px 14px 70px;
  position: relative;
}

.pdf-canvas {
  display: block;
  background: #fff;
  margin: 0 auto;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}

.pdf-controls {
  position: sticky;
  bottom: 10px;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #3f3f46;
  color: #fff;
  padding: 9px 14px;
  border-radius: 10px;
  z-index: 10;
}

.zoom-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #52525b;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.compare-file-card h3 {
  background: #44444f;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  margin: 10px 0 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compare-action-panel {
  background: #fff;
  border-left: 1px solid #ddd;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.compare-action-panel h2 {
  font-size: 30px;
  margin: 0 0 18px;
  text-align: center;
  color: #111827;
}

.compare-help {
  background: #dff2ff;
  border: 1px solid #65bfff;
  border-radius: 7px;
  color: #1f2937;
  padding: 14px;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}

.compare-main-btn {
  margin-top: auto;
  width: 100%;
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 18px 20px;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
}

.compare-main-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.compare-progress {
  margin-top: 16px;
}

.remove-file-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 5;
}

.file-order-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #111827;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.compare-success-screen {
  min-height: calc(100vh - 70px);
  padding: 60px 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f7f7fb;
}

.compare-success-screen h1 {
  font-size: 42px;
  margin-bottom: 12px;
}

.compare-success-screen p {
  font-size: 18px;
  margin-bottom: 26px;
}

.compare-success-screen .download-result-btn {
  border: none;
  background: #e5322d;
  color: #fff;
  padding: 16px 34px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 768px) {
  .compare-start-screen {
    padding-top: 60px;
  }

  .compare-start-screen h1 {
    font-size: 38px;
  }

  .compare-upload-box {
    min-width: 260px;
    padding: 22px 34px;
  }

  .compare-preview-screen {
    grid-template-columns: 1fr;
    padding-bottom: 210px;
  }

  .compare-preview-left {
    padding: 18px;
  }

  .compare-file-grid {
    grid-template-columns: 1fr;
  }

  .compare-file-card,
  .compare-second-upload {
    min-height: 450px;
  }

  .pdf-viewer-wrap {
    height: 340px;
  }

  .compare-action-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    border-left: none;
    border-top: 1px solid #ddd;
    box-shadow: 0 -8px 24px rgba(0,0,0,.14);
  }

  .compare-action-panel h2 {
    font-size: 24px;
    text-align: left;
    margin-bottom: 8px;
  }

  .compare-help {
    display: none;
  }

  .compare-main-btn {
    font-size: 18px;
    padding: 15px;
  }
}

/* FLATTEN PDF FINAL FIX */

.flatten-file-card{
  position:relative;
  background:#fff;
  border-radius:14px;
  padding:14px;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}

.pdf-viewer-wrap{
  height:420px;
  overflow:auto;
  background:#e5e7eb;
  border-radius:10px;
  padding:14px 14px 70px;
}

.pdf-canvas{
  display:block;
  background:#fff;
  margin:0 auto;
}

.pdf-controls{
  position:sticky;
  bottom:10px;
  width:fit-content;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  background:#3f3f46;
  color:#fff;
  padding:8px 14px;
  border-radius:10px;
}

.zoom-btn{
  width:30px;
  height:30px;
  border:none;
  border-radius:50%;
  background:#52525b;
  color:#fff;
  cursor:pointer;
  font-size:18px;
}

.zoom-level{
  font-weight:700;
}

.flatten-file-card h3{
  background:#44444f;
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  margin-top:12px;
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media(max-width:768px){

  .pdf-viewer-wrap{
    height:320px;
  }

}

/* FLATTEN SUCCESS SCREEN FIX */

.flatten-success-screen{
  min-height:calc(100vh - 70px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  background:#f7f7fb;
}

.flatten-success-screen h1{
  font-size:52px;
  font-weight:800;
  color:#111827;
  margin-bottom:14px;
}

.flatten-success-screen p{
  font-size:20px;
  color:#4b5563;
  margin-bottom:30px;
}

.flatten-success-screen .download-result-btn{
  border:none;
  background:#e5322d;
  color:#fff;
  padding:18px 34px;
  border-radius:10px;
  font-size:20px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(229,50,45,.25);
}

@media(max-width:768px){

  .flatten-success-screen h1{
    font-size:38px;
  }

  .flatten-success-screen p{
    font-size:17px;
  }

  .flatten-success-screen .download-result-btn{
    width:100%;
    max-width:320px;
  }

}

/* =========================
   REPAIR PDF
========================= */

.repair-main-page{
  width:100%;
  min-height:100vh;
  background:#f4f4f4;
}

/* START SCREEN */

.repair-start-screen{
  width:100%;
  min-height:calc(100vh - 80px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:70px 20px 40px;
}

.repair-start-content{
  width:100%;
  max-width:900px;
  text-align:center;
}

.repair-start-content h1{
  font-size:60px;
  font-weight:700;
  color:#222;
  margin-bottom:20px;
}

.repair-start-content p{
  font-size:22px;
  color:#666;
  margin-bottom:40px;
}

.repair-upload-area{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap;
}

.repair-select-btn{
  background:#e5322d;
  color:#fff;
  border:none;
  height:70px;
  padding:0 50px;
  border-radius:18px;
  font-size:24px;
  font-weight:700;
  cursor:pointer;
  transition:0.2s;
}

.repair-select-btn:hover{
  background:#c62828;
}

.repair-cloud-buttons{
  display:flex;
  gap:12px;
}

.repair-cloud-buttons button{
  width:65px;
  height:65px;
  border:none;
  border-radius:16px;
  background:#fff;
  cursor:pointer;
  font-size:28px;
  box-shadow:0 2px 10px rgba(0,0,0,0.08);
}

.repair-cloud-buttons .fa-google-drive{
  color:#1ea362;
}

.repair-cloud-buttons .fa-dropbox{
  color:#0061ff;
}

.repair-drop-text{
  margin-top:22px;
  font-size:18px;
  color:#666;
}

/* PREVIEW */

.repair-preview-screen{
  width:100%;
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 340px;
  gap:20px;
  padding:20px;
}

.repair-preview-left{
  background:#fff;
  border-radius:20px;
  padding:20px;
}

.repair-preview-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.repair-preview-topbar h1{
  font-size:34px;
  margin-bottom:5px;
}

.repair-preview-topbar p{
  color:#666;
}

.repair-add-more-btn{
  width:60px;
  height:60px;
  border:none;
  border-radius:50%;
  background:#e5322d;
  color:#fff;
  font-size:24px;
  cursor:pointer;
}

.repair-preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:20px;
}

.repair-file-card{
  background:#f8f8f8;
  border-radius:20px;
  padding:15px;
  position:relative;
}

.repair-pdf-preview{
  width:100%;
  height:320px;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}

.repair-pdf-embed{
  width:100%;
  height:100%;
  border:none;
}

.repair-file-card h3{
  margin-top:15px;
  font-size:16px;
  word-break:break-word;
}

.repair-remove-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  background:#fff;
  color:#e5322d;
  font-size:24px;
  cursor:pointer;
}

.repair-file-badge{
  position:absolute;
  bottom:15px;
  right:15px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#e5322d;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

/* RIGHT PANEL */

.repair-right-panel{
  background:#fff;
  border-radius:20px;
  padding:25px;
  height:fit-content;
  position:sticky;
  top:20px;
}

.repair-right-panel h2{
  font-size:32px;
  margin-bottom:15px;
}

.repair-right-panel p{
  color:#666;
  line-height:1.7;
  margin-bottom:30px;
}

.repair-process-btn{
  width:100%;
  height:65px;
  border:none;
  border-radius:16px;
  background:#e5322d;
  color:#fff;
  font-size:22px;
  font-weight:700;
  cursor:pointer;
}

.repair-progress-wrapper{
  width:100%;
  height:32px;
  background:#eee;
  border-radius:50px;
  overflow:hidden;
  margin-top:20px;
}

.repair-progress-bar{
  width:0%;
  height:100%;
  background:#e5322d;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  transition:0.3s;
}

/* SUCCESS */

.repair-success-screen{
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.repair-success-box{
  width:100%;
  max-width:650px;
  background:#fff;
  border-radius:30px;
  padding:60px 30px;
  text-align:center;
}

.repair-success-icon{
  font-size:90px;
  color:#22c55e;
  margin-bottom:20px;
}

.repair-success-box h1{
  font-size:42px;
  margin-bottom:20px;
}

.repair-success-box p{
  font-size:20px;
  color:#666;
  margin-bottom:35px;
}

.repair-download-btn{
  background:#e5322d;
  color:#fff;
  border:none;
  height:70px;
  padding:0 45px;
  border-radius:18px;
  font-size:24px;
  font-weight:700;
  cursor:pointer;
}

/* DRAG */

.drag-active{
  transform:scale(1.02);
}

/* MOBILE */

@media(max-width:991px){

  .repair-preview-screen{
    grid-template-columns:1fr;
  }

  .repair-right-panel{
    position:relative;
    top:auto;
  }

}

@media(max-width:768px){

  .repair-start-content h1{
    font-size:42px;
  }

  .repair-start-content p{
    font-size:18px;
  }

  .repair-select-btn{
    width:100%;
    font-size:22px;
  }

  .repair-upload-area{
    flex-direction:column;
  }

  .repair-preview-topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }

  .repair-success-box h1{
    font-size:30px;
  }

}

/* =========================
   REPAIR PDF FINAL
========================= */

.repair-main-page{
  width:100%;
  min-height:calc(100vh - 72px);
  background:#f5f6fa;
}

/* START SCREEN */

.repair-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}
}

.repair-start-content{
  width:100%;
  max-width:900px;
  text-align:center;
  margin:auto;
}
}

.repair-start-content h1{
  font-size:54px;
  font-weight:900;
  color:#111827;
  margin-bottom:14px;
}

.repair-start-content p{
  max-width:700px;
  margin:0 auto 34px;
  font-size:18px;
  line-height:1.7;
  color:#64748b;
}

.repair-upload-area{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.repair-select-btn{
  height:74px;
  padding:0 46px;
  border:none;
  border-radius:18px;
  background:#ef4444;
  color:#ffffff;
  font-size:24px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 16px 35px rgba(239,68,68,0.22);
}

.repair-select-btn:hover{
  transform:translateY(-2px);
}

.repair-cloud-buttons{
  display:flex;
  gap:12px;
}

.repair-cloud-buttons button{
  width:68px;
  height:68px;
  border:none;
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 10px 28px rgba(0,0,0,0.08);
  cursor:pointer;
  font-size:28px;
}

.repair-cloud-buttons .fa-google-drive{
  color:#16a34a;
}

.repair-cloud-buttons .fa-dropbox{
  color:#2563eb;
}

.repair-drop-text{
  margin-top:18px;
  color:#6b7280;
  font-size:16px;
}

/* PREVIEW SCREEN */

.repair-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 290px;
  gap:18px;
  padding:24px 320px 24px 24px;
  position:relative;
}

.repair-preview-left{
  width:100%;
}

.repair-preview-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.repair-preview-topbar h1{
  font-size:36px;
  font-weight:900;
  color:#111827;
  margin-bottom:4px;
}

.repair-preview-topbar p{
  color:#64748b;
  font-size:15px;
}

.repair-add-more-btn{
  width:58px;
  height:58px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:#ffffff;
  font-size:22px;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(239,68,68,0.24);
}

.repair-preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:16px;
}

.repair-file-card{
  position:relative;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:14px;
  min-height:250px;
  box-shadow:0 12px 30px rgba(0,0,0,0.06);
}

.repair-pdf-preview{
  width:100%;
  height:210px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  background:#ffffff;
}

.repair-pdf-embed{
  width:100%;
  height:100%;
  border:none;
}

.repair-file-card h3{
  margin-top:12px;
  font-size:13px;
  color:#111827;
  word-break:break-word;
}

.repair-remove-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  background:#ffffff;
  color:#ef4444;
  font-size:24px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.repair-file-badge{
  position:absolute;
  bottom:12px;
  right:12px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#ef4444;
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:800;
}

/* RIGHT PANEL */

.repair-right-panel{
  width:290px;
  position:fixed;
  right:18px;
  top:92px;
  bottom:18px;
  background:#ffffff;
  border-radius:22px;
  padding:24px 20px;
  border:1px solid #e5e7eb;
  box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.repair-right-panel h2{
  font-size:28px;
  color:#111827;
  margin-bottom:12px;
}

.repair-right-panel p{
  color:#64748b;
  font-size:15px;
  line-height:1.7;
  margin-bottom:24px;
}

.repair-process-btn{
  width:100%;
  padding:16px 18px;
  border:none;
  border-radius:16px;
  background:#ef4444;
  color:#ffffff;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
}

.repair-progress-wrapper{
  width:100%;
  height:26px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
  margin-top:18px;
}

.repair-progress-bar{
  width:0%;
  height:100%;
  background:#ef4444;
  color:#ffffff;
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.3s;
}

/* SUCCESS */

.repair-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.repair-success-box{
  width:100%;
  max-width:620px;
  background:#ffffff;
  border-radius:28px;
  padding:60px 30px;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,0.08);
}

.repair-success-icon{
  font-size:84px;
  color:#22c55e;
  margin-bottom:20px;
}

.repair-success-box h1{
  font-size:42px;
  color:#111827;
  margin-bottom:12px;
}

.repair-success-box p{
  color:#64748b;
  font-size:18px;
  margin-bottom:32px;
}

.repair-download-btn{
  height:66px;
  padding:0 40px;
  border:none;
  border-radius:16px;
  background:#ef4444;
  color:#ffffff;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
}

/* DRAG */

.drag-active{
  transform:scale(1.01);
}

/* MOBILE */

@media(max-width:980px){

  .repair-preview-screen{
    grid-template-columns:1fr;
    padding:16px 16px 140px;
  }

  .repair-right-panel{
    width:100%;
    left:0;
    right:0;
    top:auto;
    bottom:0;
    border-radius:20px 20px 0 0;
    position:fixed;
  }

  .repair-preview-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:768px){

  .repair-start-screen{
    padding:40px 16px 30px;
  }

  .repair-start-content h1{
    font-size:38px;
  }

  .repair-start-content p{
    font-size:15px;
  }

  .repair-select-btn{
    width:100%;
    font-size:20px;
    height:68px;
  }

  .repair-upload-area{
    flex-direction:column;
  }

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

  .repair-file-card{
    min-height:210px;
  }

  .repair-pdf-preview{
    height:150px;
  }

  .repair-preview-topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .repair-success-box h1{
    font-size:30px;
  }

  .repair-success-box p{
    font-size:15px;
  }

}

/* =========================
   PDF TO IMAGE
========================= */

.pdf-image-page{
  min-height:calc(100vh - 72px);
  background:#f5f6fa;
}

/* START */

.pdf-image-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}

.pdf-image-start-content{
  width:100%;
  max-width:900px;
  text-align:center;
}

.pdf-image-start-content h1{
  font-size:54px;
  font-weight:900;
  color:#111827;
  margin-bottom:14px;
}

.pdf-image-start-content p{
  max-width:700px;
  margin:0 auto 34px;
  font-size:18px;
  line-height:1.7;
  color:#64748b;
}

.pdf-image-upload-area{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.pdf-image-select-btn{
  height:74px;
  padding:0 46px;
  border:none;
  border-radius:18px;
  background:#ef4444;
  color:#ffffff;
  font-size:24px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 16px 35px rgba(239,68,68,0.22);
}

.pdf-image-drop-text{
  margin-top:18px;
  color:#6b7280;
  font-size:16px;
}

/* PREVIEW */

.pdf-image-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 290px;
  gap:18px;
  padding:24px 320px 24px 24px;
}

.pdf-image-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.pdf-image-topbar h1{
  font-size:36px;
  font-weight:900;
  color:#111827;
}

.pdf-image-topbar p{
  color:#64748b;
}

.pdf-image-add-btn{
  width:58px;
  height:58px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:#ffffff;
  font-size:22px;
  cursor:pointer;
}

.pdf-image-file-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:16px;
}

.pdf-image-file-card{
  position:relative;
  background:#ffffff;
  border-radius:20px;
  padding:18px;
  min-height:240px;
  border:1px solid #e5e7eb;
  box-shadow:0 12px 30px rgba(0,0,0,0.06);
}

.pdf-image-icon{
  width:100%;
  height:170px;
  border-radius:16px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
}

.pdf-image-icon i{
  font-size:74px;
  color:#ef4444;
}

.pdf-image-file-card h3{
  margin-top:14px;
  font-size:14px;
  color:#111827;
  word-break:break-word;
}

.remove-file-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  background:#ffffff;
  color:#ef4444;
  font-size:24px;
  cursor:pointer;
}

.file-order-badge{
  position:absolute;
  bottom:12px;
  right:12px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#ef4444;
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:800;
}

/* RIGHT PANEL */

.pdf-image-action-panel{
  width:290px;
  position:fixed;
  right:18px;
  top:92px;
  bottom:18px;
  background:#ffffff;
  border-radius:22px;
  padding:24px 20px;
  border:1px solid #e5e7eb;
  box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.pdf-image-action-panel h2{
  font-size:28px;
  color:#111827;
  margin-bottom:12px;
}

.pdf-image-action-panel p{
  color:#64748b;
  line-height:1.7;
  margin-bottom:24px;
}

.pdf-image-main-btn{
  width:100%;
  padding:16px 18px;
  border:none;
  border-radius:16px;
  background:#ef4444;
  color:#ffffff;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
}

/* SUCCESS */

.pdf-image-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.pdf-image-success-box{
  width:100%;
  max-width:620px;
  background:#ffffff;
  border-radius:28px;
  padding:60px 30px;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,0.08);
}

.pdf-image-success-icon{
  font-size:84px;
  color:#22c55e;
  margin-bottom:20px;
}

.pdf-image-success-box h1{
  font-size:42px;
  color:#111827;
  margin-bottom:12px;
}

.pdf-image-success-box p{
  color:#64748b;
  font-size:18px;
  margin-bottom:32px;
}

.pdf-image-download-btn{
  height:66px;
  padding:0 40px;
  border:none;
  border-radius:16px;
  background:#ef4444;
  color:#ffffff;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
}

@media(max-width:980px){

  .pdf-image-preview-screen{
    grid-template-columns:1fr;
    padding:16px 16px 140px;
  }

  .pdf-image-action-panel{
    width:100%;
    left:0;
    right:0;
    top:auto;
    bottom:0;
    border-radius:20px 20px 0 0;
  }

}

@media(max-width:768px){

  .pdf-image-start-content h1{
    font-size:38px;
  }

  .pdf-image-start-content p{
    font-size:15px;
  }

  .pdf-image-select-btn{
    width:100%;
    font-size:20px;
    height:68px;
  }

  .pdf-image-upload-area{
    flex-direction:column;
  }

  .pdf-image-file-grid{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .pdf-image-file-card{
    min-height:210px;
  }

  .pdf-image-icon{
    height:140px;
  }

}

/* PDF TO IMAGE FINAL FIX */

.pdf-image-page{
  min-height:calc(100vh - 72px);
  background:#f5f6fa;
  overflow-x:hidden;
}

.pdf-image-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}

.pdf-image-start-content{
  width:100%;
  max-width:900px;
  text-align:center;
  margin:auto;
}

.pdf-image-start-content h1{
  font-size:54px;
  font-weight:900;
  color:#111827;
  margin-bottom:14px;
}

.pdf-image-start-content p{
  max-width:700px;
  margin:0 auto 34px;
  font-size:18px;
  color:#64748b;
}

.pdf-image-upload-area{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.pdf-image-select-btn{
  height:74px;
  padding:0 46px;
  border:none;
  border-radius:18px;
  background:#ef4444;
  color:#fff;
  font-size:24px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 16px 35px rgba(239,68,68,.22);
}

.cloud-buttons{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
}

.cloud-buttons button{
  width:68px;
  height:68px;
  border:none;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.pdf-image-drop-text{
  margin-top:18px;
  color:#6b7280;
  font-size:16px;
}

.pdf-image-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 290px;
  gap:18px;
  padding:24px 320px 24px 24px;
}

.pdf-image-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.pdf-image-topbar h1{
  font-size:36px;
  font-weight:900;
  color:#111827;
}

.pdf-image-topbar p{
  color:#64748b;
}

.pdf-image-add-btn{
  width:58px;
  height:58px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

.pdf-image-file-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:16px;
}

.pdf-image-file-card{
  position:relative;
  background:#fff;
  border-radius:20px;
  padding:18px;
  min-height:260px;
  border:1px solid #e5e7eb;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}

.pdf-image-pdf-preview{
  width:100%;
  height:190px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  background:#fff;
}

.pdf-image-pdf-embed{
  width:100%;
  height:100%;
  border:none;
}

.pdf-image-file-card h3{
  margin-top:14px;
  font-size:14px;
  color:#111827;
  word-break:break-word;
}

.remove-file-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:#fff;
  font-size:22px;
  cursor:pointer;
  z-index:2;
}

.file-order-badge{
  position:absolute;
  bottom:12px;
  left:12px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#111827;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}

.pdf-image-action-panel{
  width:290px;
  position:fixed;
  right:18px;
  top:136px;
  bottom:18px;
  background:#fff;
  border-radius:22px;
  padding:30px 20px;
  border:1px solid #e5e7eb;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.pdf-image-action-panel h2{
  font-size:28px;
  color:#111827;
  margin-bottom:16px;
}

.pdf-image-action-panel p{
  color:#64748b;
  line-height:1.7;
  margin-bottom:26px;
}

.pdf-image-main-btn{
  width:100%;
  padding:16px 18px;
  border:none;
  border-radius:16px;
  background:#ef4444;
  color:#fff;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
}

.pdf-image-progress{
  width:100%;
  height:26px;
  margin-top:16px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
}

.pdf-image-progress-bar{
  width:0%;
  height:100%;
  background:#ef4444;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  transition:.3s;
}

.pdf-image-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.pdf-image-success-box{
  width:100%;
  max-width:620px;
  background:#fff;
  border-radius:28px;
  padding:60px 30px;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.08);
}

.pdf-image-success-icon{
  width:86px;
  height:86px;
  border-radius:50%;
  background:#22c55e;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  margin:0 auto 26px;
}

.pdf-image-success-box h1{
  font-size:42px;
  color:#111827;
  margin-bottom:12px;
}

.pdf-image-success-box p{
  color:#64748b;
  font-size:18px;
  margin-bottom:32px;
}

.pdf-image-download-btn{
  height:66px;
  padding:0 40px;
  border:none;
  border-radius:16px;
  background:#ef4444;
  color:#fff;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
}

@media(max-width:980px){
  .pdf-image-preview-screen{
    grid-template-columns:1fr;
    padding:16px 16px 150px;
  }

  .pdf-image-action-panel{
    width:100%;
    left:0;
    right:0;
    top:auto;
    bottom:0;
    border-radius:20px 20px 0 0;
    position:fixed;
  }
}

@media(max-width:768px){
  .pdf-image-start-content h1{font-size:38px}
  .pdf-image-start-content p{font-size:15px}
  .pdf-image-select-btn{width:100%;font-size:20px;height:68px}
  .pdf-image-upload-area{flex-direction:column}
  .cloud-buttons button{width:62px;height:62px}
  .pdf-image-file-grid{grid-template-columns:1fr 1fr;gap:12px}
  .pdf-image-pdf-preview{height:145px}
  .pdf-image-file-card{min-height:215px;padding:12px}
}

.hidden-screen{
  display:none !important;
}

#previewScreen.active-screen{
  display:grid !important;
}

#successScreen.active-screen{
  display:flex !important;
}

.pdfa-page{
  min-height:calc(100vh - 72px);
  background:#f5f6fa;
  overflow-x:hidden;
}

.pdfa-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}

.pdfa-start-content{
  width:100%;
  max-width:900px;
  text-align:center;
}

.pdfa-start-content h1{
  font-size:64px;
  font-weight:900;
  color:#111827;
  margin-bottom:20px;
}

.pdfa-start-content p{
  font-size:20px;
  color:#64748b;
  margin-bottom:35px;
}

.pdfa-upload-area{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.pdfa-select-btn{
    width:100%;
    max-width:330px;
    height:72px;
    border:none;
    border-radius:18px;
    background:#ef4444;
    color:#fff;
    font-size:22px;
    font-weight:700;
    cursor:pointer;
    transition:.25s ease;
    box-shadow:0 10px 25px rgba(239,68,68,.20);
}

.pdfa-select-btn:hover{
    background:#dc2626;
    transform:translateY(-2px);
}

.cloud-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin-top:18px;
}

.cloud-buttons button{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#ef4444;
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 18px rgba(239,68,68,.25);
    transition:.25s ease;
}

.cloud-buttons button:hover{
    transform:translateY(-2px);
    background:#dc2626;
}

.cloud-buttons button i{
    font-size:18px;
    color:#fff;
}

.pdfa-drop-text{
  margin-top:18px;
  color:#64748b;
  font-size:17px;
}

.pdfa-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  gap:22px;
  padding:24px 350px 24px 24px;
}

.pdfa-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.pdfa-topbar h1{
  font-size:40px;
  font-weight:900;
  color:#111827;
}

.pdfa-add-btn{
  width:66px;
  height:66px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}

.pdfa-file-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:18px;
}

.pdfa-file-card{
  position:relative;
  background:#fff;
  border-radius:22px;
  padding:16px;
  border:1px solid #e5e7eb;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}

.pdfa-pdf-preview{
  width:100%;
  height:300px;
  overflow:hidden;
  border-radius:18px;
  border:1px solid #e5e7eb;
}

.pdfa-pdf-embed{
  width:100%;
  height:100%;
  border:none;
}

.remove-file-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

.file-order-badge{
  position:absolute;
  left:10px;
  bottom:10px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#111827;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.pdfa-file-card h3{
  margin-top:14px;
  font-size:15px;
  word-break:break-word;
}

.pdfa-action-panel{
  width:310px;
  position:fixed;
  right:18px;
  top:120px;
  bottom:18px;
  background:#fff;
  border-radius:24px;
  padding:28px 20px;
  border:1px solid #e5e7eb;
}

.pdfa-action-panel h2{
  font-size:38px;
  margin-bottom:20px;
}

.pdfa-action-panel p{
  color:#64748b;
  line-height:1.8;
  margin-bottom:24px;
}

.pdfa-main-btn{
  width:100%;
  height:66px;
  border:none;
  border-radius:18px;
  background:#ef4444;
  color:#fff;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
}

.pdfa-progress{
  width:100%;
  height:24px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
  margin-top:18px;
}

.pdfa-progress-bar{
  width:0%;
  height:100%;
  background:#2563eb;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
}

.pdfa-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.pdfa-success-box{
  width:100%;
  max-width:700px;
  background:#fff;
  border-radius:28px;
  padding:60px 30px;
  text-align:center;
  box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.pdfa-success-icon{
  width:90px;
  height:90px;
  border-radius:50%;
  background:#22c55e;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  margin:0 auto 26px;
}

.pdfa-success-box h1{
  font-size:52px;
  margin-bottom:14px;
}

.pdfa-success-box p{
  font-size:20px;
  color:#64748b;
  margin-bottom:30px;
}

.pdfa-download-btn{
  height:70px;
  padding:0 40px;
  border:none;
  border-radius:18px;
  background:#ef4444;
  color:#fff;
  font-size:24px;
  font-weight:800;
  cursor:pointer;
}

/* =========================
   SCAN TO PDF TOOL
========================= */

.scan-page{
  min-height:calc(100vh - 72px);
  background:#f5f6fa;
  overflow-x:hidden;
}

.scan-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}

.scan-start-content{
  width:100%;
  max-width:900px;
  text-align:center;
}

.scan-start-content h1{
  font-size:64px;
  font-weight:900;
  color:#111827;
  margin-bottom:20px;
}

.scan-start-content p{
  font-size:20px;
  color:#64748b;
  margin-bottom:35px;
}

.scan-upload-area{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.scan-select-btn{
  height:74px;
  padding:0 44px;
  border:none;
  border-radius:18px;
  background:#ef4444;
  color:#fff;
  font-size:24px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 15px 35px rgba(239,68,68,.25);
}

.scan-drop-text{
  margin-top:18px;
  color:#64748b;
  font-size:17px;
}

.scan-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  gap:22px;
  padding:24px 350px 24px 24px;
}

.scan-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.scan-topbar h1{
  font-size:40px;
  font-weight:900;
  color:#111827;
}

.scan-topbar p{
  color:#64748b;
}

.scan-add-btn{
  width:66px;
  height:66px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}

.scan-file-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
}

.scan-file-card{
  position:relative;
  background:#fff;
  border-radius:22px;
  padding:16px;
  border:1px solid #e5e7eb;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}

.scan-image-preview{
  width:100%;
  height:260px;
  overflow:hidden;
  border-radius:18px;
  border:1px solid #e5e7eb;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.scan-image-preview img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.scan-file-card h3{
  margin-top:14px;
  font-size:15px;
  word-break:break-word;
  color:#111827;
}

.scan-action-panel{
  width:310px;
  position:fixed;
  right:18px;
  top:120px;
  bottom:18px;
  background:#fff;
  border-radius:24px;
  padding:28px 20px;
  border:1px solid #e5e7eb;
}

.scan-action-panel h2{
  font-size:38px;
  margin-bottom:20px;
  color:#111827;
}

.scan-action-panel p{
  color:#64748b;
  line-height:1.8;
  margin-bottom:24px;
}

.scan-main-btn{
  width:100%;
  height:66px;
  border:none;
  border-radius:18px;
  background:#ef4444;
  color:#fff;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
}

.scan-progress{
  width:100%;
  height:24px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
  margin-top:18px;
}

.scan-progress-bar{
  width:0%;
  height:100%;
  background:#ef4444;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
}

.scan-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.scan-success-box{
  width:100%;
  max-width:700px;
  background:#fff;
  border-radius:28px;
  padding:60px 30px;
  text-align:center;
  box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.scan-success-icon{
  width:90px;
  height:90px;
  border-radius:50%;
  background:#22c55e;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  margin:0 auto 26px;
}

.scan-success-box h1{
  font-size:52px;
  margin-bottom:14px;
  color:#111827;
}

.scan-success-box p{
  font-size:20px;
  color:#64748b;
  margin-bottom:30px;
}

.scan-download-btn{
  height:70px;
  padding:0 40px;
  border:none;
  border-radius:18px;
  background:#ef4444;
  color:#fff;
  font-size:24px;
  font-weight:800;
  cursor:pointer;
}

/* ===== Scan Start Cards ===== */

.scan-select-row{
  display:flex;
  gap:30px;
  justify-content:center;
  align-items:stretch;
  margin-top:30px;
  flex-wrap:wrap;
}

.scan-card{
  background:#fff;
  width:420px;
  min-height:430px;
  border-radius:24px;
  padding:35px;
  box-shadow:0 15px 40px rgba(0,0,0,.08);

  display:flex;
  flex-direction:column;
  align-items:center;
}

.scan-card h2{
  font-size:36px;
  font-weight:800;
  margin-bottom:16px;
}

.scan-card p{
  color:#64748b;
  text-align:center;
  line-height:1.6;
}

#qrContainer{
  width:220px;
  height:220px;
  margin:25px 0;
  border:2px dashed #d1d5db;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
}

#scannerStatus{
  margin-top:auto;
  font-weight:700;
  color:#475569;
}

.scan-card .scan-select-btn{
  width:100%;
  margin-top:20px;
}

.scan-card .cloud-buttons{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-top:22px;
  flex-wrap:nowrap;
}

.scan-card .cloud-buttons button{
  width:52px;
  height:52px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:20px;
  transition:.25s;
}

.scan-card .cloud-buttons button:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 20px rgba(239,68,68,.25);
}

.scan-card .scan-drop-text{
  margin-top:20px;
  text-align:center;
  color:#64748b;
  font-size:15px;
}

@media(max-width:900px){

  .scan-select-row{
    flex-direction:column;
    align-items:center;
  }

  .scan-card{
    width:100%;
    max-width:500px;
  }

}

@media(max-width:980px){
  .scan-preview-screen{
    grid-template-columns:1fr;
    padding:16px 16px 150px;
  }

  .scan-action-panel{
    width:100%;
    left:0;
    right:0;
    top:auto;
    bottom:0;
    border-radius:20px 20px 0 0;
    position:fixed;
  }
}

@media(max-width:768px){
  .scan-start-content h1{font-size:38px}
  .scan-start-content p{font-size:15px}
  .scan-select-btn{width:100%;font-size:20px;height:68px}
  .scan-upload-area{flex-direction:column}
  .scan-file-grid{grid-template-columns:1fr 1fr;gap:12px}
  .scan-image-preview{height:150px}
  .scan-file-card{padding:12px}
  .scan-success-box h1{font-size:30px}
}

/* ===========================
   SCAN TO PDF RESTORE PATCH 1
=========================== */

.scan-upload-box{
  width:100%;
  max-width:360px;
  margin:0 auto;
  text-align:center;
}

.cloud-buttons{
  display:flex;
  justify-content:center;
  gap:14px;
  margin:22px 0;
}

.cloud-buttons button{
  width:52px;
  height:52px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:#fff;
  cursor:pointer;
  font-size:18px;
  box-shadow:0 8px 20px rgba(239,68,68,.25);
}

.cloud-buttons button:hover{
  transform:translateY(-2px);
}

.scan-drop-text{
  margin-top:18px;
  color:#64748b;
  font-size:18px;
}
.crop-box{
  touch-action:none;
}

.crop-handle{
  position:absolute;
  width:22px;
  height:22px;
  background:#ef4444;
  border:3px solid #fff;
  border-radius:50%;
}

.crop-handle.tl{
  top:-12px;
  left:-12px;
}

.crop-handle.tr{
  top:-12px;
  right:-12px;
}

.crop-handle.bl{
  bottom:-12px;
  left:-12px;
}

.crop-handle.br{
  bottom:-12px;
  right:-12px;
}

/* CATEGORY FILTER CENTER FIX */

.category-filter-nav{
  max-width:1200px;
  margin:30px auto 40px !important;
  padding:0 20px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:14px !important;
}

.category-filter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:13px 22px;
  border-radius:999px;
  background:#ffffff;
  color:#111827;
  font-weight:800;
  border:1px solid #e5e7eb;
  box-shadow:0 8px 25px rgba(0,0,0,0.07);
  cursor:pointer;
  transition:0.25s ease;
}

.category-filter:hover,
.category-filter.active{
  background:#ef4444;
  color:#ffffff;
  border-color:#ef4444;
}

@media(max-width:768px){
  .category-filter-nav{
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scrollbar-width:none;
  }

  .category-filter-nav::-webkit-scrollbar{
    display:none;
  }

  .category-filter{
    flex:0 0 auto;
    font-size:14px;
    padding:12px 18px;
  }
}

/* FINAL HOMEPAGE CATEGORY FILTER FIX */

.category-filter-nav{
  width:100%;
  max-width:1100px;
  margin:30px auto 40px !important;
  padding:0 20px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:14px !important;
  overflow:visible !important;
}

.category-filter{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  padding:13px 22px !important;
  border-radius:999px !important;
  background:#ffffff !important;
  color:#111827 !important;
  font-weight:800 !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 8px 25px rgba(0,0,0,0.07) !important;
  cursor:pointer !important;
  white-space:nowrap !important;
}

.category-filter.active{
  background:#ef4444 !important;
  color:#ffffff !important;
  border-color:#ef4444 !important;
}

@media(max-width:768px){
  .category-filter-nav{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    max-width:100% !important;
    margin:28px auto 34px !important;
    padding:0 18px !important;
    overflow:visible !important;
  }

  .category-filter{
    width:100% !important;
    min-height:54px !important;
    padding:12px 10px !important;
    font-size:15px !important;
  }
}

/* FINAL CATEGORY SIZE + FILTER */

.category-filter-nav{
  max-width:1100px;
  margin:35px auto 45px !important;
  padding:0 24px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:14px !important;
}

.category-filter{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  padding:13px 22px !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#111827 !important;
  font-size:16px !important;
  font-weight:800 !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 8px 25px rgba(0,0,0,.07) !important;
  cursor:pointer !important;
}

.category-filter.active{
  background:#ef4444 !important;
  color:#fff !important;
  border-color:#ef4444 !important;
}

@media(max-width:768px){
  .category-filter-nav{
    flex-direction:column !important;
    gap:18px !important;
    padding:0 30px !important;
    margin:70px auto 55px !important;
  }

  .category-filter{
    width:100% !important;
    min-height:74px !important;
    font-size:19px !important;
    padding:0 20px !important;
  }
}

/* FINAL MOBILE CATEGORY SLIM EDGE TO EDGE */

@media(max-width:768px){
  .category-filter-nav,
  .category-nav{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    padding:0 24px !important;
    margin:60px auto 45px !important;
  }

  .category-filter-nav button,
  .category-filter-nav a,
  .category-nav button,
  .category-nav a{
    width:100% !important;
    min-height:58px !important;
    padding:0 18px !important;
    border-radius:999px !important;
    font-size:20px !important;
    font-weight:800 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    background:#fff !important;
    color:#111827 !important;
    border:1px solid #e5e7eb !important;
    box-shadow:0 8px 22px rgba(0,0,0,.06) !important;
    text-decoration:none !important;
  }

  .category-filter.active{
    background:#ef4444 !important;
    color:#fff !important;
    border-color:#ef4444 !important;
  }
}

/* HEADER DROPDOWN NAV */

.desktop-nav{
  display:flex;
  align-items:center;
  gap:28px;
}

.nav-dropdown{
  position:relative;
}

.nav-dropdown button{
  background:none;
  border:none;
  color:#111827;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  padding:10px 0;
}

.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:240px;
  background:#fff;
  border-radius:18px;
  padding:12px 0;
  box-shadow:0 20px 50px rgba(0,0,0,.12);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:.25s ease;
  z-index:9999;
}

.dropdown-menu a{
  display:block;
  padding:13px 20px;
  color:#111827;
  text-decoration:none;
  font-weight:600;
  transition:.2s;
}

.dropdown-menu a:hover{
  background:#f3f4f6;
  color:#ef4444;
}

.nav-dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

@media(max-width:768px){
  .desktop-nav{
    display:none !important;
  }
}

/* HEADER DROPDOWN ICONS */

.dropdown-menu a{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

.menu-icon{
  width:22px;
  height:22px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12px;
  flex:0 0 22px;
}

.menu-icon.red{background:#ef4444}
.menu-icon.orange{background:#f97316}
.menu-icon.green{background:#22c55e}
.menu-icon.blue{background:#3b82f6}
.menu-icon.purple{background:#a855f7}
.menu-icon.sky{background:#0ea5e9}
.menu-icon.teal{background:#14b8a6}
.menu-icon.pink{background:#ec4899}

/* =========================
   OCR PDF TOOL
========================= */

.ocr-page{
  min-height:calc(100vh - 72px);
  background:#f5f6fa;
  overflow-x:hidden;
}

.ocr-start-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}

.ocr-start-content{
  width:100%;
  max-width:900px;
  text-align:center;
}

.ocr-start-content h1{
  font-size:64px;
  font-weight:900;
  color:#111827;
  margin-bottom:20px;
}

.ocr-start-content p{
  font-size:20px;
  color:#64748b;
  margin-bottom:35px;
}

.ocr-upload-area{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.ocr-select-btn{
  height:74px;
  padding:0 44px;
  border:none;
  border-radius:18px;
  background:#ef4444;
  color:#fff;
  font-size:24px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 15px 35px rgba(239,68,68,.25);
}

.ocr-drop-text{
  margin-top:18px;
  color:#64748b;
  font-size:17px;
}

.ocr-preview-screen{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1fr 320px;
  gap:22px;
  padding:24px 350px 24px 24px;
}

.ocr-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.ocr-topbar h1{
  font-size:40px;
  font-weight:900;
  color:#111827;
}

.ocr-topbar p{
  color:#64748b;
}

.ocr-add-btn{
  width:66px;
  height:66px;
  border:none;
  border-radius:50%;
  background:#ef4444;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}

.ocr-file-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
}

.ocr-file-card{
  position:relative;
  background:#fff;
  border-radius:22px;
  padding:16px;
  border:1px solid #e5e7eb;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}

.ocr-file-preview{
  width:100%;
  height:260px;
  overflow:hidden;
  border-radius:18px;
  border:1px solid #e5e7eb;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ocr-file-preview img,
.ocr-pdf-embed{
  width:100%;
  height:100%;
  border:none;
  object-fit:contain;
}

.ocr-file-card h3{
  margin-top:14px;
  font-size:15px;
  word-break:break-word;
  color:#111827;
}

.ocr-action-panel{
  width:310px;
  position:fixed;
  right:18px;
  top:120px;
  bottom:18px;
  background:#fff;
  border-radius:24px;
  padding:28px 20px;
  border:1px solid #e5e7eb;
}

.ocr-action-panel h2{
  font-size:38px;
  margin-bottom:20px;
  color:#111827;
}

.ocr-action-panel p{
  color:#64748b;
  line-height:1.8;
  margin-bottom:24px;
}

.ocr-label{
  display:block;
  font-weight:900;
  margin-bottom:10px;
  color:#111827;
}

.ocr-select{
  width:100%;
  height:54px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:0 14px;
  margin-bottom:20px;
  font-size:16px;
}

.ocr-main-btn{
  width:100%;
  height:66px;
  border:none;
  border-radius:18px;
  background:#ef4444;
  color:#fff;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
}

.ocr-progress{
  width:100%;
  height:24px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
  margin-top:18px;
}

.ocr-progress-bar{
  width:0%;
  height:100%;
  background:#ef4444;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
}

.ocr-success-screen{
  min-height:calc(100vh - 72px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.ocr-success-box{
  width:100%;
  max-width:700px;
  background:#fff;
  border-radius:28px;
  padding:60px 30px;
  text-align:center;
  box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.ocr-success-icon{
  width:90px;
  height:90px;
  border-radius:50%;
  background:#22c55e;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  margin:0 auto 26px;
}

.ocr-success-box h1{
  font-size:52px;
  margin-bottom:14px;
  color:#111827;
}

.ocr-success-box p{
  font-size:20px;
  color:#64748b;
  margin-bottom:30px;
}

.ocr-download-btn{
  height:70px;
  padding:0 40px;
  border:none;
  border-radius:18px;
  background:#ef4444;
  color:#fff;
  font-size:24px;
  font-weight:800;
  cursor:pointer;
}

@media(max-width:980px){
  .ocr-preview-screen{
    grid-template-columns:1fr;
    padding:16px 16px 170px;
  }

  .ocr-action-panel{
    width:100%;
    left:0;
    right:0;
    top:auto;
    bottom:0;
    border-radius:20px 20px 0 0;
    position:fixed;
  }
}

@media(max-width:768px){
  .ocr-start-content h1{font-size:38px}
  .ocr-start-content p{font-size:15px}
  .ocr-select-btn{width:100%;font-size:20px;height:68px}
  .ocr-upload-area{flex-direction:column}
  .ocr-file-grid{grid-template-columns:1fr 1fr;gap:12px}
  .ocr-file-preview{height:150px}
  .ocr-file-card{padding:12px}
  .ocr-success-box h1{font-size:30px}
}

.sign-start-screen,
.sign-success-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 18px;
  background: #f8fafc;
}

.tool-start-card,
.success-card {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  padding: 44px 30px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.tool-start-card h1,
.success-card h1 {
  font-size: 42px;
  margin-bottom: 12px;
  color: #111827;
}

.tool-start-card p,
.success-card p {
  color: #6b7280;
  font-size: 17px;
  margin-bottom: 26px;
}

.main-red-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #fff;
  border: none;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: 0.2s ease;
}

.main-red-btn:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.small-light-btn {
  min-height: 42px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  border-radius: 12px;
  padding: 0 18px;
  font-weight: 700;
  cursor: pointer;
}

.cloud-buttons{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-left:12px;
}

.cloud-buttons button{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#ef4444;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(239,68,68,.25);
    transition:.25s;
}

.cloud-buttons button:hover{
    background:#dc2626;
    transform:translateY(-2px);
}

.cloud-buttons button i{
    font-size:18px;
    color:#ffffff;
}

.sign-preview-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  background: #f1f5f9;
}

.sign-preview-area {
  padding: 34px;
  overflow: auto;
}

.pdf-canvas-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.sign-page-box {
  position: relative;
  background: #fff;
  box-shadow: 0 15px 45px rgba(15, 23, 42, 0.16);
  border-radius: 4px;
  overflow: hidden;
}

.sign-page-box canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.sign-side-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  background: #ffffff;
  border-left: 1px solid #e5e7eb;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sign-side-panel h2 {
  font-size: 30px;
  color: #111827;
  margin: 0;
}

.sign-side-panel p {
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}

.signature-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sig-tab {
  height: 40px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

.sig-tab.active {
  background: #fee2e2;
  border-color: #ef4444;
  color: #dc2626;
}

.signature-box {
  border: 1px dashed #d1d5db;
  border-radius: 16px;
  padding: 12px;
  background: #f9fafb;
}

#drawCanvas {
  width: 100%;
  height: 140px;
  background: #fff;
  border-radius: 12px;
  cursor: crosshair;
  border: 1px solid #e5e7eb;
}

#textSignature {
  width: 100%;
  height: 48px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 18px;
}

.signature-placement {
  position: absolute;
  z-index: 20;
  border: 2px dashed #ef4444;
  background: rgba(255, 255, 255, 0.35);
  cursor: move;
  resize: both;
  overflow: hidden;
  min-width: 90px;
  min-height: 38px;
}

.signature-placement img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.sig-remove {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  border: none;
  background: #ef4444;
  color: #fff;
  border-radius: 0 0 0 8px;
  font-size: 18px;
  cursor: pointer;
}

.progress-wrap {
  width: 100%;
  height: 9px;
  background: #fee2e2;
  border-radius: 999px;
  overflow: hidden;
}

#progressBar {
  height: 100%;
  width: 0%;
  background: #ef4444;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.hidden-screen {
  display: none !important;
}

@media (max-width: 900px) {
  .sign-preview-screen {
    display: block;
    padding-bottom: 300px;
  }

  .sign-preview-area {
    padding: 20px 10px;
  }

  .pdf-canvas-wrap {
    align-items: flex-start;
    overflow-x: auto;
  }

  .sign-side-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    max-height: 300px;
    overflow: auto;
    border-left: none;
    border-top: 1px solid #e5e7eb;
    padding: 18px;
    z-index: 100;
  }

  .sign-side-panel h2 {
    font-size: 24px;
  }

  .tool-start-card h1,
  .success-card h1 {
    font-size: 32px;
  }
}

#headerContainer {
  position: relative;
  z-index: 99999;
}

.mobile-header {
  display: none;
}

.desktop-header {
  height: 72px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 30px;
  position: sticky;
  top: 0;
  z-index: 9999;
}

.logo,
.mobile-logo {
  font-size: 26px;
  font-weight: 900;
  color: #ef4444;
  text-decoration: none;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 1 auto;
  margin: 0 auto;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown > button {
  border: none;
  background: transparent;
  color: #111827;
  font-weight: 800;
  font-size: 15px;
  padding: 24px 13px;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 64px;
  left: 0;
  width: 260px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.14);
  padding: 10px;
  display: none;
  z-index: 99999;
}

.nav-dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 10px;
  color: #334155;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
}

.dropdown-menu a:hover {
  background: #f8fafc;
  color: #111827;
}

.menu-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
}

.menu-icon.red { background: #fee2e2; color: #ef4444; }
.menu-icon.orange { background: #ffedd5; color: #f97316; }
.menu-icon.green { background: #dcfce7; color: #22c55e; }
.menu-icon.blue { background: #dbeafe; color: #2563eb; }
.menu-icon.purple { background: #f3e8ff; color: #9333ea; }
.menu-icon.sky { background: #e0f2fe; color: #0284c7; }
.menu-icon.teal { background: #ccfbf1; color: #0f766e; }
.menu-icon.pink { background: #fce7f3; color: #db2777; }

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

.login-btn,
.signup-btn {
  text-decoration: none;
  font-weight: 800;
  border-radius: 999px;
  padding: 10px 18px;
}

.login-btn {
  color: #111827;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.signup-btn {
  color: #ffffff;
  background: #ef4444;
  border: 1px solid #ef4444;
}

.tools-drawer,
.main-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 340px;
  max-width: 88vw;
  background: #ffffff;
  z-index: 100001;
  padding: 24px;
  overflow-y: auto;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
  transition: 0.25s ease;
}

.tools-drawer {
  left: -380px;
}

.main-drawer {
  right: -380px;
}

.tools-drawer.active {
  left: 0;
}

.main-drawer.active {
  right: 0;
}

.drawer-close {
  width: 38px;
  height: 38px;
  border: none;
  background: #f1f5f9;
  color: #111827;
  border-radius: 50%;
  font-size: 26px;
  cursor: pointer;
  margin-bottom: 18px;
}

.drawer-category {
  margin-bottom: 24px;
}

.drawer-category h4,
.drawer-section h4 {
  color: #94a3b8;
  font-size: 12px;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}

.drawer-category a,
.main-drawer a {
  display: block;
  padding: 11px 8px;
  color: #111827;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 700;
}

.drawer-category a:hover,
.main-drawer a:hover {
  background: #f8fafc;
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 100000;
  display: none;
}

.drawer-overlay.active {
  display: block;
}

.drawer-bottom {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}

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

  .mobile-header {
    height: 64px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 9999;
  }

  .mobile-menu-btn,
  .mobile-grid-btn {
    width: 42px;
    height: 42px;
    border: none;
    background: #f8fafc;
    color: #111827;
    border-radius: 12px;
    font-size: 23px;
    cursor: pointer;
  }

  .mobile-logo {
    font-size: 24px;
  }
}

/* ================================
   FILL & SIGN PDF TOOL
================================ */

.fill-start-screen {
  min-height: calc(100vh - 72px);
  background: #f7f8fc;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
}

.fill-hero-box {
  width: 100%;
  max-width: 920px;
  text-align: center;
}

.fill-hero-box h1 {
  font-size: 44px;
  color: #071733;
  margin: 0 0 16px;
  font-weight: 900;
}

.fill-hero-box p {
  font-size: 24px;
  color: #475569;
  margin: 0 0 34px;
}

.fill-upload-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.fill-big-upload-btn {
  width: 330px;
  height: 96px;
  border: none;
  border-radius: 10px;
  background: #f43f46;
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 18px 34px rgba(244, 63, 70, 0.22);
}

.fill-cloud-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fill-cloud-side button {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: #f43f46;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.fill-cloud-side svg {
  width: 22px;
  height: 22px;
}

.fill-drop-text {
  display: block;
  margin-top: 18px;
  color: #111827;
  font-size: 16px;
}

.fill-editor {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 360px;
  background: #f3f4f8;
}

.fill-thumbs {
  background: #f4f5f9;
  border-right: 1px solid #d8dbe3;
  padding: 28px 18px;
  overflow-y: auto;
}

.fill-thumb {
  width: 104px;
  margin: 0 auto 22px;
  display: block;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: center;
}

.fill-thumb canvas {
  width: 94px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.18);
}

.fill-thumb.active canvas {
  outline: 3px solid #1683ff;
}

.fill-thumb span {
  display: block;
  margin-top: 8px;
  color: #374151;
  font-size: 14px;
}

.fill-workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.fill-topbar {
  height: 54px;
  background: #fff;
  border-bottom: 1px solid #d8dbe3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
}

.fill-topbar button {
  width: 28px;
  height: 28px;
  border: 1px solid #9ca3af;
  background: #f8fafc;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 900;
}

#pageNumberInput {
  width: 48px;
  height: 30px;
  text-align: center;
  border: 1px solid #9ca3af;
  border-radius: 5px;
}

#fileNameText {
  max-width: 260px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #9ca3af;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  color: #4b5563;
  font-size: 14px;
  background: #fff;
  margin-left: 12px;
}

.fill-pdf-scroll {
  flex: 1;
  overflow: auto;
  padding: 42px 34px;
}

.fill-pdf-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}

.fill-page-box {
  position: relative;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.14);
}

.fill-page-box canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.fill-panel {
  background: #fff;
  border-left: 1px solid #d8dbe3;
  padding: 24px 18px;
  overflow-y: auto;
}

.fill-panel h2 {
  font-size: 30px;
  margin: 0 0 20px;
  text-align: center;
  color: #2f3340;
  font-weight: 900;
}

.fill-tool-btn {
  width: 100%;
  min-height: 48px;
  border: 1px solid #d8dbe3;
  background: #f8fafc;
  color: #374151;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  font-weight: 800;
  cursor: pointer;
}

.fill-tool-btn i {
  width: 30px;
  height: 30px;
  background: #4c7fb5;
  color: #fff;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fill-tool-btn.active {
  border-color: #ef2b2d;
  background: #fff7f7;
  color: #ef2b2d;
}

.fill-options {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.fill-options label {
  color: #374151;
  font-weight: 800;
  font-size: 14px;
}

.fill-options input {
  width: 100%;
  height: 42px;
  margin-top: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 16px;
}

.fill-tip {
  margin: 18px 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
}

.fill-field {
  position: absolute;
  z-index: 25;
  border: 2px solid #1683ff;
  background: rgba(255, 255, 255, 0.72);
  cursor: move;
  resize: both;
  overflow: visible;
  min-width: 40px;
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  color: #111827;
  font-weight: 700;
}

.fill-field span {
  pointer-events: none;
  white-space: nowrap;
}

.fill-signature-font span {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  color: #555;
  font-weight: 400;
}

.fill-field-check {
  justify-content: center;
  padding: 0;
  font-weight: 900;
}

.fill-remove {
  position: absolute;
  top: -14px;
  right: -2px;
  width: 22px;
  height: 22px;
  border: none;
  background: #ef4444;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 900;
}

.fill-final-btn {
  width: 100%;
  min-height: 62px;
  border: none;
  background: #ef2b2d;
  color: #fff;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}

.fill-light-btn {
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  border: 1px solid #d8dbe3;
  background: #fff;
  color: #374151;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

.fill-success-screen {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  padding: 40px 18px;
}

.hidden-screen {
  display: none !important;
}

@media (max-width: 980px) {
  .fill-editor {
    grid-template-columns: 1fr;
  }

  .fill-thumbs {
    display: none;
  }

  .fill-panel {
    border-left: none;
    border-top: 1px solid #d8dbe3;
  }

  .fill-hero-box h1 {
    font-size: 34px;
  }

  .fill-hero-box p {
    font-size: 18px;
  }

  .fill-big-upload-btn {
    width: 250px;
    height: 78px;
    font-size: 24px;
  }
}

/* Fill & Sign mobile success/download screen fix */
@media (max-width: 980px) {
  .fill-success-screen {
    min-height: calc(100vh - 64px) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 90px 18px 40px !important;
    background: #f8fafc !important;
  }

  .fill-success-screen.hidden-screen {
    display: none !important;
  }

  .fill-success-screen .success-card {
    width: 100% !important;
    max-width: 360px !important;
    padding: 28px 18px !important;
    border-radius: 20px !important;
  }

  .fill-success-screen .success-card h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .fill-success-screen .success-card p {
    font-size: 15px !important;
  }

  .fill-success-screen .main-red-btn,
  .fill-success-screen .small-light-btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }
}

/* LAST FIX - Fill Sign mobile blank success screen */
body.fill-success-active {
  background: #f8fafc !important;
  min-height: 100vh !important;
  overflow: auto !important;
}

body.fill-success-active .fill-editor,
body.fill-success-active #editorScreen,
body.fill-success-active #startScreen {
  display: none !important;
}

body.fill-success-active #successScreen,
body.fill-success-active .fill-success-screen {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: calc(100vh - 90px) !important;
  width: 100% !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 80px 16px 40px !important;
  background: #f8fafc !important;
  position: relative !important;
  z-index: 10 !important;
}

body.fill-success-active .success-card {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 380px !important;
  background: #fff !important;
  border-radius: 22px !important;
  padding: 28px 18px !important;
  text-align: center !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12) !important;
}

body.fill-success-active .success-card h1 {
  font-size: 28px !important;
  color: #111827 !important;
  margin-bottom: 12px !important;
}

body.fill-success-active .success-card p {
  font-size: 15px !important;
  color: #64748b !important;
}

body.fill-success-active .success-card .main-red-btn,
body.fill-success-active .success-card .small-light-btn {
  width: 100% !important;
  margin-top: 12px !important;
  display: flex !important;
}

/* ================================
   PDF FORMS TOOL - iLovePDF STYLE
================================ */

.forms-start-screen {
  min-height: calc(100vh - 72px);
  background: #f7f8fc;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
}

.forms-hero-box {
  width: 100%;
  max-width: 920px;
  text-align: center;
}

.forms-hero-box h1 {
  font-size: 44px;
  color: #071733;
  margin: 0 0 16px;
  font-weight: 900;
}

.forms-hero-box p {
  font-size: 24px;
  color: #475569;
  margin: 0 0 34px;
}

.forms-upload-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.forms-big-upload-btn {
  width: 330px;
  height: 96px;
  border: none;
  border-radius: 10px;
  background: #f43f46;
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 18px 34px rgba(244, 63, 70, 0.22);
}

.forms-cloud-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.forms-cloud-side button {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: #f43f46;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.forms-cloud-side svg {
  width: 22px;
  height: 22px;
}

.forms-drop-text {
  display: block;
  margin-top: 18px;
  color: #111827;
  font-size: 16px;
}

.forms-editor {
  min-height: calc(100vh - 72px);
  background: #eef1f4;
}

.forms-top-modebar {
  height: 48px;
  background: #fff;
  border-bottom: 1px solid #d8dbe3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}

.forms-mode {
  height: 28px;
  border: 1px solid #3f4450;
  background: #fff;
  color: #3f4450;
  border-radius: 999px;
  padding: 0 12px;
  font-weight: 800;
  cursor: pointer;
}

.forms-mode.active {
  background: #3f4450;
  color: #fff;
}

.forms-toggle-panel {
  margin-left: 32px;
  border: none;
  background: transparent;
  color: #3f4450;
  font-size: 20px;
  cursor: pointer;
}

.forms-tool-strip {
  height: 48px;
  background: #f8fafc;
  border-bottom: 1px solid #d8dbe3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.forms-tool {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: #3f4450;
  font-size: 18px;
  border-radius: 6px;
  cursor: pointer;
}

.forms-tool.active,
.forms-tool:hover {
  color: #ef2b2d;
  background: #fff;
  border: 1px solid #7bb7ff;
}

.forms-main-grid {
  height: calc(100vh - 168px);
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 300px;
}

.forms-thumbs {
  background: #eef1f4;
  border-right: 1px solid #d8dbe3;
  padding: 24px 16px;
  overflow-y: auto;
}

.forms-thumb {
  width: 110px;
  margin: 0 auto 22px;
  display: block;
  border: none;
  background: transparent;
  text-align: center;
  cursor: pointer;
}

.forms-thumb canvas {
  width: 98px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.16);
}

.forms-thumb.active canvas {
  outline: 3px solid #1683ff;
}

.forms-thumb span {
  display: block;
  margin-top: 8px;
  color: #374151;
  font-size: 14px;
}

.forms-workspace {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.forms-pdf-scroll {
  flex: 1;
  overflow: auto;
  padding: 0 28px 70px;
}

.forms-pdf-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  padding-top: 10px;
}

.forms-page-box {
  position: relative;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

.forms-page-box canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.forms-bottom-bar {
  position: sticky;
  bottom: 18px;
  margin: 0 auto 18px;
  height: 40px;
  background: #3f4450;
  border-radius: 5px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  width: fit-content;
  max-width: 92%;
  z-index: 20;
}

.forms-bottom-bar button {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-weight: 900;
}

.forms-bottom-bar input {
  height: 30px;
  border: 1px solid #6b7280;
  background: #60636e;
  color: #fff;
  border-radius: 4px;
  text-align: center;
}

#pageNumberInput {
  width: 58px;
}

#zoomText {
  width: 78px;
}

#fileNameText {
  max-width: 230px;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forms-right-panel {
  background: #fff;
  border-left: 1px solid #d8dbe3;
  padding: 24px 14px;
  overflow-y: auto;
}

.forms-right-panel.collapsed {
  display: none;
}

.forms-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.forms-panel-head h2 {
  font-size: 18px;
  margin: 0;
  color: #111827;
}

.forms-panel-head button {
  border: none;
  background: transparent;
  color: #7aa6d8;
  cursor: pointer;
}

.forms-empty-list {
  text-align: center;
  padding: 34px 8px;
  color: #111827;
}

.forms-empty-list i {
  font-size: 54px;
  color: #a7b0bb;
  margin-bottom: 14px;
}

.forms-empty-list p {
  line-height: 1.25;
}

.forms-field-list {
  display: grid;
  gap: 8px;
}

.forms-list-item {
  border: 1px solid #d8dbe3;
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.forms-list-item strong {
  display: block;
  color: #111827;
  font-size: 14px;
  margin-bottom: 4px;
}

.forms-list-item span {
  display: block;
  color: #64748b;
  font-size: 12px;
}

.forms-field-options {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.forms-field-options label {
  font-size: 14px;
  font-weight: 800;
  color: #374151;
}

.forms-field-options input {
  width: 100%;
  height: 40px;
  margin-top: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 10px;
}

.forms-download-btn {
  width: 100%;
  min-height: 62px;
  border: none;
  background: #ef2b2d;
  color: #fff;
  border-radius: 10px;
  font-size: 24px;
  font-weight: 900;
  margin-top: 22px;
  cursor: pointer;
}

.forms-field {
  position: absolute;
  z-index: 25;
  border: 2px solid #1683ff;
  background: rgba(255, 255, 255, 0.72);
  cursor: move;
  resize: both;
  overflow: visible;
  min-width: 34px;
  min-height: 28px;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  color: #111827;
  font-weight: 700;
}

.forms-field span {
  pointer-events: none;
  white-space: nowrap;
}

.forms-field-textarea span {
  white-space: normal;
}

.forms-signature-font span {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  color: #555;
  font-weight: 400;
}

.forms-stamp-field span {
  color: #ef4444;
  font-weight: 900;
}

.forms-field-checkbox,
.forms-field-radio {
  justify-content: center;
  padding: 0;
  font-weight: 900;
}

.forms-field-remove {
  position: absolute;
  top: -14px;
  right: -2px;
  width: 22px;
  height: 22px;
  border: none;
  background: #ef4444;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 900;
}

.forms-field.highlight {
  box-shadow: 0 0 0 5px rgba(239, 43, 45, 0.22);
}

.forms-popup {
  position: fixed;
  inset: 0;
  z-index: 200000;
  background: rgba(0, 0, 0, 0.46);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.forms-popup-card {
  width: 750px;
  max-width: 96vw;
  background: #fff;
  border-radius: 12px;
  padding: 58px 64px 48px;
  text-align: center;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.22);
}

.forms-popup-card h2 {
  font-size: 22px;
  color: #3f4450;
  margin: 0 0 20px;
}

.forms-popup-card p {
  color: #646b78;
  font-size: 16px;
  margin-bottom: 34px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e5e7eb;
}

.forms-popup-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.detect-btn,
.manual-btn {
  height: 42px;
  border-radius: 8px;
  padding: 0 18px;
  font-weight: 900;
  cursor: pointer;
  background: #fff;
}

.detect-btn {
  border: 2px solid #7c4dff;
  color: #7c4dff;
}

.manual-btn {
  border: 2px solid #ef2b2d;
  color: #ef2b2d;
}

.forms-success-screen {
  min-height: calc(100vh - 72px);
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 18px;
}

.hidden-screen {
  display: none !important;
}

body.forms-success-active .forms-editor,
body.forms-success-active #editorScreen,
body.forms-success-active #startScreen {
  display: none !important;
}

body.forms-success-active #successScreen {
  display: flex !important;
}

@media (max-width: 980px) {
  .forms-start-screen {
    min-height: calc(100vh - 64px);
    padding: 52px 18px;
  }

  .forms-hero-box h1 {
    font-size: 34px;
  }

  .forms-hero-box p {
    font-size: 18px;
  }

  .forms-big-upload-btn {
    width: 250px;
    height: 78px;
    font-size: 23px;
  }

  .forms-main-grid {
    height: auto;
    min-height: calc(100vh - 160px);
    grid-template-columns: 1fr;
  }

  .forms-thumbs {
    display: none;
  }

  .forms-tool-strip {
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0 12px;
    gap: 14px;
  }

  .forms-right-panel {
    border-left: none;
    border-top: 1px solid #d8dbe3;
  }

  .forms-popup-card {
    padding: 34px 18px;
  }

  .forms-popup-actions {
    flex-direction: column;
  }

  .forms-bottom-bar {
    width: 94%;
    overflow-x: auto;
  }
}

.forms-editable-text {
  outline: none;
  min-width: 30px;
  min-height: 20px;
  display: inline-block;
  cursor: text;
  pointer-events: auto !important;
}

.forms-field:focus-within {
  border-color: #ef2b2d;
  box-shadow: 0 0 0 4px rgba(239, 43, 45, 0.14);
}

@media (max-width: 980px) {
  .forms-editable-text {
    -webkit-user-select: text !important;
    user-select: text !important;
    touch-action: manipulation !important;
    cursor: text !important;
  }

  .forms-field {
    touch-action: none;
  }
}

/* EDIT PDF TOOL */
.editpdf-start-screen {
  min-height: calc(100vh - 72px);
  background: #f7f8fc;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
}

.editpdf-hero-box {
  width: 100%;
  max-width: 920px;
  text-align: center;
}

.editpdf-hero-box h1 {
  font-size: 44px;
  color: #071733;
  margin: 0 0 16px;
  font-weight: 900;
}

.editpdf-hero-box p {
  font-size: 24px;
  color: #475569;
  margin: 0 0 34px;
}

.editpdf-upload-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.editpdf-big-upload-btn {
  width: 330px;
  height: 96px;
  border: none;
  border-radius: 10px;
  background: #f43f46;
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 18px 34px rgba(244, 63, 70, 0.22);
}

.editpdf-cloud-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.editpdf-cloud-side button {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: #f43f46;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editpdf-cloud-side svg {
  width: 22px;
  height: 22px;
}

.editpdf-drop-text {
  display: block;
  margin-top: 18px;
  color: #111827;
}

.editpdf-editor {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 340px;
  background: #eef1f4;
}

.editpdf-thumbs {
  background: #eef1f4;
  border-right: 1px solid #d8dbe3;
  padding: 24px 16px;
  overflow-y: auto;
}

.editpdf-thumb {
  width: 110px;
  margin: 0 auto 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: center;
}

.editpdf-thumb canvas {
  width: 98px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.16);
}

.editpdf-thumb.active canvas {
  outline: 3px solid #1683ff;
}

.editpdf-workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.editpdf-topbar {
  height: 54px;
  background: #fff;
  border-bottom: 1px solid #d8dbe3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
}

.editpdf-topbar button {
  width: 28px;
  height: 28px;
  border: 1px solid #9ca3af;
  background: #f8fafc;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 900;
}

.editpdf-topbar input {
  height: 30px;
  border: 1px solid #9ca3af;
  border-radius: 5px;
  text-align: center;
}

#pageNumberInput {
  width: 48px;
}

#zoomText {
  width: 70px;
}

#fileNameText {
  max-width: 230px;
  color: #4b5563;
  font-size: 13px;
}

.editpdf-pdf-scroll {
  flex: 1;
  overflow: auto;
  padding: 40px 34px;
}

.editpdf-pdf-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}

.editpdf-page-box {
  position: relative;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

.editpdf-page-box canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.editpdf-panel {
  background: #fff;
  border-left: 1px solid #d8dbe3;
  padding: 24px 18px;
  overflow-y: auto;
}

.editpdf-panel h2 {
  font-size: 30px;
  text-align: center;
  margin: 0 0 20px;
  color: #2f3340;
  font-weight: 900;
}

.editpdf-tool {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d8dbe3;
  background: #f8fafc;
  color: #374151;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  font-weight: 800;
  cursor: pointer;
}

.editpdf-tool i {
  width: 30px;
  height: 30px;
  background: #4c7fb5;
  color: #fff;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.editpdf-tool.active {
  border-color: #ef2b2d;
  background: #fff7f7;
  color: #ef2b2d;
}

.editpdf-options {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.editpdf-options label {
  color: #374151;
  font-weight: 800;
  font-size: 14px;
}

.editpdf-options input {
  width: 100%;
  height: 42px;
  margin-top: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 12px;
}

.editpdf-tip {
  margin: 18px 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
}

.editpdf-element {
  position: absolute;
  z-index: 25;
  border: 2px solid #1683ff;
  background: rgba(255, 255, 255, 0.72);
  cursor: move;
  resize: both;
  overflow: visible;
  min-width: 40px;
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 4px 8px;
}

.editpdf-element img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.editpdf-editable {
  outline: none;
  min-width: 30px;
  min-height: 20px;
  cursor: text;
}

.editpdf-remove {
  position: absolute;
  top: -14px;
  right: -2px;
  width: 22px;
  height: 22px;
  border: none;
  background: #ef4444;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 900;
}

.editpdf-final-btn {
  width: 100%;
  min-height: 62px;
  border: none;
  background: #ef2b2d;
  color: #fff;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}

.editpdf-light-btn {
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  border: 1px solid #d8dbe3;
  background: #fff;
  color: #374151;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

.editpdf-success-screen {
  min-height: calc(100vh - 72px);
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 18px;
}

.hidden-screen {
  display: none !important;
}

body.editpdf-success-active #editorScreen,
body.editpdf-success-active #startScreen {
  display: none !important;
}

body.editpdf-success-active #successScreen {
  display: flex !important;
}

@media (max-width: 980px) {
  .editpdf-editor {
    grid-template-columns: 1fr;
  }

  .editpdf-thumbs {
    display: none;
  }

  .editpdf-panel {
    border-left: none;
    border-top: 1px solid #d8dbe3;
  }

  .editpdf-hero-box h1 {
    font-size: 34px;
  }

  .editpdf-hero-box p {
    font-size: 18px;
  }

  .editpdf-big-upload-btn {
    width: 250px;
    height: 78px;
    font-size: 24px;
  }
}

/* PDF SUMMARIZER */
.summary-start-screen {
  min-height: calc(100vh - 72px);
  background: #f7f8fc;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
}

.summary-hero-box {
  width: 100%;
  max-width: 920px;
  text-align: center;
}

.summary-hero-box h1 {
  font-size: 44px;
  color: #071733;
  margin: 0 0 16px;
  font-weight: 900;
}

.summary-hero-box p {
  font-size: 24px;
  color: #475569;
  margin: 0 0 34px;
}

.summary-upload-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.summary-big-upload-btn {
  width: 330px;
  height: 96px;
  border: none;
  border-radius: 10px;
  background: #7c4dff;
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 18px 34px rgba(124, 77, 255, 0.22);
}

.summary-cloud-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-cloud-side button {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: #7c4dff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.summary-cloud-side svg {
  width: 22px;
  height: 22px;
}

.summary-drop-text {
  display: block;
  margin-top: 18px;
  color: #111827;
  font-size: 16px;
}

.ai-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ai-popup-box {
  width: 800px;
  max-width: 96vw;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
}

.ai-popup-content {
  padding: 38px 64px;
}

.ai-popup-content h2 {
  text-align: center;
  margin: 0 0 28px;
  font-size: 22px;
  color: #3f3f46;
}

.ai-popup-content h3 {
  text-align: center;
  margin: 0 0 18px;
  font-size: 20px;
  color: #3f3f46;
}

.summary-slider-wrap {
  margin-bottom: 34px;
}

.summary-slider-wrap input {
  width: 100%;
  accent-color: #7c4dff;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: #666;
}

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

.process-option {
  height: 58px;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  color: #52525b;
  position: relative;
}

.process-option.active {
  border-color: #7c4dff;
}

.process-option.locked {
  opacity: 0.65;
}

.process-option strong {
  position: absolute;
  right: 14px;
}

.process-radio {
  width: 22px;
  height: 22px;
  border: 1px solid #71717a;
  border-radius: 50%;
}

.process-radio.active,
.process-option.active .process-radio {
  background: #3f3f46;
  box-shadow: inset 0 0 0 4px #fff;
}

.summary-limit-note {
  margin: 18px 0 0;
  color: #71717a;
  font-size: 13px;
  text-align: center;
}

.popup-footer {
  border-top: 1px solid #e5e7eb;
  padding: 24px;
  display: flex;
  justify-content: flex-end;
}

.continue-summary-btn {
  min-width: 145px;
  height: 46px;
  border: none;
  border-radius: 8px;
  background: #7c4dff;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

.summary-editor {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  background: #eef1f4;
}

.summary-left {
  min-width: 0;
  border-right: 1px solid #d8dbe3;
}

.summary-pdf-toolbar {
  height: 52px;
  background: #fff;
  border-bottom: 1px solid #d8dbe3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
}

.summary-pdf-toolbar button {
  width: 28px;
  height: 28px;
  border: 1px solid #9ca3af;
  background: #f8fafc;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 900;
}

.summary-pdf-toolbar input {
  width: 52px;
  height: 30px;
  border: 1px solid #9ca3af;
  border-radius: 5px;
  text-align: center;
}

#fileNameText {
  max-width: 280px;
  color: #4b5563;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-pdf-scroll {
  height: calc(100vh - 124px);
  overflow: auto;
  padding: 34px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.summary-pdf-viewer {
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
}

.summary-pdf-viewer canvas {
  display: block;
  max-width: 100%;
}

.summary-right {
  background: #fff;
  padding: 28px 26px;
  overflow-y: auto;
}

.summary-heading-wrap {
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
  margin: -28px -26px 26px;
  padding: 34px 20px 24px;
}

.summary-ai-badge {
  display: inline-flex;
  background: #ede9fe;
  color: #7c4dff;
  border-radius: 6px;
  padding: 6px 10px;
  font-weight: 900;
  margin-bottom: 10px;
}

.summary-heading-wrap h2 {
  font-size: 28px;
  margin: 0;
  color: #111827;
}

.summary-result-box {
  min-height: 360px;
  color: #4c1d95;
  font-size: 17px;
  line-height: 1.7;
}

.summary-result-box h3 {
  font-size: 28px;
  color: #4c1d95;
  margin: 0 0 18px;
}

.summary-result-box ul {
  padding-left: 24px;
}

.summary-result-box li {
  margin-bottom: 12px;
}

.summary-loading,
.summary-error {
  text-align: center;
  padding-top: 120px;
  color: #7c4dff;
  font-size: 18px;
  font-weight: 800;
}

.summary-error {
  color: #ef4444;
}

.summary-question-box {
  display: grid;
  grid-template-columns: 1fr 46px;
  gap: 8px;
  margin-top: 20px;
}

.summary-question-box input {
  height: 46px;
  border: 1px solid #a78bfa;
  border-radius: 999px;
  padding: 0 16px;
  font-size: 15px;
}

.summary-question-box button {
  height: 46px;
  width: 46px;
  border: none;
  border-radius: 50%;
  background: #7c4dff;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.summary-answer {
  margin-top: 18px;
  padding: 14px;
  background: #f5f3ff;
  border-radius: 10px;
  color: #4c1d95;
}

.summary-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.summary-copy-btn,
.summary-download-btn {
  flex: 1;
  height: 48px;
  border: none;
  border-radius: 10px;
  font-weight: 900;
  cursor: pointer;
}

.summary-copy-btn {
  background: #111827;
  color: #fff;
}

.summary-download-btn {
  background: #7c4dff;
  color: #fff;
}

.hidden-screen {
  display: none !important;
}

@media (max-width: 980px) {
  .summary-start-screen {
    min-height: calc(100vh - 64px);
    padding: 52px 18px;
  }

  .summary-hero-box h1 {
    font-size: 34px;
  }

  .summary-hero-box p {
    font-size: 18px;
  }

  .summary-big-upload-btn {
    width: 250px;
    height: 78px;
    font-size: 23px;
  }

  .processing-grid {
    grid-template-columns: 1fr;
  }

  .ai-popup-content {
    padding: 28px 20px;
  }

  .summary-editor {
    grid-template-columns: 1fr;
  }

  .summary-pdf-scroll {
    height: auto;
    max-height: 65vh;
    padding: 20px;
  }

  .summary-right {
    border-top: 1px solid #d8dbe3;
  }

  .summary-result-box h3 {
    font-size: 24px;
  }
}

/* PDF Summarizer desktop half-half + red theme fix */
@media (min-width: 981px) {
  .summary-editor {
    grid-template-columns: 50% 50% !important;
  }

  .summary-left,
  .summary-right {
    width: 100% !important;
  }

  .summary-pdf-scroll {
    padding: 34px 26px !important;
  }

  .summary-pdf-viewer canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Replace purple with HelloPDF red */
.summary-big-upload-btn,
.continue-summary-btn,
.summary-question-box button,
.summary-download-btn {
  background: #ef4444 !important;
}

.summary-big-upload-btn {
  box-shadow: 0 18px 34px rgba(239, 68, 68, 0.22) !important;
}

.summary-cloud-side button {
  background: #ef4444 !important;
}

.summary-ai-badge {
  background: #fee2e2 !important;
  color: #ef4444 !important;
}

.summary-result-box {
  color: #4c1d95 !important;
}

.summary-result-box h3 {
  color: #4c1d95 !important;
}

.summary-result-box li {
  color: #4c1d95 !important;
}

.summary-answer {
  background: #fff1f2 !important;
  color: #4c1d95 !important;
}

/* TRANSLATE PDF TOOL */
.translate-start-screen {
  min-height: calc(100vh - 72px);
  background: #f7f8fc;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
}

.translate-upload-box {
  width: 100%;
  max-width: 920px;
  text-align: center;
}

.translate-upload-box h1 {
  font-size: 44px;
  color: #071733;
  margin: 0 0 16px;
  font-weight: 900;
}

.translate-upload-box p {
  font-size: 24px;
  color: #475569;
  margin: 0 0 34px;
}

.translate-upload-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.translate-upload-btn {
  width: 330px;
  height: 96px;
  border: none;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 18px 34px rgba(239, 68, 68, 0.22);
}

.translate-cloud-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.translate-cloud-buttons button {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.translate-drop-text {
  display: block;
  margin-top: 18px;
  color: #111827;
  font-size: 16px;
}

.translate-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.translate-popup-box {
  width: 780px;
  max-width: 96vw;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
}

.translate-popup-content {
  padding: 38px 54px;
}

.translate-popup-content h2 {
  text-align: center;
  margin: 0 0 28px;
  font-size: 24px;
  color: #111827;
}

.translate-language-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.translate-field label {
  display: block;
  font-weight: 900;
  color: #374151;
  margin-bottom: 8px;
}

.translate-field select {
  width: 100%;
  height: 48px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 12px;
  font-weight: 800;
  color: #111827;
  background: #fff;
}

.translate-mode-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}

.translate-mode-btn {
  min-height: 58px;
  border: 2px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  color: #374151;
  font-weight: 900;
  cursor: pointer;
}

.translate-mode-btn.active {
  border-color: #ef4444;
  background: #fff1f2;
  color: #ef4444;
}

.translate-mode-btn.locked {
  opacity: 0.65;
}

.translate-note {
  margin: 18px 0 0;
  text-align: center;
  color: #64748b;
  font-size: 14px;
}

.translate-popup-footer {
  border-top: 1px solid #e5e7eb;
  padding: 22px 28px;
  display: flex;
  justify-content: flex-end;
}

.translate-continue-btn {
  min-width: 150px;
  height: 48px;
  border: none;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
}

.translate-editor {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: 50% 50%;
  background: #eef1f4;
}

.translate-left {
  min-width: 0;
  border-right: 1px solid #d8dbe3;
}

.translate-toolbar {
  height: 52px;
  background: #fff;
  border-bottom: 1px solid #d8dbe3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
}

.translate-toolbar button {
  width: 28px;
  height: 28px;
  border: 1px solid #9ca3af;
  background: #f8fafc;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 900;
}

.translate-toolbar input {
  width: 52px;
  height: 30px;
  border: 1px solid #9ca3af;
  border-radius: 5px;
  text-align: center;
}

#translateFileName {
  max-width: 280px;
  color: #4b5563;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.translate-pdf-scroll {
  height: calc(100vh - 124px);
  overflow: auto;
  padding: 34px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.translate-pdf-viewer {
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
}

.translate-pdf-viewer canvas {
  display: block;
  max-width: 100%;
}

.translate-right {
  background: #fff;
  padding: 34px 30px;
  overflow-y: auto;
}

.translate-ai-badge {
  display: inline-flex;
  background: #fee2e2;
  color: #ef4444;
  border-radius: 6px;
  padding: 6px 10px;
  font-weight: 900;
  margin-bottom: 14px;
}

.translate-right h2 {
  font-size: 34px;
  margin: 0 0 22px;
  color: #111827;
}

.translated-text-box {
  min-height: 430px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 22px;
  color: #111827;
  line-height: 1.7;
  overflow-y: auto;
  background: #fff;
}

.translated-content p {
  margin: 0 0 14px;
}

.translate-loading {
  text-align: center;
  padding-top: 140px;
  color: #ef4444;
  font-weight: 900;
  font-size: 18px;
}

.translate-error {
  color: #ef4444;
  font-weight: 800;
}

.translate-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.translate-copy-btn,
.translate-download-btn {
  flex: 1;
  height: 50px;
  border: none;
  border-radius: 10px;
  font-weight: 900;
  cursor: pointer;
}

.translate-copy-btn {
  background: #111827;
  color: #fff;
}

.translate-download-btn {
  background: #ef4444;
  color: #fff;
}

.hidden-screen {
  display: none !important;
}

@media (max-width: 980px) {
  .translate-start-screen {
    min-height: calc(100vh - 64px);
    padding: 52px 18px;
  }

  .translate-upload-box h1 {
    font-size: 34px;
  }

  .translate-upload-box p {
    font-size: 18px;
  }

  .translate-upload-btn {
    width: 250px;
    height: 78px;
    font-size: 23px;
  }

  .translate-language-grid,
  .translate-mode-box {
    grid-template-columns: 1fr;
  }

  .translate-popup-content {
    padding: 28px 20px;
  }

  .translate-editor {
    grid-template-columns: 1fr;
  }

  .translate-pdf-scroll {
    height: auto;
    max-height: 65vh;
    padding: 20px;
  }

  .translate-right {
    border-top: 1px solid #d8dbe3;
  }
}
}

.process-option.active {
  border-color: #ef4444 !important;
}

.summary-slider-wrap input {
  accent-color: #ef4444 !important;
}

.summary-question-box input {
  border-color: #ef4444 !important;
}

.summary-answer {
  background: #fff1f2 !important;
}

/* HOMEPAGE SPACING FIX */

.hero-section{
    padding-top: 40px !important;
    padding-bottom: 20px !important;
}

.home-categories{
    margin-top: 15px !important;
    margin-bottom: 35px !important;
    gap: 12px !important;
}

.tools-section{
    padding-top: 10px !important;
}

.tools-section h2{
    margin-bottom: 10px !important;
}

.tools-grid{
    margin-top: 10px !important;
}

header{
    height: 78px !important;
}

/* SOCIAL AUTH */

.social-auth{
  margin-bottom:22px;
}

.social-btn{
  width:100%;
  height:56px;
  border:none;
  border-radius:14px;
  font-size:16px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  cursor:pointer;
  transition:.2s;
}

.google-btn{
  background:#ffffff;
  border:1px solid #e5e7eb;
  color:#111827;
  margin-bottom:14px;
}

.google-btn:hover{
  background:#f8fafc;
}

.facebook-btn{
  background:#1877f2;
  color:#fff;
}

.facebook-btn:hover{
  background:#1669d8;
}

.auth-divider{
  position:relative;
  text-align:center;
  margin:24px 0;
}

.auth-divider::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:1px;
  background:#e5e7eb;
}

.auth-divider span{
  position:relative;
  background:#fff;
  padding:0 14px;
  color:#64748b;
  font-size:14px;
  font-weight:700;
}

.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.25s;
}

.drawer-overlay.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* DESKTOP FIX */
@media(min-width:769px){

  .drawer-overlay,
  .drawer-overlay.active{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    background:transparent !important;
  }

}

/* NUCLEAR DESKTOP OVERLAY FIX */
@media (min-width: 769px){
  #drawerOverlay,
  .drawer-overlay,
  #toolsDrawer,
  #mainDrawer,
  .tools-drawer,
  .main-drawer{
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: transparent !important;
  }

  body{
    overflow: auto !important;
  }
}

/* ===========================================================
   SIGN PDF - STEP 1
   START SCREEN + BASE LAYOUT
=========================================================== */

.sign-pdf-page{
width:100%;
max-width:1400px;
margin:0 auto;
padding:40px 20px 60px;
display:block;
}

.sign-start-screen{
display:flex;
justify-content:center;
align-items:center;
min-height:520px;
}

.sign-hero-box{
width:100%;
max-width:760px;
margin:auto;
text-align:center;
}

.sign-hero-box h1{
font-size:54px;
font-weight:800;
color:#111827;
margin-bottom:14px;
}

.sign-hero-box p{
font-size:20px;
color:#64748b;
margin-bottom:34px;
}

.sign-upload-row{
display:flex;
justify-content:center;
align-items:center;
gap:16px;
flex-wrap:wrap;
}

.sign-big-upload-btn{
min-width:290px;
height:82px;
padding:0 46px;
border:none;
border-radius:14px;
background:#e53935;
color:#fff;
font-size:20px;
font-weight:700;
cursor:pointer;
transition:.25s;
}

.sign-big-upload-btn:hover{
background:#d32f2f;
}

.sign-cloud-side{
display:flex;
align-items:center;
gap:10px;
}

.sign-cloud-side button{
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
background:#ffffff;
border:1px solid #dbe2ea;
border-radius:12px;
cursor:pointer;
transition:all .2s ease;
box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.sign-cloud-side button:hover{
border-color:#ef4444;
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.10);
}

.sign-cloud-side img,
.sign-cloud-side svg{
width:24px;
height:24px;
display:block;
}

.sign-drop-text{
display:block;
margin-top:24px;
font-size:16px;
color:#6b7280;
}

.hp-sign-editor{
display:grid;
grid-template-columns:160px 1fr 340px;
gap:24px;
align-items:start;
width:100%;
min-height:720px;
}

.hp-page-thumbs{
background:#fff;
border:1px solid #e5e7eb;
border-radius:16px;
padding:14px;
overflow:auto;
height:calc(100vh - 170px);
}

.hp-sign-workspace{
background:#f5f7fb;
border-radius:18px;
padding:18px;
min-height:720px;
}

.hp-sign-panel{
background:#fff;
border:1px solid #e5e7eb;
border-radius:18px;
padding:22px;
height:fit-content;
position:sticky;
top:100px;
box-shadow:0 10px 35px rgba(0,0,0,.05);
}

.hp-sign-topbar{
display:flex;
align-items:center;
gap:10px;
margin-bottom:18px;
padding-bottom:12px;
border-bottom:1px solid #e5e7eb;
}

.hp-pdf-scroll{
overflow:auto;
height:calc(100vh - 220px);
padding-right:8px;
}

.pdf-canvas-wrap{
display:flex;
flex-direction:column;
align-items:center;
gap:30px;
}

.sign-page-box{
position:relative;
background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.12);
border-radius:8px;
overflow:hidden;
}

@media(max-width:1200px){

.hp-sign-editor{

grid-template-columns:1fr;

}

.hp-page-thumbs{

display:none;

}

.hp-sign-panel{

position:relative;
top:auto;

}

}

@media(max-width:768px){

.sign-hero-box h1{

font-size:36px;

}

.sign-hero-box p{

font-size:16px;

}

.sign-upload-row{

flex-direction:column;

}

.sign-big-upload-btn{

width:100%;

}

.hp-sign-workspace{

padding:10px;

}

}

/* ===========================================================
   SIGN PDF - STEP 2
   SIGNATURE MODAL
=========================================================== */

.hp-sign-modal{
position:fixed;
inset:0;
display:none;
justify-content:center;
align-items:center;
background:rgba(15,23,42,.55);
backdrop-filter:blur(3px);
z-index:999999;
padding:20px;
}

.hp-sign-modal:not(.hidden-screen){
display:flex;
}

.hp-sign-modal-card{
width:100%;
max-width:920px;
background:#ffffff;
border-radius:22px;
overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,.25);
animation:hpSignPopup .22s ease;
}

@keyframes hpSignPopup{

from{

opacity:0;
transform:translateY(20px) scale(.96);

}

to{

opacity:1;
transform:translateY(0) scale(1);

}

}

.hp-modal-head{

display:flex;
justify-content:space-between;
align-items:center;
padding:24px 30px;
border-bottom:1px solid #edf2f7;

}

.hp-modal-head h2{

font-size:30px;
font-weight:800;
color:#111827;

}

.hp-modal-login{

font-size:15px;
font-weight:700;
color:#2563eb;
text-decoration:none;

}

.hp-modal-body{

padding:30px;

}

.hp-user-row{

display:flex;
align-items:flex-start;
gap:22px;
margin-bottom:26px;

}

.hp-user-icon{

width:54px;
height:54px;
border-radius:50%;
background:#f3f4f6;
display:flex;
justify-content:center;
align-items:center;
font-size:22px;
color:#475569;
flex-shrink:0;

}

.hp-user-row label{

flex:1;
font-weight:700;
font-size:14px;
color:#374151;

}

.hp-user-row input{

width:100%;
height:54px;
margin-top:8px;
padding:0 18px;
border:1px solid #dbe3ee;
border-radius:12px;
font-size:16px;
background:#fff;

}

.hp-sign-tabs{

display:flex;
gap:12px;
margin-bottom:26px;
border-bottom:1px solid #edf2f7;
padding-bottom:16px;

}

.hp-sign-tab{

padding:12px 18px;
border:none;
background:#f8fafc;
border-radius:12px;
cursor:pointer;
font-weight:700;
font-size:15px;
transition:.25s;

}

.hp-sign-tab.active{

background:#ef4444;
color:#fff;

}

.hp-tab-panel{

display:block;

}

.hp-tab-panel.hidden-screen{

display:none;

}

.hp-modal-footer{

padding:22px 30px;
border-top:1px solid #edf2f7;
display:flex;
justify-content:flex-end;

}

.hp-modal-footer .main-red-btn{

min-width:180px;
height:52px;
border:none;
border-radius:12px;
background:#ef4444;
color:#fff;
font-size:16px;
font-weight:700;
cursor:pointer;

}

.hp-modal-footer .main-red-btn:hover{

background:#dc2626;

}

@media(max-width:768px){

.hp-sign-modal{

padding:12px;

}

.hp-sign-modal-card{

max-height:90vh;
overflow:auto;

}

.hp-modal-head{

padding:18px;

}

.hp-modal-head h2{

font-size:22px;

}

.hp-modal-body{

padding:18px;

}

.hp-user-row{

flex-direction:column;

}

.hp-sign-tabs{

flex-wrap:wrap;

}

.hp-modal-footer{

padding:18px;

}

.hp-modal-footer .main-red-btn{

width:100%;

}

}

/* ===========================================================
   SIGN PDF - STEP 3
   EDITOR PANEL + THUMBNAILS + FIELD CARDS
=========================================================== */

.hp-page-thumbs{
display:flex;
flex-direction:column;
gap:14px;
}

.hp-thumb{
width:100%;
background:#fff;
border:2px solid #e5e7eb;
border-radius:12px;
padding:8px;
cursor:pointer;
transition:.2s;
}

.hp-thumb canvas{
width:100%;
height:auto;
display:block;
border-radius:6px;
}

.hp-thumb span{
display:block;
margin-top:8px;
text-align:center;
font-size:13px;
font-weight:700;
color:#64748b;
}

.hp-thumb:hover{

border-color:#ef4444;

}

.hp-thumb.active{

border-color:#ef4444;
box-shadow:0 0 0 4px rgba(239,68,68,.12);

}

.hp-sign-panel h2{

font-size:24px;
font-weight:800;
margin-bottom:20px;
color:#111827;

}

.hp-sign-panel h3{

margin:22px 0 12px;
font-size:15px;
font-weight:800;
color:#374151;

}

.hp-sign-type-row{

display:flex;
gap:12px;
margin-bottom:10px;

}

.hp-type-card{

flex:1;
border:2px solid #e5e7eb;
background:#fff;
border-radius:14px;
padding:16px;
cursor:pointer;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
transition:.2s;

}

.hp-type-card i{

font-size:24px;
color:#ef4444;

}

.hp-type-card span{

font-size:14px;
font-weight:700;

}

.hp-type-card.active{

border-color:#ef4444;
background:#fff5f5;

}

.hp-type-card.disabled{

opacity:.55;
cursor:not-allowed;

}

.hp-field-list{

display:flex;
flex-direction:column;
gap:10px;

}

.hp-field-btn{

width:100%;
display:flex;
align-items:center;
gap:12px;
padding:13px 14px;
border:1px solid #e5e7eb;
background:#fff;
border-radius:12px;
cursor:pointer;
font-size:14px;
font-weight:700;
transition:.2s;

}

.hp-field-btn:hover{

border-color:#ef4444;

}

.hp-field-card{

display:flex;
align-items:center;
gap:12px;
padding:12px;
border:1px solid #e5e7eb;
background:#fff;
border-radius:12px;

}

.drag-dots{

font-size:18px;
color:#94a3b8;

}

.field-icon{

width:34px;
height:34px;
border-radius:8px;
background:#f3f4f6;
display:flex;
justify-content:center;
align-items:center;
font-weight:700;
color:#374151;
flex-shrink:0;

}

.field-preview{

flex:1;

}

.field-preview small{

display:block;
font-size:12px;
color:#64748b;
margin-bottom:4px;

}

.field-preview img{

height:34px;
max-width:100%;
object-fit:contain;

}

.field-edit{

border:none;
background:none;
cursor:pointer;
font-size:18px;
color:#64748b;

}

.progress-wrap{

height:8px;
background:#edf2f7;
border-radius:999px;
overflow:hidden;
margin:24px 0;

}

#progressBar{

height:100%;
width:0;
background:#ef4444;
transition:.25s;

}

.hp-sign-final-btn{

width:100%;
height:54px;
border:none;
border-radius:14px;
background:#ef4444;
color:#fff;
font-size:17px;
font-weight:800;
cursor:pointer;
transition:.25s;

}

.hp-sign-final-btn:hover{

background:#dc2626;

}

@media(max-width:768px){

.hp-sign-panel{

margin-top:20px;

}

.hp-sign-type-row{

flex-direction:column;

}

}

/* ===========================================================
   SIGN PDF - STEP 4
   SIGNATURE BOXES + CANVAS + SUCCESS
=========================================================== */

/* PDF PAGE */

.pdf-page{
position:relative;
display:inline-block;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 12px 30px rgba(0,0,0,.12);
}

/* Canvas */

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

/* Signature Element */

.hp-sign-element{
position:absolute;
display:flex;
align-items:center;
justify-content:center;
min-width:120px;
min-height:46px;
padding:8px 12px;
background:rgba(255,255,255,.92);
border:2px solid transparent;
border-radius:8px;
cursor:move;
user-select:none;
transition:.15s;
z-index:50;
}

.hp-sign-element img{
display:block;
max-width:100%;
max-height:100%;
pointer-events:none;
}

.hp-sign-element:hover{
border-color:#ef4444;
box-shadow:0 8px 20px rgba(239,68,68,.18);
}

.hp-sign-element.selected{
border-color:#ef4444;
box-shadow:0 0 0 4px rgba(239,68,68,.15);
}

/* Resize Handles */

.hp-resize{
position:absolute;
width:10px;
height:10px;
background:#ef4444;
border:2px solid #fff;
border-radius:50%;
z-index:60;
}

.hp-resize.nw{
top:-6px;
left:-6px;
cursor:nwse-resize;
}

.hp-resize.ne{
top:-6px;
right:-6px;
cursor:nesw-resize;
}

.hp-resize.sw{
bottom:-6px;
left:-6px;
cursor:nesw-resize;
}

.hp-resize.se{
bottom:-6px;
right:-6px;
cursor:nwse-resize;
}

/* Delete Button */

.hp-delete-sign{
position:absolute;
top:-14px;
right:-14px;
width:28px;
height:28px;
border:none;
border-radius:50%;
background:#ef4444;
color:#fff;
font-size:14px;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* Canvas Wrapper */

.pdf-canvas-wrap{
display:flex;
flex-direction:column;
align-items:center;
gap:34px;
padding-bottom:30px;
}

/* Empty State */

.hp-empty-state{
padding:60px 20px;
text-align:center;
color:#64748b;
font-size:15px;
}

/* Success Screen */

#successScreen{
text-align:center;
padding:70px 20px;
}

#successScreen .success-icon{
width:90px;
height:90px;
margin:0 auto 24px;
border-radius:50%;
background:#22c55e;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:42px;
}

#successScreen h2{
font-size:34px;
font-weight:800;
color:#111827;
margin-bottom:14px;
}

#successScreen p{
font-size:17px;
color:#64748b;
margin-bottom:30px;
}

#downloadBtn{
min-width:220px;
height:56px;
border:none;
border-radius:14px;
background:#ef4444;
color:#fff;
font-size:17px;
font-weight:700;
cursor:pointer;
transition:.2s;
}

#downloadBtn:hover{
background:#dc2626;
transform:translateY(-2px);
}

/* Scrollbars */

.hp-page-thumbs::-webkit-scrollbar,
.hp-pdf-scroll::-webkit-scrollbar{
width:8px;
}

.hp-page-thumbs::-webkit-scrollbar-thumb,
.hp-pdf-scroll::-webkit-scrollbar-thumb{
background:#d1d5db;
border-radius:999px;
}

.hp-page-thumbs::-webkit-scrollbar-thumb:hover,
.hp-pdf-scroll::-webkit-scrollbar-thumb:hover{
background:#9ca3af;
}

/* Mobile */

@media(max-width:768px){

.hp-sign-element{

min-width:90px;
min-height:38px;

}

.hp-delete-sign{

width:24px;
height:24px;
font-size:12px;

}

#successScreen{

padding:50px 16px;

}

#successScreen h2{

font-size:26px;

}

#downloadBtn{

width:100%;

}

}

/* ===========================================================
   SIGN PDF - STEP 5
   FINAL POLISH
=========================================================== */

/* Smooth animation */

.hp-sign-editor *,
.hp-sign-modal *{
transition:
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease,
transform .2s ease,
opacity .2s ease;
}

/* Better workspace */

.hp-sign-workspace{
border:1px solid #e5e7eb;
box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

/* Better panel */

.hp-sign-panel{
background:#fff;
box-shadow:
0 12px 35px rgba(0,0,0,.06),
0 1px 2px rgba(0,0,0,.04);
}

/* Hover */

.hp-sign-panel button:hover,
.hp-sign-panel .hp-field-btn:hover{
transform:translateY(-1px);
}

/* Active click */

.hp-sign-panel button:active{
transform:scale(.98);
}

/* Focus */

.hp-sign-panel input:focus,
.hp-modal-body input:focus{
outline:none;
border-color:#ef4444;
box-shadow:0 0 0 4px rgba(239,68,68,.12);
}

/* Disabled */

button:disabled{
opacity:.55;
cursor:not-allowed;
transform:none !important;
}

/* Loading */

.hp-loading-overlay{
position:absolute;
inset:0;
display:flex;
justify-content:center;
align-items:center;
background:rgba(255,255,255,.82);
backdrop-filter:blur(2px);
z-index:500;
}

.hp-spinner{
width:48px;
height:48px;
border:5px solid #e5e7eb;
border-top-color:#ef4444;
border-radius:50%;
animation:hpSpin .8s linear infinite;
}

@keyframes hpSpin{

to{

transform:rotate(360deg);

}

}

/* Signature dragging */

.hp-sign-element.dragging{
opacity:.82;
transform:scale(1.03);
z-index:999;
cursor:grabbing;
}

/* Drop hint */

.hp-drop-highlight{
outline:3px dashed #ef4444;
outline-offset:8px;
}

/* Better thumbnails */

.hp-thumb{
overflow:hidden;
}

.hp-thumb canvas{
transition:transform .25s;
}

.hp-thumb:hover canvas{
transform:scale(1.03);
}

/* Better buttons */

.hp-sign-final-btn,
.main-red-btn,
.sign-big-upload-btn{

box-shadow:
0 8px 20px rgba(239,68,68,.20);

}

.hp-sign-final-btn:hover,
.main-red-btn:hover,
.sign-big-upload-btn:hover{

box-shadow:
0 14px 30px rgba(239,68,68,.30);

}

/* Success */

#successScreen{

animation:fadeSuccess .4s ease;

}

@keyframes fadeSuccess{

from{

opacity:0;
transform:translateY(25px);

}

to{

opacity:1;
transform:none;

}

}

/* Prevent image selection */

.hp-sign-editor img,
.hp-sign-editor canvas{

user-select:none;
-webkit-user-drag:none;

}

/* Better mobile spacing */

@media(max-width:768px){

.hp-sign-panel{

border-radius:16px;

}

.hp-sign-workspace{

border-radius:14px;

}

.hp-page-thumbs{

border-radius:14px;

}

.hp-sign-modal-card{

border-radius:18px;

}

}

/* ===== PDF SUMMARIZER RESULT TYPOGRAPHY ===== */

.summary-result-box {
  color: #4c1d95 !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  font-weight: 400;
  letter-spacing: 0;
}

.summary-result-box h3 {
  color: #4c1d95 !important;
  font-size: 29px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  margin: 0 0 18px !important;
  letter-spacing: -0.4px;
}

.summary-result-box ul {
  padding-left: 26px !important;
  margin: 0;
}

.summary-result-box li {
  color: #4c1d95 !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  font-weight: 400;
  padding-left: 3px;
  margin-bottom: 14px !important;
}

.summary-result-box li::marker {
  font-size: 14px;
}

/* ===== PDF SUMMARIZER SUGGESTED QUESTIONS ===== */

.summary-suggested-box {
  margin-top: 26px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 18px 20px;
}

.summary-suggested-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.summary-suggested-title span {
  font-size: 16px;
  font-weight: 800;
  color: #374151;
}

.summary-suggested-title button {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 20px;
  cursor: pointer;
}

.summary-suggested-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-suggested-question {
  width: 100%;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px 14px;
  text-align: left;
  color: #374151;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.summary-suggested-question:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* Ask anything now sits below Copy / Download */

.summary-actions + .summary-question-box {
  margin-top: 18px;
}