*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* CSS Variables inherited from global-theme.css */
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; transition:var(--trans); }
.orb { position:fixed; border-radius:50%; filter:blur(110px); pointer-events:none; z-index:0; }
.orb1 { width:460px;height:460px;background:#0ea5e9;opacity:.07;top:-150px;left:-100px; }
.orb2 { width:360px;height:360px;background:#06b6d4;opacity:.06;bottom:-100px;right:-80px; }

/* NAV */
nav { position:sticky;top:0;z-index:999;background:rgba(255,255,255,0.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);transition:var(--trans); }
body.dark-theme nav { background:rgba(8,12,20,0.85); }
.nav-inner { max-width:1060px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px; }
.logo-link { display:flex;align-items:center;gap:9px;text-decoration:none; }
.logo-icon { width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#0ea5e9,#06b6d4);display:flex;align-items:center;justify-content:center;box-shadow:0 0 14px rgba(14,165,233,0.4); }
.logo-icon svg { width:18px;height:18px;color:#fff; }
.logo-name { font-size:.9rem;font-weight:800;background:linear-gradient(135deg,#0ea5e9,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.nav-right { display:flex;align-items:center;gap:10px; }
.back-btn { display:flex;align-items:center;gap:7px;text-decoration:none;background:var(--surface2);border:1px solid var(--border);color:var(--soft);padding:7px 16px;border-radius:9px;font-size:.8rem;font-weight:500;transition:var(--trans); }
.back-btn:hover { border-color:var(--accent);color:var(--accent); }
.theme-btn { width:36px;height:36px;border-radius:9px;background:var(--surface2);border:1px solid var(--border);color:var(--soft);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:var(--trans); }
.theme-btn:hover { border-color:var(--accent);color:var(--accent); }

/* HERO */
.hero { text-align:center;padding:56px 20px 36px;max-width:680px;margin:0 auto;position:relative;z-index:1; }
.badge { display:inline-flex;align-items:center;gap:6px;background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.3);color:var(--accent3);font-size:.72rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin-bottom:18px; }
.hero h1 { font-size:clamp(1.9rem,4.5vw,2.9rem);font-weight:800;letter-spacing:-.4px;line-height:1.2;margin-bottom:12px; }
.hero h1 span { background:linear-gradient(135deg,#0ea5e9,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.hero p { font-size:.95rem;color:var(--soft);line-height:1.7; }

/* MAIN */
main { max-width:1060px;margin:0 auto;padding:0 20px 72px;position:relative;z-index:1;display:flex;flex-direction:column;gap:20px; }

/* DROP ZONE */
.drop-zone {
  border:2px dashed var(--border);border-radius:var(--radius);
  padding:52px 32px;text-align:center;cursor:pointer;
  transition:var(--trans);background:var(--surface);box-shadow:var(--shadow);
}
.drop-zone:hover,.drop-zone.drag-over {
  border-color:var(--accent);background:rgba(16,185,129,.04);
  box-shadow:var(--shadow),0 0 28px rgba(16,185,129,.12);
}
.drop-icon { width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(52,211,153,.12));display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transition:transform .3s; }
.drop-zone:hover .drop-icon,.drop-zone.drag-over .drop-icon { transform:scale(1.08) rotate(-5deg); }
.drop-icon svg { width:30px;height:30px;color:var(--accent3); }
.drop-zone h3 { font-size:1.05rem;font-weight:700;margin-bottom:8px; }
.drop-zone p { font-size:.83rem;color:var(--muted); }
.drop-zone p strong { color:var(--accent2);cursor:pointer;text-decoration:underline;text-underline-offset:3px; }

/* File badge */
.file-badge { display:none;margin-top:14px;align-items:center;gap:10px;justify-content:center; }
.file-badge.show { display:flex; }
.fbadge-inner { background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);border-radius:10px;padding:8px 16px;display:flex;align-items:center;gap:9px;font-size:.82rem; }
.fbadge-inner svg { color:var(--accent);flex-shrink:0; }
.fbadge-name { font-weight:600;color:var(--text); }
.fbadge-size { color:var(--muted);font-size:.74rem; }
.fbadge-remove { background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:2px 4px;transition:color .2s; }
.fbadge-remove:hover { color:var(--danger); }

/* CARD */
.card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden; }
.card-header { padding:14px 20px;background:var(--surface2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px; }
.card-title { display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.5px; }

/* OPTIONS */
.opts-body { padding:20px 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px; }
.opt-field { display:flex;flex-direction:column;gap:5px; }
.opt-field label { font-size:.78rem;font-weight:600;color:var(--muted); }
.opt-field select {
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  padding:9px 11px;border-radius:9px;font-size:.84rem;font-family:'Inter',sans-serif;
  outline:none;transition:border-color .2s;cursor:pointer;
}
.opt-field select:focus { border-color:var(--accent); }

/* PROGRESS */
.progress-wrap { display:none;padding:16px 22px; }
.progress-wrap.show { display:block; }
.prog-label { font-size:.78rem;color:var(--muted);margin-bottom:7px;display:flex;justify-content:space-between; }
.prog-bar { height:6px;border-radius:99px;background:var(--surface2);overflow:hidden; }
.prog-fill { height:100%;border-radius:99px;background:linear-gradient(90deg,#10b981,#34d399);width:0%;transition:width .35s; }

/* CONVERT BTN */
.btn-convert {
  width:100%;max-width:420px;margin:0 auto;padding:16px;border:none;border-radius:12px;
  background:linear-gradient(135deg,#10b981,#34d399);
  color:#fff;font-size:1rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 4px 22px rgba(16,185,129,.4);transition:var(--trans);
  font-family:'Inter',sans-serif;position:relative;overflow:hidden;
}
.btn-convert::before { content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .5s; }
.btn-convert:hover::before { left:100%; }
.btn-convert:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(16,185,129,.55); }
.btn-convert:disabled { opacity:.5;cursor:not-allowed;transform:none; }

/* Toast */
#toast { position:fixed;bottom:28px;right:28px;padding:12px 22px;border-radius:10px;font-size:.86rem;font-weight:600;color:#fff;box-shadow:0 6px 24px rgba(0,0,0,.3);transform:translateY(70px);opacity:0;transition:all .35s cubic-bezier(.175,.885,.32,1.275);z-index:9999; }
#toast.show { transform:translateY(0);opacity:1; }

@keyframes spin { to { transform:rotate(360deg); } }
.spin { animation:spin .8s linear infinite;display:inline-block; }

@media(max-width:600px) { .hero { padding:40px 16px 28px; } main { padding:0 14px 56px; } }

/* Back to Top Button styling */
#backToTopBtn {
    position: fixed;
    bottom: 95px;
    right: 30px;
    z-index: 999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(30, 41, 59, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}
#backToTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#backToTopBtn:hover {
    background: rgba(30, 41, 59, 1);
    transform: translateY(-3px);
}
#backToTopBtn {
    background: rgba(226, 232, 240, 0.85);
    border-color: #CBD5E1;
    color: #0F172A;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}
#backToTopBtn:hover {
    background: #FFFFFF;
}
body.dark-theme #backToTopBtn {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
body.dark-theme #backToTopBtn:hover {
    background: rgba(30, 41, 59, 1);
}



/* Synchronized Header Styles (adapted for pdf-tools.css) */
header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}
body.dark-theme header {
  background: rgba(10, 10, 10, 0.85);
  border-bottom: 1px solid #222;
}
.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px !important; /* Force override stretched padding */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}
.logo-group {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--surface); /* Pop out crisply in white */
  border: 1.5px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text);
  transition: all 0.3s ease;
}
.theme-toggle-btn:hover {
  transform: rotate(15deg) scale(1.05);
  border-color: var(--accent);
  color: var(--accent);
}
.theme-toggle-btn .sun-icon { display: none; }
.theme-toggle-btn .moon-icon { display: block; }

body.dark-theme .theme-toggle-btn .sun-icon {
  display: block;
  color: #f59e0b;
}
body.dark-theme .theme-toggle-btn .moon-icon { display: none; }

.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: var(--surface); /* Pop out crisply in white */
  color: var(--text);
  border: 1.5px solid var(--border);
  font-weight: 600;
  font-size: 14px;
  border-radius: 30px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Dark theme overrides for button backgrounds */
body.dark-theme .theme-toggle-btn,
body.dark-theme .btn-nav {
  background-color: var(--surface2);
}
.btn-nav:hover {
  background-color: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  transform: translateY(-2px);
}
.btn-nav svg {
  transition: transform 0.3s ease;
}
.btn-nav:hover svg {
  transform: translateX(-2px);
}

/* Footer links styling */
.footer-links a {
  color: #64748b !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color 0.3s ease !important;
}
.footer-links a:hover {
  color: #ffffff !important;
}
body:not(.dark-theme) .footer-links a {
  color: #475569 !important;
}
body:not(.dark-theme) .footer-links a:hover {
  color: #1e3c72 !important;
}