/* ============================================================
   Scan to PDF — Styles (with Adjustment Sliders)
   ============================================================ */

/* === Lib Status === */
.lib-status { margin-bottom: 1.5rem; }
.lib-loading { display:flex; align-items:center; gap:0.8rem; padding:0.8rem 1rem; background:rgba(88,166,255,0.06); border:1px solid rgba(88,166,255,0.15); border-radius:var(--radius-md); font-size:0.82rem; color:var(--text-secondary); }
.lib-ready { display:flex; align-items:center; gap:0.8rem; padding:0.8rem 1rem; background:rgba(63,185,80,0.06); border:1px solid rgba(63,185,80,0.15); border-radius:var(--radius-md); font-size:0.82rem; color:var(--accent-green); }
.lib-error { display:flex; align-items:center; gap:0.8rem; padding:0.8rem 1rem; background:rgba(248,81,73,0.06); border:1px solid rgba(248,81,73,0.15); border-radius:var(--radius-md); font-size:0.82rem; color:var(--accent-red); }
.mini-spinner { width:18px; height:18px; border:2px solid var(--border-color); border-top-color:var(--accent); border-radius:50%; animation:spin 0.7s linear infinite; flex-shrink:0; }

/* === Progress === */
.progress-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(6,8,15,0.9); backdrop-filter:blur(8px); z-index:9999; display:none; align-items:center; justify-content:center; }
.progress-overlay.active { display:flex; }
.progress-box { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:2rem; text-align:center; max-width:350px; width:90%; }
.progress-spinner { width:40px; height:40px; border:3px solid var(--border-color); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto 1rem; }
@keyframes spin { to { transform:rotate(360deg); } }
.progress-box h3 { font-size:0.95rem; margin-bottom:0.3rem; }
.progress-box p { font-size:0.78rem; color:var(--text-secondary); }

/* === Upload === */
.upload-row { display:flex; gap:0.8rem; align-items:stretch; }
.drop-zone { flex:1; border:2px dashed var(--border-color); border-radius:var(--radius-lg); padding:2rem 1.5rem; text-align:center; cursor:pointer; transition:all var(--transition); background:var(--bg-surface); }
.drop-zone:hover,.drop-zone.drag-over { border-color:var(--accent); background:var(--accent-glow); }
.drop-content i { font-size:2rem; color:var(--text-muted); display:block; margin-bottom:0.5rem; }
.drop-zone:hover .drop-content i { color:var(--accent); }
.drop-title { font-size:0.95rem; font-weight:600; margin-bottom:0.2rem; }
.drop-sub { font-size:0.82rem; color:var(--text-muted); }
.pick-btn { background:none; border:none; color:var(--accent); text-decoration:underline; cursor:pointer; font-size:inherit; font-family:inherit; padding:0; }
.drop-formats { font-size:0.7rem; color:var(--text-muted); margin-top:0.4rem; font-family:var(--font-mono); }
.camera-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem; padding:1.5rem 1.2rem; min-width:100px; background:var(--bg-surface); border:2px dashed var(--border-color); border-radius:var(--radius-lg); color:var(--accent-orange); font-size:0.82rem; font-weight:500; cursor:pointer; transition:all var(--transition); font-family:var(--font-body); }
.camera-btn i { font-size:1.8rem; }
.camera-btn:hover { border-color:var(--accent-orange); background:rgba(240,136,62,0.06); }

/* === Crop Editor === */
.crop-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.8rem; flex-wrap:wrap; gap:0.5rem; }
.crop-hint { font-size:0.75rem; color:var(--accent-orange); }
.section-title { font-size:0.95rem; font-weight:600; display:flex; align-items:center; gap:0.5rem; margin:0; }
.crop-container { position:relative; display:inline-block; width:100%; border:1px solid var(--border-color); border-radius:var(--radius-sm); overflow:hidden; background:#111; touch-action:none; max-height:70vh; }
.crop-container canvas { display:block; width:100%; height:auto; max-height:70vh; object-fit:contain; }
.crop-handle { position:absolute; width:28px; height:28px; background:var(--accent); border:3px solid #fff; border-radius:50%; cursor:grab; z-index:10; transform:translate(-50%,-50%); box-shadow:0 2px 8px rgba(0,0,0,0.5); touch-action:none; }
.crop-handle:active { cursor:grabbing; transform:translate(-50%,-50%) scale(1.2); }
.crop-overlay { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:5; }
.crop-actions { display:flex; gap:0.5rem; margin-top:1rem; }
.crop-actions .btn-primary-dark { flex:2; }
.crop-actions .btn-secondary-dark { flex:1; }

/* === Filter Buttons === */
.filter-btns { display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.filter-btn { padding:0.45rem 0.8rem; background:var(--bg-surface); border:1px solid var(--border-color); border-radius:var(--radius-sm); color:var(--text-secondary); font-size:0.78rem; font-weight:500; cursor:pointer; transition:all var(--transition); font-family:var(--font-body); display:flex; align-items:center; gap:0.3rem; }
.filter-btn:hover { border-color:var(--text-muted); color:var(--text-primary); }
.filter-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ===== ADJUSTMENT SLIDERS ===== */
.adjustments {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1rem;
}
.adj-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.adj-row:last-of-type { margin-bottom: 0.8rem; }
.adj-row label {
    min-width: 100px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}
.adj-row label i { font-size: 0.85rem; }
.adj-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.adj-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.adj-slider::-moz-range-thumb {
    width: 14px; height: 14px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    cursor: pointer;
}
.adj-val {
    min-width: 30px;
    text-align: right;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    color: var(--accent);
    font-weight: 600;
}
.btn-text-dark {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0;
    transition: color var(--transition);
}
.btn-text-dark:hover { color: var(--accent); }

/* === Page Options === */
.page-options { display:flex; gap:1rem; flex-wrap:wrap; }
.control-group { flex:1; min-width:130px; }
.input-sm { padding:0.45rem 0.7rem !important; font-size:0.82rem !important; }
.orient-btns { display:flex; gap:0.4rem; }
.orient-btn { flex:1; padding:0.45rem 0.6rem; background:var(--bg-surface); border:1px solid var(--border-color); border-radius:var(--radius-sm); color:var(--text-secondary); font-size:0.78rem; font-weight:500; cursor:pointer; transition:all var(--transition); font-family:var(--font-body); display:flex; align-items:center; justify-content:center; gap:0.3rem; }
.orient-btn:hover { border-color:var(--text-muted); }
.orient-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* === Pages Grid === */
.pages-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; flex-wrap:wrap; gap:0.5rem; }
.btn-sm { padding:0.35rem 0.7rem !important; font-size:0.75rem !important; }
.pages-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:0.8rem; margin-bottom:1.2rem; }
.page-card { position:relative; border:1px solid var(--border-color); border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-surface); cursor:grab; transition:all var(--transition); }
.page-card:hover { border-color:var(--accent); }
.page-card.dragging { opacity:0.5; border-style:dashed; }
.page-card.drag-over-card { border-color:var(--accent-green); border-width:2px; }
.page-thumb { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:#fff; }
.page-label { display:flex; justify-content:space-between; align-items:center; padding:0.3rem 0.5rem; font-size:0.7rem; color:var(--text-muted); }
.page-num { font-weight:600; font-family:var(--font-mono); }
.page-actions { display:flex; gap:0.2rem; }
.page-action-btn { width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.75rem; border-radius:4px; transition:all var(--transition); }
.page-action-btn:hover { color:var(--text-primary); background:var(--bg-card); }
.page-action-btn.del:hover { color:var(--accent-red); }
.export-row { display:flex; gap:0.5rem; }
.export-row .btn-primary-dark { flex:2; }
.export-row .btn-secondary-dark { flex:1; }

/* === Info Banner === */
.info-banner { display:flex; gap:0.8rem; padding:1rem 1.2rem; margin-top:1.5rem; background:rgba(63,185,80,0.06); border:1px solid rgba(63,185,80,0.15); border-radius:var(--radius-md); font-size:0.82rem; line-height:1.6; color:var(--text-secondary); }
.info-banner > i { color:var(--accent-green); font-size:1.1rem; flex-shrink:0; }

/* === Responsive === */
@media (max-width:600px) {
    .upload-row { flex-direction:column; }
    .camera-btn { flex-direction:row; min-width:auto; padding:1rem; }
    .camera-btn i { font-size:1.2rem; }
    .page-options { flex-direction:column; }
    .pages-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
    .export-row,.crop-actions { flex-direction:column; }
    .crop-handle { width:34px; height:34px; }
    .adj-row { flex-wrap:wrap; }
    .adj-row label { min-width:80px; }
}

/* === OCR Progress === */
.ocr-progress { display:flex; align-items:center; gap:0.8rem; margin:0.8rem 0; }
.ocr-progress-bar { flex:1; height:6px; background:var(--bg-surface); border-radius:3px; overflow:hidden; }
.ocr-bar-fill { height:100%; background:var(--accent); border-radius:3px; transition:width 0.3s; width:0%; }
.ocr-percent { font-size:0.78rem; font-family:var(--font-mono); color:var(--accent); min-width:35px; text-align:right; }
.ocr-status { font-size:0.78rem; color:var(--text-secondary); }

/* === Accent Button (Word) === */
.btn-accent-dark {
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.65rem 1.2rem; background:rgba(63,185,80,0.12);
    border:1px solid var(--accent-green); border-radius:var(--radius-sm);
    color:var(--accent-green); font-size:0.85rem; font-weight:600;
    cursor:pointer; transition:all var(--transition); font-family:var(--font-body);
}
.btn-accent-dark:hover { background:rgba(63,185,80,0.2); }

/* Export row 3 buttons */
.export-row .btn-primary-dark { flex:3; }
.export-row .btn-accent-dark { flex:3; }
.export-row .btn-secondary-dark { flex:1; }