/* ══════════════════════════════════════════════════════════════════
   remove-blank-pages.html — page-specific styles (loaded after
   base.css). Font-face, reset, body, .container, .uz upload zone,
   the pulse/spin keyframes, and .rts-* related-tools-strip are
   covered by base.css. This page's UI (stats bar, thumbnail grid,
   detection-mode tabs, sensitivity slider, toast, etc.) is bespoke
   and not shared with other pages, so it all stays here.
   ══════════════════════════════════════════════════════════════════ */

/* Stats Bar */
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem}
.stat-card{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.25rem;text-align:center;box-shadow:0 2px 8px rgba(15,23,42,.05)}
.stat-num{font-size:1.75rem;font-weight:800;line-height:1}
.stat-label{font-size:.75rem;color:#64748b;font-weight:600;margin-top:.375rem;text-transform:uppercase;letter-spacing:.05em}

/* Thumbnail Grid */
.thumbs-wrap{background:#f8fafc;border:1px solid #e2e8f0;border-radius:1rem;padding:1.25rem;max-height:680px;overflow-y:auto}
.thumbs-wrap::-webkit-scrollbar{width:8px}
.thumbs-wrap::-webkit-scrollbar-track{background:#f1f5f9;border-radius:8px}
.thumbs-wrap::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}
.thumbs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}
.thumb-card{position:relative;background:#fff;border:2px solid #e2e8f0;border-radius:.875rem;overflow:hidden;cursor:pointer;transition:all .25s ease;box-shadow:0 1px 4px rgba(15,23,42,.07)}
.thumb-card:hover{border-color:#6366f1;transform:translateY(-2px);box-shadow:0 6px 16px rgba(99,102,241,.18)}
.thumb-card.will-remove{border-color:#ef4444;background:#fef2f2}
.thumb-card.will-remove .thumb-overlay{opacity:1}
.thumb-canvas{width:100%;height:auto;display:block}
.thumb-overlay{position:absolute;inset:0;background:rgba(239,68,68,.12);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.thumb-overlay svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.thumb-footer{padding:.5rem .625rem;background:#fff;border-top:1px solid #f1f5f9}
.thumb-page{font-size:.7rem;font-weight:700;color:#475569}
.thumb-badge{display:inline-flex;align-items:center;gap:.2rem;padding:.15rem .45rem;border-radius:9999px;font-size:.6rem;font-weight:700;letter-spacing:.02em;margin-top:.2rem}
.badge-blank{background:#fef2f2;color:#ef4444}
.badge-near{background:#fff7ed;color:#f97316}
.badge-scanner{background:#fefce8;color:#ca8a04}
.badge-keep{background:#f0fdf4;color:#16a34a}
.confidence-bar{height:3px;border-radius:9999px;margin-top:.375rem;background:#e2e8f0;overflow:hidden}
.confidence-fill{height:100%;border-radius:9999px;background:linear-gradient(90deg,#10b981,#3b82f6);transition:width .6s ease}

/* Controls Bar */
.ctrl-bar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:1.25rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;border-radius:.75rem;font-size:.8125rem;font-weight:700;cursor:pointer;border:none;transition:all .2s ease;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,#6366f1,#7c3aed);color:#fff;box-shadow:0 4px 12px rgba(99,102,241,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(99,102,241,.4)}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 12px rgba(239,68,68,.3)}
.btn-danger:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(239,68,68,.4)}
.btn-ghost{background:#fff;color:#475569;border:1.5px solid #e2e8f0}
.btn-ghost:hover{border-color:#6366f1;color:#3b82f6;background:#eff6ff}
.btn-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 12px rgba(16,185,129,.3)}
.btn-success:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,185,129,.4)}
.btn-lg{padding:.875rem 2rem;font-size:.9375rem;border-radius:1rem}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

/* Detection mode */
.mode-tabs{display:flex;background:#f1f5f9;border-radius:.75rem;padding:.25rem;gap:.25rem}
.mode-tab{flex:1;padding:.5rem .75rem;border-radius:.5rem;font-size:.75rem;font-weight:700;text-align:center;cursor:pointer;border:none;background:transparent;color:#64748b;transition:all .2s}
.mode-tab.active{background:#fff;color:#3b82f6;box-shadow:0 2px 6px rgba(15,23,42,.08)}

/* Sensitivity slider */
.slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:9999px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);outline:none}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #3b82f6;cursor:pointer;box-shadow:0 2px 8px rgba(99,102,241,.3);transition:transform .15s}
.slider::-webkit-slider-thumb:hover{transform:scale(1.2)}

/* Processing state */
.processing-state{text-align:center;padding:4rem 2rem}
.spinner{width:52px;height:52px;border:4px solid #e2e8f0;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 1.5rem}
.progress-steps{display:flex;flex-direction:column;gap:.75rem;text-align:left;max-width:300px;margin:1.5rem auto 0}
.pstep{display:flex;align-items:center;gap:.75rem;font-size:.875rem;color:#64748b;opacity:.4;transition:opacity .4s}
.pstep.active{opacity:1;color:#3b82f6;font-weight:600}
.pstep.done{opacity:1;color:#10b981}
.pstep-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}

/* Download section */
.download-card{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:2px solid #bbf7d0;border-radius:1.5rem;padding:2.5rem;text-align:center}

/* Toast */
#toast{position:fixed;bottom:1.5rem;right:1.5rem;background:#1e293b;color:#fff;padding:.875rem 1.5rem;border-radius:.875rem;font-size:.875rem;font-weight:600;box-shadow:0 8px 24px rgba(15,23,42,.25);transform:translateY(4rem);opacity:0;transition:all .35s cubic-bezier(.34,1.56,.64,1);z-index:9999;max-width:320px}
#toast.show{transform:translateY(0);opacity:1}

/* Info panel */
.info-panel{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}
.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.8125rem}
.info-key{color:#64748b;font-weight:500}
.info-val{font-weight:700;color:#1e293b}

/* Error card */
.error-card{background:#fef2f2;border:1.5px solid #fecaca;border-radius:1rem;padding:1.5rem;text-align:center;color:#dc2626}

/* Privacy banner */
.privacy-banner{display:flex;align-items:center;gap:.75rem;background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.2);border-radius:.875rem;padding:.875rem 1.25rem;font-size:.8125rem;color:#065f46;font-weight:600}

/* How It Works */
.section{padding:5rem 1.5rem}

/* Benefits */
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.benefit-card{background:#fff;border:1px solid #e8edf5;border-radius:1.25rem;padding:1.75rem;box-shadow:0 2px 12px rgba(15,23,42,.05);transition:all .3s}
.benefit-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(99,102,241,.1);border-color:#bfdbfe}
.benefit-icon{width:2.75rem;height:2.75rem;border-radius:.875rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}

/* FAQ - Card Layout */
.faq-item{background:#fff;border:1.5px solid #e8edf5;border-radius:1.125rem;margin-bottom:.75rem;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq-item:hover{border-color:#bfdbfe;box-shadow:0 4px 16px rgba(99,102,241,.08)}
.faq-item.faq-open{border-color:#bfdbfe;box-shadow:0 2px 12px rgba(99,102,241,.1)}
.faq-q{font-size:.9375rem;font-weight:700;color:#1e293b;cursor:pointer;display:flex;justify-content:space-between;align-items:start;gap:1rem;padding:1.25rem 1.5rem;width:100%;text-align:left;background:transparent;border:none;transition:background .15s}
.faq-q:hover{background:#f8faff}
.faq-a{font-size:.8875rem;color:#475569;line-height:1.78;display:none;padding:.125rem 1.5rem 1.25rem;border-top:1px solid #eff4ff;background:#f8faff}
.faq-a.open{display:block}
.faq-chevron{flex-shrink:0;transition:transform .25s;color:#94a3b8;margin-top:.1rem}
.faq-chevron.open{transform:rotate(180deg);color:#3b82f6}
/* Deep content grids */
.causes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
@media(max-width:480px){.causes-grid{grid-template-columns:1fr}}

@media(max-width:1024px){.benefits-grid{grid-template-columns:repeat(2,1fr)}.stats-bar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.thumbs-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.benefits-grid{grid-template-columns:1fr}.ctrl-bar{flex-direction:column;align-items:stretch}.mode-tabs{flex-wrap:nowrap}}
@media(max-width:480px){.stats-bar{grid-template-columns:repeat(2,1fr)}.thumbs-grid{grid-template-columns:repeat(3,1fr);gap:.625rem}}

/* Animate-pulse for badge dot (page-specific class name, not base.css's .animate-pulse) */
.pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
[hidden]{display:none!important}