/* =============================================
   BookMyCA PDF Toolkit — Professional UI
   Inspired by ilovepdf.com / smallpdf.com
   ============================================= */

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --white:       #ffffff;
  --bg:          #f7f8fc;
  --bg2:         #eef0f7;
  --border:      #e3e6ef;
  --border-light:#f0f2f8;
  --text:        #1a1d2e;
  --text-2:      #4a5270;
  --text-3:      #8891b0;
  --accent:      #e8192c;
  --accent-h:    #c9111f;
  --blue:        #2563eb;
  --purple:      #7c3aed;
  --green:       #16a34a;
  --orange:      #d97706;
  --cyan:        #0891b2;
  --pink:        #db2777;
  --indigo:      #4338ca;
  --red:         #dc2626;
  --teal:        #0d9488;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --radius:      14px;
  --radius-sm:   8px;
  --transition:  .18s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; font-size: 15px; }

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* =============================================
   HEADER
   ============================================= */
.header { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.header-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.logo-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: linear-gradient(135deg, #e8192c, #ff6b35); }
.logo-icon svg { width: 20px; height: 20px; }
.logo-text { font-weight: 800; font-size: 1.1rem; color: var(--text); letter-spacing: -0.3px; }
.logo-text span { color: var(--accent); }

.nav-categories { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-btn { padding: 7px 16px; border: none; border-radius: 8px; background: transparent; color: var(--text-2); font-size: .85rem; font-weight: 500; cursor: pointer; transition: var(--transition); white-space: nowrap; font-family: inherit; }
.nav-btn:hover { background: var(--bg); color: var(--text); }
.nav-btn.active { background: #fff0f1; color: var(--accent); font-weight: 600; }

.mobile-menu-btn { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.mobile-menu-btn span { display: block; width: 22px; height: 2px; background: var(--text-2); border-radius: 2px; transition: var(--transition); }

/* =============================================
   HERO
   ============================================= */
.hero { background: linear-gradient(160deg, #fff5f5 0%, #fff 40%, #f5f7ff 100%); padding: 60px 24px 48px; text-align: center; border-bottom: 1px solid var(--border-light); position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -80px; right: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(232,25,44,.06) 0%, transparent 70%); pointer-events: none; }
.hero::after { content: ''; position: absolute; bottom: -60px; left: -60px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.05) 0%, transparent 70%); pointer-events: none; }
.hero-content { position: relative; z-index: 1; }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; background: #fff0f1; color: var(--accent); border: 1px solid #fcd5d8; border-radius: 100px; padding: 4px 14px; font-size: .78rem; font-weight: 600; margin-bottom: 20px; letter-spacing: .3px; }
.hero-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: var(--text); line-height: 1.2; letter-spacing: -1px; margin-bottom: 16px; }
.gradient-text { background: linear-gradient(135deg, var(--accent), #ff6b35); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-subtitle { font-size: 1rem; color: var(--text-2); max-width: 560px; margin: 0 auto 28px; line-height: 1.65; }
.hero-stats { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat-num { font-size: 1.5rem; font-weight: 800; color: var(--text); letter-spacing: -0.5px; }
.stat-label { font-size: .75rem; color: var(--text-3); font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }

/* =============================================
   TOOLS GRID
   ============================================= */
.main-content { max-width: 1280px; margin: 0 auto; padding: 40px 24px 60px; }
.section-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.section-title { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.section-count { font-size: .83rem; color: var(--text-3); font-weight: 400; }

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

/* ---- Tool Card ---- */
.tool-card { background: var(--white); border-radius: var(--radius); border: 1px solid var(--border); padding: 20px 18px 16px; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.tool-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-accent, var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }
.tool-card:hover { box-shadow: var(--shadow-md); border-color: transparent; transform: translateY(-2px); }
.tool-card:hover::before { transform: scaleX(1); }
.tool-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tool-card-top { display: flex; align-items: flex-start; justify-content: space-between; }

.tool-icon-wrap { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tool-icon-wrap svg { width: 22px; height: 22px; }

/* Icon color themes */
.icon-red    { background: #fff0f1; color: #dc2626; }
.icon-blue   { background: #eff6ff; color: #2563eb; }
.icon-purple { background: #f5f3ff; color: #7c3aed; }
.icon-green  { background: #f0fdf4; color: #16a34a; }
.icon-orange { background: #fffbeb; color: #d97706; }
.icon-cyan   { background: #ecfeff; color: #0891b2; }
.icon-pink   { background: #fdf2f8; color: #db2777; }
.icon-indigo { background: #eef2ff; color: #4338ca; }
.icon-teal   { background: #f0fdfa; color: #0d9488; }
.icon-amber  { background: #fffbeb; color: #b45309; }

.tool-badge { font-size: .62rem; font-weight: 700; letter-spacing: .4px; padding: 2px 8px; border-radius: 100px; background: linear-gradient(135deg, #e8192c, #ff6b35); color: white; text-transform: uppercase; }
.tool-card h3 { font-size: .88rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.tool-card p { font-size: .76rem; color: var(--text-2); line-height: 1.55; flex: 1; }
.tool-card-arrow { font-size: .73rem; color: var(--text-3); font-weight: 500; margin-top: 2px; transition: color var(--transition); }
.tool-card:hover .tool-card-arrow { color: var(--accent); }

/* Card accent by category */
.tool-card[data-category="organize"] { --card-accent: #7c3aed; }
.tool-card[data-category="optimize"] { --card-accent: #0891b2; }
.tool-card[data-category="convert"]  { --card-accent: #2563eb; }
.tool-card[data-category="edit"]     { --card-accent: #d97706; }
.tool-card[data-category="security"] { --card-accent: #dc2626; }

/* =============================================
   WORKSPACE
   ============================================= */
.tool-workspace { max-width: 820px; margin: 0 auto; padding: 32px 24px 60px; }
.workspace-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.back-btn { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--border); color: var(--text-2); padding: 8px 16px; border-radius: 8px; font-size: .85rem; font-weight: 500; cursor: pointer; transition: var(--transition); font-family: inherit; }
.back-btn:hover { background: var(--bg); color: var(--text); border-color: var(--text-3); }

.workspace-hero { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 28px; margin-bottom: 20px; display: flex; align-items: center; gap: 18px; }
.workspace-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.workspace-icon svg { width: 28px; height: 28px; }
.workspace-title { font-size: 1.35rem; font-weight: 800; color: var(--text); letter-spacing: -0.3px; margin-bottom: 5px; }
.workspace-desc { font-size: .88rem; color: var(--text-2); line-height: 1.55; margin: 0; }
.workspace-content { display: flex; flex-direction: column; gap: 14px; }

/* ---- Upload Zone ---- */
.upload-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 44px 32px; text-align: center; background: var(--white); cursor: pointer; transition: var(--transition); position: relative; }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); background: #fff8f8; }
.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-icon { width: 54px; height: 54px; margin: 0 auto 14px; background: #fff0f1; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.upload-icon svg { width: 26px; height: 26px; color: var(--accent); }
.upload-zone h4 { font-size: .98rem; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.upload-zone p { font-size: .83rem; color: var(--text-2); margin-bottom: 16px; }
.upload-btn-label { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: white; padding: 9px 20px; border-radius: 8px; font-size: .88rem; font-weight: 600; transition: var(--transition); pointer-events: none; }
.upload-zone:hover .upload-btn-label { background: var(--accent-h); }
.upload-formats { font-size: .73rem; color: var(--text-3); margin-top: 10px; }

/* ---- File List ---- */
.file-list { display: flex; flex-direction: column; gap: 7px; }
.file-item { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; }
.file-icon { width: 34px; height: 34px; background: #fff0f1; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.file-icon svg { width: 16px; height: 16px; color: var(--accent); }
.file-name { font-size: .86rem; font-weight: 600; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font-size: .76rem; color: var(--text-3); white-space: nowrap; }
.file-remove { width: 26px; height: 26px; border: none; background: none; cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-3); transition: var(--transition); flex-shrink: 0; }
.file-remove:hover { background: #fff0f1; color: var(--accent); }
.file-remove svg { width: 13px; height: 13px; }

/* ---- Options Panel ---- */
.options-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.options-panel h4 { font-size: .86rem; font-weight: 700; color: var(--text); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-light); }
.option-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.option-row + .option-row { border-top: 1px solid var(--border-light); }
.option-label { font-size: .82rem; color: var(--text-2); font-weight: 500; min-width: 110px; flex-shrink: 0; }
.option-input { flex: 1; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: .86rem; color: var(--text); background: var(--bg); transition: var(--transition); font-family: inherit; min-width: 0; }
.option-input:focus { outline: none; border-color: var(--accent); background: var(--white); }
.option-select { flex: 1; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: .86rem; color: var(--text); background: var(--bg); cursor: pointer; transition: var(--transition); font-family: inherit; }
.option-select:focus { outline: none; border-color: var(--accent); background: var(--white); }
.option-range { flex: 1; accent-color: var(--accent); }
.option-range-val { font-size: .82rem; color: var(--text-2); font-weight: 600; min-width: 45px; text-align: right; }

/* Quality / mode buttons */
.quality-btns, .split-mode-btns { display: flex; gap: 7px; flex: 1; }
.quality-btn, .split-mode-btn { flex: 1; padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-2); font-size: .8rem; font-weight: 600; cursor: pointer; transition: var(--transition); text-align: center; font-family: inherit; }
.quality-btn:hover, .split-mode-btn:hover { border-color: var(--accent); color: var(--accent); background: #fff8f8; }
.quality-btn.active { border-color: var(--accent); background: #fff0f1; color: var(--accent); }
.split-mode-btn.active { border-color: var(--blue); background: #eff6ff; color: var(--blue); }

/* Signature canvas */
.sign-canvas-wrap { border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--white); position: relative; }
#sign-canvas { display: block; width: 100%; height: 150px; cursor: crosshair; touch-action: none; }

/* ---- Action Bar ---- */
.action-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: white; padding: 11px 26px; border: none; border-radius: 10px; font-size: .93rem; font-weight: 700; cursor: pointer; transition: var(--transition); font-family: inherit; box-shadow: 0 4px 14px rgba(232,25,44,.22); }
.btn-primary:hover:not(:disabled) { background: var(--accent-h); box-shadow: 0 6px 20px rgba(232,25,44,.28); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary svg { width: 17px; height: 17px; }
.btn-secondary { display: inline-flex; align-items: center; gap: 7px; background: var(--white); color: var(--text-2); padding: 9px 18px; border: 1.5px solid var(--border); border-radius: 9px; font-size: .86rem; font-weight: 600; cursor: pointer; transition: var(--transition); font-family: inherit; }
.btn-secondary:hover { background: var(--bg); color: var(--text); border-color: var(--text-3); }
.btn-secondary svg { width: 15px; height: 15px; }

.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Progress Bar ---- */
.progress-wrap { display: none; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.progress-wrap.active { display: block; }
.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.progress-label { font-size: .82rem; font-weight: 500; color: var(--text-2); }
.progress-pct { font-size: .82rem; font-weight: 700; color: var(--accent); }
.progress-bar-bg { height: 8px; background: var(--bg2); border-radius: 100px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #ff6b35); border-radius: 100px; transition: width .3s ease; width: 0%; }

/* ---- Result Section ---- */
.result-section { display: none; }
.result-section.active { display: block; }
.result-card { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 1.5px solid #86efac; border-radius: var(--radius); padding: 18px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.result-icon { width: 42px; height: 42px; background: #22c55e; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.result-icon svg { width: 20px; height: 20px; color: white; }
.result-info { flex: 1; min-width: 180px; }
.result-title { font-size: .88rem; font-weight: 700; color: #15803d; margin-bottom: 2px; }
.result-detail { font-size: .78rem; color: #166534; }
.result-download { display: inline-flex; align-items: center; gap: 7px; background: #16a34a; color: white; padding: 9px 18px; border: none; border-radius: 9px; font-size: .86rem; font-weight: 700; cursor: pointer; transition: var(--transition); text-decoration: none; font-family: inherit; }
.result-download:hover { background: #15803d; transform: translateY(-1px); }
.result-download svg { width: 15px; height: 15px; }

/* ---- Toast ---- */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 11px; min-width: 260px; max-width: 360px; box-shadow: var(--shadow-lg); font-size: .86rem; font-weight: 500; animation: slideUp .28s cubic-bezier(.34,1.56,.64,1); color: white; }
.toast.success { background: #16a34a; }
.toast.error   { background: #dc2626; }
.toast.info    { background: #2563eb; }
.toast.warning { background: #d97706; }
.toast-icon svg { width: 17px; height: 17px; flex-shrink: 0; }
.toast-msg { flex: 1; }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* =============================================
   FOOTER
   ============================================= */
.footer { background: var(--text); color: rgba(255,255,255,.7); }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 44px 24px 28px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
.footer-brand .logo-text { font-size: 1.05rem; font-weight: 800; color: white; display: block; margin-bottom: 9px; }
.footer-brand p { font-size: .8rem; line-height: 1.6; max-width: 210px; }
.footer-col h4 { font-size: .76rem; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px; }
.footer-col a { display: block; font-size: .8rem; color: rgba(255,255,255,.6); text-decoration: none; padding: 3px 0; transition: color var(--transition); }
.footer-col a:hover { color: white; }
.footer-bottom { max-width: 1280px; margin: 0 auto; padding: 14px 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; }
.footer-bottom p { font-size: .76rem; color: rgba(255,255,255,.4); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .nav-categories { display: none; }
  .nav-categories.mobile-open { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 60px; left: 0; right: 0; background: var(--white); padding: 12px 16px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); z-index: 99; }
  .mobile-menu-btn { display: flex; }
  .hero { padding: 36px 16px 28px; }
  .tools-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .main-content { padding: 24px 16px 36px; }
  .tool-workspace { padding: 20px 14px 36px; }
  .workspace-hero { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
  .footer-inner { grid-template-columns: 1fr; gap: 20px; padding: 28px 16px 20px; }
  .footer-bottom { flex-direction: column; gap: 6px; }
  .option-label { min-width: 80px; }
  .result-card { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) { .tools-grid { grid-template-columns: 1fr 1fr; } .hero-title { font-size: 1.5rem; } }

/* =============================================
   WORKSPACE ACTIVE
   ============================================= */
body.workspace-active .footer { display: none; }