/* ============================================================
   TOOL PAGE — mobile-first
   ============================================================ */

.tool-page{padding:16px 16px 60px;max-width:640px;}

/* ZAROORI FIX (12 Sept, GENUINE) — "Back" aur breadcrumb, dono ek
   hi pankti (row) mein — pehle alag-alag, do pankti mein the, jisse
   FAALTU jagah jaati thi aur customer ko zyada scroll karna padta tha. */
.tool-top-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.tool-back-link{
  display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;
  color:var(--ink-soft);text-decoration:none;padding:5px 10px;margin:0;
  border-radius:8px;transition:.15s;flex-shrink:0;
}
.tool-back-link:hover{background:var(--paper-2);color:var(--ink);}
/* ZAROORI FIX (18 Sept, GENUINE) — Purana, lamba "Home / PDF Tools"
   wala pata hataa diya (customer ki maang par — iLovePDF/smallpdf
   jaisa). Ab bas ek saaf, chhota GHAR ka nishaan hai. Uspar
   hover/tap karne par woh ubhar aata hai, taaki pakka pata chale
   ki yeh dabaya ja sakta hai. */
.tool-home-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex-shrink:0;
  color:var(--ink-soft);border:1.5px solid var(--line);border-radius:9px;
  background:var(--paper);transition:background .15s, color .15s, border-color .15s;
}
.tool-home-icon:hover{background:var(--paper-2);color:var(--blue);border-color:var(--blue);}
.tool-home-icon:active{transform:scale(0.94);}

.tool-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.tool-head-icon{
  width:52px;height:52px;border-radius:14px;background:var(--blue-light);
  display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;
}
.tool-head h1{font-size:21px;font-weight:800;color:var(--navy);margin:0 0 4px;}
.tool-head p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.5;}

.tool-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;}

/* ============================================================
   ZAROORI FIX (18 Sept, GENUINE) — Customer ne screenshot ke saath
   dikhaya: NIGHT MODE mein, box ke chaaro taraf sab KAALA-hi-KAALA
   dikhta tha — na box alag se pehchana jaata tha, na uski outline
   ka kuch pata chalta tha.

   JAANCH SE SAABIT: dark mode mein page ka background (#0F1115) aur
   panel ka background (#16181D) ka CONTRAST sirf 1.06 tha (1.0 ka
   matlab bilkul EK JAISA!). Aur panel vs uski outline ka bhi sirf
   1.22. Itne kam farak par aankh kuch alag dekh hi nahi sakti.

   TEEN SUDHAAR:
   1. Panel ka background ab THODA UBHRA hua (halka, upar se neeche
      aata gradient) — page se saaf alag dikhta hai.
   2. Outline ab pehle se SAAF, aur uspar ek HALKI, DHEEMI CHAMAK
      (glow) chalti rehti hai — jo aaram se aati-jaati hai (3.5
      second mein ek baar), taaki dhyan to khinche par aankhon ko
      chubhe nahi.
   3. Panel ke neeche ek gehri parchhai (shadow) — isse woh page se
      "upar utha hua" lagta hai, dekhne mein achha lagta hai.
   ============================================================ */
html.dark-mode .tool-panel{
  background:linear-gradient(180deg, #1B1F27 0%, #15181E 100%);
  border:1.5px solid #333845;
  box-shadow:0 6px 22px rgba(0,0,0,0.5);
  animation:toolPanelGlow 3.5s ease-in-out infinite;
}
@keyframes toolPanelGlow{
  0%, 100% {
    border-color:#333845;
    box-shadow:0 6px 22px rgba(0,0,0,0.5), 0 0 0 0 rgba(242,120,47,0.0);
  }
  50% {
    border-color:#4A5265;
    box-shadow:0 6px 22px rgba(0,0,0,0.5), 0 0 16px 1px rgba(242,120,47,0.18);
  }
}

/* ZAROORI: Jinke device par "kam animation" ki setting chuni hai
   (accessibility), unke liye chamak band — bas saaf outline rahegi. */
@media (prefers-reduced-motion: reduce){
  html.dark-mode .tool-panel{animation:none;border-color:#4A5265;}
}

/* Upload box — premium, animated, iLovePDF/Smallpdf jaisa */
.upload-box{
  position:relative;overflow:hidden;
  border:2px dashed #C9D6F5;border-radius:18px;padding:26px 20px;text-align:center;
  cursor:pointer;transition:border-color .2s,background .2s,transform .15s;
  background:linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 100%);
}
.upload-box::before{
  content:'';position:absolute;top:-60%;left:-20%;width:60%;height:220%;
  background:linear-gradient(120deg, transparent, rgba(45,108,223,0.05), transparent);
  transform:rotate(18deg);pointer-events:none;
}
.upload-box:hover{border-color:var(--blue);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.upload-box.drag{border-color:var(--blue);background:var(--blue-light);transform:scale(1.01);}
.upload-box.filled{
  border-color:var(--green);border-style:solid;
  background:linear-gradient(180deg, #EFFBF3 0%, #FFFFFF 100%);
}
.upload-box.filled .upload-formats{color:var(--green);font-weight:700;}
.upload-size-warning{
  margin-top:16px;padding:11px 14px;background:#FFF4E5;border:1px solid #F2C97D;
  border-radius:10px;font-size:12.5px;font-weight:600;color:#8A5A00;line-height:1.5;text-align:left;
}

/* Processing ke dauran — panel ke chaaron taraf ek ghoomti hui, rang
   badalti border, taaki saaf mehsoos ho ki kaam ho raha hai */
#step-processing{
  position:relative;padding:2px;background:var(--paper);
  border-radius:16px;overflow:hidden;border:none;
}
#step-processing::before{
  content:'';position:absolute;inset:-50%;
  background:conic-gradient(from 0deg, var(--orange), var(--blue), var(--green), var(--orange));
  animation:processingBorderSpin 2.2s linear infinite;
}
#step-processing::after{
  content:'';position:absolute;inset:2px;background:#fff;border-radius:14px;
}
#step-processing .processing-anim{position:relative;z-index:1;padding:20px;}
@keyframes processingBorderSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
.upload-icon{
  font-size:0;width:64px;height:64px;margin:0 auto 16px;border-radius:50%;
  background:linear-gradient(135deg, var(--blue), #5B8DEF);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(45,108,223,0.28);
  animation:uploadFloat 2.6s ease-in-out infinite;
}
.upload-icon::after{content:'📥';font-size:28px;}
@keyframes uploadFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}
.upload-title{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:4px;}
.upload-sub{font-size:13px;color:var(--ink-soft);margin-bottom:20px;}
.upload-choose-btn{
  padding:14px 30px;font-size:14.5px;border-radius:12px;
  box-shadow:0 6px 16px rgba(242,120,47,0.3);
}
.upload-formats{
  font-size:11px;color:var(--ink-soft);margin-top:18px;font-weight:600;
  letter-spacing:0.02em;text-transform:uppercase;
}

/* ============================================================
   CIRCULAR ORBIT UPLOAD — documents ghoomte hain gol button ke around
   ============================================================ */
.upload-orbit-wrap{
  position:relative; width:130px; height:130px; margin:4px auto 14px;
  display:flex; align-items:center; justify-content:center;
}
.upload-orbit-ring{
  position:absolute; inset:0; animation:orbitSpin 14s linear infinite;
}
.orbit-doc{
  position:absolute; top:50%; left:50%; font-size:16px;
  transform:
    rotate(calc(var(--i) * 60deg))
    translate(60px)
    rotate(calc(var(--i) * -60deg));
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
@keyframes orbitSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
/* Icons khud seedhe rahen (na ghoomein), sirf circle mein safar karein */
.upload-orbit-ring .orbit-doc{ animation:counterSpin 14s linear infinite; }
@keyframes counterSpin{
  from{ transform:
    rotate(calc(var(--i) * 60deg)) translate(60px) rotate(calc(var(--i) * -60deg))
    rotate(0deg); }
  to{ transform:
    rotate(calc(var(--i) * 60deg)) translate(60px) rotate(calc(var(--i) * -60deg))
    rotate(-360deg); }
}

.upload-circle-btn{
  position:relative; z-index:2; width:84px; height:84px; border-radius:50%;
  background:linear-gradient(135deg, var(--orange), #F2A33D);
  border:4px solid #fff; box-shadow:0 8px 20px rgba(242,120,47,0.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; cursor:pointer; transition:transform .15s;
}
.upload-circle-btn:hover{ transform:scale(1.05); }
.upload-circle-btn:active{ transform:scale(0.96); }
.ucb-icon{ font-size:18px; }
.ucb-label{ font-size:12px; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:0.04em; }

/* File select hote hi — circle turant "andar khinch" jaane jaisa pulse */
.upload-circle-btn.suck-in{ animation:suckIn .45s ease; }
@keyframes suckIn{
  0%{ transform:scale(1); }
  35%{ transform:scale(0.82); box-shadow:0 4px 14px rgba(242,120,47,0.5); }
  65%{ transform:scale(1.12); }
  100%{ transform:scale(1); }
}

.upload-box .upload-title{margin-top:2px;}

/* ============================================================
   RESULT BURST — kaam poora hone par ek satisfying "phatne" wala effect
   ============================================================ */
.result-icon-wrap{ position:relative; display:inline-flex; align-items:center; justify-content:center; margin-bottom:6px; }
.result-icon-wrap .result-icon{ position:relative; z-index:2; }
.result-burst{ position:absolute; inset:0; pointer-events:none; }
.burst-particle{
  position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:50%;
  opacity:0; transform:translate(-50%,-50%);
}
.result-icon-wrap.burst-play .burst-particle{
  animation:burstOut .7s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes burstOut{
  0%{ opacity:1; transform:translate(-50%,-50%) rotate(var(--angle)) translateX(0) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--angle)) translateX(var(--dist)) scale(0.3); }
}
.result-icon-wrap.burst-play .result-icon{ animation:iconPopBig .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes iconPopBig{
  0%{ transform:scale(0.4); }
  60%{ transform:scale(1.3); }
  100%{ transform:scale(1); }
}

@media(max-width:400px){
  .upload-orbit-wrap{ width:112px; height:112px; }
  .orbit-doc{ transform: rotate(calc(var(--i) * 60deg)) translate(52px) rotate(calc(var(--i) * -60deg)); font-size:14px; }
  .upload-circle-btn{ width:72px; height:72px; }
  .ucb-icon{ font-size:16px; }
}

.file-list{margin-top:16px;display:flex;flex-direction:column;gap:8px;}
.file-row{
  display:flex;align-items:center;gap:12px;background:var(--paper-2);border-radius:10px;padding:12px 14px;
  transition:opacity .15s, border-color .15s;
}
.file-icon{font-size:20px;flex-shrink:0;}
.file-info{flex:1;min-width:0;}
.file-name{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-size{font-size:11.5px;color:var(--ink-soft);}
.file-remove{background:none;border:none;font-size:16px;color:var(--ink-soft);cursor:pointer;padding:6px;flex-shrink:0;}

/* ZAROORI (6 Sept): Merge PDF — drag-handle se file-rows ka order
   kheenchkar badalna (customer ki maang par). */
.file-row[draggable="true"]{cursor:grab;}
.file-row.dragging{opacity:0.4;}
.file-row.drag-over{border:2px dashed var(--blue);background:var(--blue-light);}
.file-drag-handle{font-size:16px;color:var(--ink-soft);flex-shrink:0;cursor:grab;}
.file-order-num{
  width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

.tool-actions{margin-top:18px;}
.btn-block{width:100%;padding:16px;font-size:15px;}

.panel-title{font-size:15px;font-weight:700;color:var(--navy);margin:0 0 14px;}
.option-row{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.option-card{
  display:flex;align-items:center;gap:10px;padding:14px 16px;border:1.5px solid var(--line);
  border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink);
}
.option-card:has(input:checked){border-color:var(--blue);background:var(--blue-light);}
.option-card input{accent-color:var(--blue);width:18px;height:18px;}

/* Compression % Slider — graphic, live label */
.compress-slider-wrap{padding:10px 6px 4px;}
.compress-percent-display{
  text-align:center;font-size:15px;font-weight:800;color:var(--ink);margin-bottom:14px;
}
.compress-percent-display span{color:var(--orange);font-size:22px;}
#compress-slider{
  width:100%;height:6px;border-radius:4px;-webkit-appearance:none;appearance:none;
  background:linear-gradient(90deg, var(--green) 0%, var(--orange) 50%, var(--red) 100%);
  outline:none;margin-bottom:18px;
}
#compress-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;
  border:3px solid var(--navy);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.25);
}
#compress-slider::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--navy);
  cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.25);
}
.compress-slider-labels{display:flex;justify-content:space-between;gap:8px;}
.compress-slider-labels span{
  flex:1;text-align:center;font-size:12px;font-weight:700;color:var(--ink-soft);
  padding:8px 4px;border-radius:8px;transition:background .15s,color .15s;
}
.compress-slider-labels span em{display:block;font-style:normal;font-weight:500;font-size:10.5px;margin-top:2px;color:var(--ink-soft);}
.compress-slider-labels span.active{background:var(--blue-light);color:var(--blue);}


.processing-anim{text-align:center;padding:26px 10px 10px;}
.processing-icon-wrap{position:relative;width:88px;height:88px;margin:0 auto 22px;}
.processing-icon{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:34px;z-index:2;
}
.processing-icon.pop{animation:iconPop .4s ease;}
@keyframes iconPop{0%{transform:scale(0.6);opacity:0.4;}60%{transform:scale(1.25);}100%{transform:scale(1);opacity:1;}}
.processing-ring{
  position:absolute;inset:0;border-radius:50%;
  border:4px solid var(--blue-light);border-top-color:var(--orange);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.progress-track{height:9px;background:var(--paper-2);border-radius:6px;overflow:hidden;margin-bottom:24px;}
.progress-fill{
  height:100%;width:0%;border-radius:6px;transition:width .3s ease;
  background:linear-gradient(90deg, var(--orange), var(--gold));
  background-size:200% 100%;animation:shimmer 1.4s linear infinite;
}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.stage-list{list-style:none;padding:0;margin:0;text-align:left;max-width:280px;margin:0 auto;}
.stage-item{
  display:flex;align-items:center;gap:12px;padding:9px 4px;font-size:13.5px;color:var(--ink-soft);
  opacity:0.4;transition:opacity .3s;
}
.stage-item.active{opacity:1;color:var(--ink);font-weight:600;}
.stage-item.done{opacity:1;color:var(--green);}
.stage-dot{
  width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:10px;transition:all .25s;
}
.stage-item.active .stage-dot{border-color:var(--orange);animation:dotPulse 1s ease-in-out infinite;}
.stage-item.done .stage-dot{background:var(--green);border-color:var(--green);}
.stage-item.done .stage-dot::after{content:'✓';color:#fff;font-weight:800;}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(242,120,47,0.4);}50%{box-shadow:0 0 0 6px rgba(242,120,47,0);}}

/* Result */
.result-box{text-align:center;padding:20px 10px;}
.result-icon{font-size:44px;margin-bottom:14px;}
.result-box h3{font-size:19px;font-weight:800;color:var(--navy);margin:0 0 10px;}
.result-stats{font-size:13.5px;color:var(--ink-soft);margin-bottom:22px;line-height:1.7;}
.result-box .btn{margin-bottom:10px;}

@media(min-width:640px){
  .tool-page{padding:44px 24px 80px;}
  .option-row{flex-direction:row;}
  .option-card{flex:1;justify-content:center;}
}

/* ============================================================
   LIMIT-REACHED SCREEN — PLANS INLINE (3 Sept)
   Jab customer ki daily limit khatam ho jaaye, seedhe wahin par
   saare paid plans (chhote card mein) dikhaate hain — ek extra
   "Pricing page par jaaiye" wala kadam nahi karna padta.
   ============================================================ */
.limit-plans-heading{
  text-align:center;font-size:13.5px;font-weight:700;color:var(--ink);
  margin:22px 0 12px;
}
.limit-plans-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:520px;margin:0 auto;
}
.limit-plan-card{
  border:1.5px solid var(--line);border-radius:12px;padding:14px 10px;text-align:center;background:var(--paper);
}
.limit-plan-card.featured{border-color:var(--orange);box-shadow:0 6px 16px -4px rgba(242,120,47,0.25);}
.limit-plan-name{font-size:12.5px;font-weight:700;color:var(--ink-soft);}
.limit-plan-price{font-size:19px;font-weight:800;color:var(--ink);margin-top:2px;}
.limit-plan-price span{font-size:10px;font-weight:600;color:var(--ink-soft);}
.limit-plan-sub{font-size:10.5px;color:var(--ink-soft);margin-top:2px;}
.limit-see-all-link{
  display:block;text-align:center;margin-top:16px;font-size:12.5px;font-weight:700;
  color:var(--blue);text-decoration:none;
}
@media(max-width:480px){
  .limit-plans-grid{grid-template-columns:1fr;max-width:260px;}
}

/* ============ SPLIT PDF — iLovePDF-jaisa polished design (10 Sept, NAYA) ============ */
.split-mode-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 18px;}
.split-mode-tab{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--paper-2);
  cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink);
  transition:all .15s ease;text-align:center;
}
.split-mode-tab:hover{border-color:var(--red,#E14B4B);transform:translateY(-2px);}
.split-mode-tab.active{background:var(--red,#E14B4B);border-color:var(--red,#E14B4B);color:#fff;box-shadow:0 8px 20px -8px rgba(225,75,75,0.5);}
.split-mode-tab.active small{color:rgba(255,255,255,0.85);}
.split-tab-icon{font-size:24px;line-height:1;}
.split-mode-tab small{display:block;font-weight:500;font-size:10.5px;color:var(--ink-soft);margin-top:2px;}

.split-range-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:10px;margin-bottom:10px;background:#fff;
}
.split-range-label{font-weight:800;font-size:12.5px;color:var(--red,#E14B4B);margin-right:4px;}
.split-range-row label{font-size:12px;color:var(--ink-soft);font-weight:600;}
.split-range-row input[type=number]{
  width:64px;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;
  font-size:14px;text-align:center;font-weight:700;
}
.split-range-remove{
  margin-left:auto;background:none;border:none;color:var(--red,#E14B4B);
  font-size:16px;cursor:pointer;font-weight:800;padding:4px 8px;
}
.split-add-range{
  width:100%;padding:11px;border:1.5px dashed var(--red,#E14B4B);border-radius:9px;
  background:transparent;color:var(--red,#E14B4B);font-weight:700;font-size:13px;
  cursor:pointer;font-family:inherit;margin-bottom:12px;transition:background .15s ease;
}
.split-add-range:hover{background:rgba(225,75,75,0.06);}
.split-merge-check{
  display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--ink);cursor:pointer;
}
.split-merge-check input{width:16px;height:16px;}
.split-mode-hint{font-size:11.5px;color:var(--ink-soft);margin:0 0 10px;}
/* ZAROORI (11 Sept, NAYA) — Asli page-thumbnails ki patti (strip) */
.split-thumbs-strip{
  display:flex;gap:10px;overflow-x:auto;padding:14px 4px;margin-bottom:14px;
  border-bottom:1.5px solid var(--line);
}
.split-thumb-item{flex-shrink:0;text-align:center;position:relative;}
.split-thumb-item img{
  width:70px;height:96px;object-fit:cover;border-radius:6px;
  border:2.5px solid var(--line);display:block;transition:border-color .15s ease, box-shadow .15s ease;
  background:#fff;
}
.split-thumb-item.in-range img{border-color:var(--red,#E14B4B);box-shadow:0 4px 12px -4px rgba(225,75,75,0.4);}
.split-thumb-item .split-thumb-num{
  font-size:10.5px;font-weight:700;color:var(--ink-soft);margin-top:4px;
}
.split-thumb-item.in-range .split-thumb-num{color:var(--red,#E14B4B);}
/* ZAROORI (11 Sept, NAYA) — Har thumbnail par "hataiye" (delete) button */
.split-thumb-item{position:relative;}
.split-thumb-delete{
  position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;
  background:#fff;border:1.5px solid var(--line);color:var(--red,#E14B4B);
  font-size:11px;font-weight:900;cursor:pointer;z-index:2;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px -1px rgba(0,0,0,0.25);
}
.split-thumb-delete:hover{background:var(--red,#E14B4B);color:#fff;}
.split-thumb-item.deleted img{opacity:0.25;filter:grayscale(1);border-color:var(--line)!important;box-shadow:none!important;}
.split-thumb-item.deleted .split-thumb-num{text-decoration:line-through;color:var(--ink-soft)!important;}
@media(max-width:480px){
  .split-thumb-item img{width:56px;height:78px;}
}
@media(max-width:480px){
  .split-mode-tabs{grid-template-columns:1fr;}
  .split-range-row{gap:6px;}
  .split-range-row input[type=number]{width:56px;}
}

/* ZAROORI (11 Sept, NAYA) — Split PDF ka password-popup modal —
   yeh classes (crop-modal-overlay, a4c-cancel/ok) kahin aur
   "photo-signature-resizer.ejs" / "aadhaar-a4-print.ejs" mein hi
   thi, "tool.css" (jo yahan istemal hoti hai) mein NAHI thi —
   isliye yahan (Split PDF ke andar) yeh popup TOOTA-PHOOTA
   (bina style ke) dikhta. Ab yahan bhi poori tarah define kar di. */
.crop-modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(15,27,60,0.72);z-index:9999;
  align-items:center;justify-content:center;padding:16px;
}
.crop-modal-overlay.open{display:flex;}
.crop-modal-box{
  background:var(--paper);border-radius:16px;max-width:400px;width:100%;
  max-height:92vh;overflow:auto;box-shadow:0 20px 50px -10px rgba(0,0,0,0.4);
}
.crop-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line);font-weight:800;font-size:15px;
}
.crop-modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--ink-soft);line-height:1;}
.crop-modal-hint{font-size:12px;color:var(--ink-soft);padding:12px 18px 0;margin:0;line-height:1.5;}
.crop-modal-btns{display:flex;gap:10px;padding:16px 18px 18px;}
.crop-modal-btns button{flex:1;padding:12px;border-radius:9px;font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit;}
.a4c-cancel{background:var(--paper-2);border:1.5px solid var(--line);color:var(--ink);}
.a4c-ok{background:var(--orange,#F2782F);border:none;color:#fff;}

/* ============================================================
   ZAROORI FIX (11 Sept, BAHUT ZAROORI, GENUINE BUG) — Yeh check
   karte waqt mila: ".protect-popup-overlay" aur ".protect-popup-box"
   (jo Protect PDF, Remove Background, Remove Pages, aur Edit PDF —
   CHAARO tools apne popups ke liye istemal karte hain) sirf
   "protect-pdf" ke apne <style> block ke ANDAR hi likhi thi. Matlab
   Remove-Background/Remove-Pages/Edit-PDF ke APNE pages par, yeh
   popup, is CSS ke BINA (bilkul plain, bina style ke) khulta tha —
   customer ko poori tarah TOOTA-PHOOTA dikhta.
   Ab yeh CSS yahan, SAAJHI (shared) "tool.css" mein daal di — isse
   CHAARO purane tools (jo pehle se hi TOOTE the) SAHI ho gaye, aur
   naya Split-PDF popup bhi sahi se dikhega.
   ============================================================ */
.protect-popup-overlay{
  position:fixed;inset:0;background:rgba(15,27,60,0.6);z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.protect-popup-box{
  background:var(--paper);border-radius:16px;padding:26px 22px;max-width:340px;width:100%;
  box-shadow:0 20px 50px -10px rgba(0,0,0,0.4);
}
/* ZAROORI: "pe-input" class kahin bhi define nahi thi — sirf inline
   style se hi kaam chal raha tha. Ab yahan bhi define kar di, taaki
   ye SAAJHI class kahin bhi (bina inline-style ke bhi) sahi dikhe. */
.pe-input{
  width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:9px;
  font-size:14px;font-family:inherit;
}