/* ==========================================================================
   Equalza — PDF Compress Tool CSS
   Core layout (body, html, fonts) handled by equalza-core.
   ========================================================================== */

/* ---------- CSS Variables ---------- */
:root{
  --bg:#f5f6f8;--surface:#fff;--border:#e2e5ea;--border2:#c8cdd6;
  --accent:#2563eb;--accent-h:#1d4ed8;--accent-light:#eff6ff;--accent-mid:#bfdbfe;
  --text:#111827;--text2:#4b5563;--text3:#9ca3af;
  --green:#059669;--green-bg:#ecfdf5;
  --red:#dc2626;--red-bg:#fef2f2;
  --orange:#d97706;--orange-bg:#fffbeb;
  --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --r:8px;--rl:12px;--rxl:16px;
}

/* ==========================================================================
   Tool Card Shell
   ========================================================================== */

.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rxl);box-shadow:var(--sh);overflow:hidden}

/* ==========================================================================
   Top Bar
   ========================================================================== */

.top-bar{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--bg)}
.btn-add{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;font-weight:600;font-size:13px;font-family:inherit;padding:8px 16px;border-radius:var(--r);border:none;cursor:pointer;box-shadow:0 2px 6px rgba(37,99,235,.25);transition:all .15s}
.btn-add:hover{background:var(--accent-h)}
.btn-add svg,.btn-clear svg,.btn-primary svg,.btn-ghost svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn-clear{display:inline-flex;align-items:center;gap:7px;background:var(--red-bg);color:var(--red);font-weight:600;font-size:13px;font-family:inherit;padding:8px 16px;border-radius:var(--r);border:1px solid #fecaca;cursor:pointer;transition:all .15s}
.btn-clear:hover{background:var(--red);color:#fff}

/* ==========================================================================
   Drop Zone
   ========================================================================== */

.drop-zone{border:2px dashed var(--border2);border-radius:var(--rl);margin:20px;padding:48px 24px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg)}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);background:var(--accent-light)}
.dz-icon{width:52px;height:52px;background:var(--accent-light);border:1px solid var(--accent-mid);border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.dz-icon svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dz-title{font-size:16px;font-weight:700;margin-bottom:6px}
.dz-sub{font-size:13px;color:var(--text2);margin-bottom:14px}
.btn-dz{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;font-weight:600;font-size:13px;font-family:inherit;padding:9px 20px;border-radius:var(--r);border:none;cursor:pointer}
.fmt-pills{display:flex;gap:5px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.fmt-pill{padding:2px 9px;border:1px solid var(--border);border-radius:4px;font-size:10px;font-weight:700;color:var(--text3);letter-spacing:.05em;text-transform:uppercase;background:var(--surface)}

/* ==========================================================================
   Settings Bar
   ========================================================================== */

.settings-bar{padding:16px 20px;border-bottom:1px solid var(--border);background:var(--bg)}
.level-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.level-label{font-size:13px;font-weight:600;color:var(--text)}
.level-pills{display:flex;gap:4px}
.level-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--text2);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s}
.level-pill svg{width:18px;height:18px}
.level-pill:hover{border-color:var(--accent);color:var(--accent)}
.level-pill.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 6px rgba(37,99,235,.25)}
.level-pill.active svg{color:#fff}
.level-desc{margin-top:10px;font-size:12px;color:var(--text3);font-style:italic}

/* ==========================================================================
   File List
   ========================================================================== */

.file-list{max-height:360px;overflow-y:auto;padding:0}
.file-item{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);transition:background .1s}
.file-item:hover{background:var(--bg)}
.file-icon{width:36px;height:36px;background:var(--red-bg);border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.file-icon svg{width:18px;height:18px;stroke:var(--red);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.file-info{flex:1;min-width:0}
.file-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-meta{font-size:11px;color:var(--text3);margin-top:2px;display:flex;align-items:center;gap:8px}
.file-status{display:flex;align-items:center;gap:6px;flex-shrink:0}
.file-badge{padding:3px 10px;border-radius:4px;font-size:11px;font-weight:700;white-space:nowrap}
.file-badge.pending{background:var(--bg);color:var(--text3);border:1px solid var(--border)}
.file-badge.processing{background:var(--accent-light);color:var(--accent);border:1px solid var(--accent-mid)}
.file-badge.done{background:var(--green-bg);color:var(--green);border:1px solid #a7f3d0}
.file-badge.error{background:var(--red-bg);color:var(--red);border:1px solid #fecaca}
.file-save-btn{display:inline-flex;align-items:center;gap:4px;background:var(--green);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:4px;border:none;cursor:pointer;text-decoration:none;transition:opacity .15s}
.file-save-btn:hover{opacity:.85}
.file-save-btn svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.file-remove{width:24px;height:24px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s;color:var(--text3);flex-shrink:0}
.file-remove:hover{background:var(--red-bg);color:var(--red)}
.file-remove svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Progress bar inside file item */
.file-progress{height:3px;background:var(--border);border-radius:2px;margin-top:4px;overflow:hidden}
.file-progress-bar{height:100%;background:var(--accent);border-radius:2px;width:0;transition:width .3s ease}

/* Size comparison */
.size-arrow{color:var(--green);font-weight:700;font-size:11px}
.size-new{color:var(--green);font-weight:700;font-size:11px}
.size-pct{color:var(--green);font-weight:700;font-size:10px;background:var(--green-bg);padding:1px 6px;border-radius:3px}

/* ==========================================================================
   Action Row
   ========================================================================== */

.action-row{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--border)}
.btn-primary{display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff;font-weight:600;font-size:13px;font-family:inherit;padding:8px 18px;border-radius:var(--r);border:none;cursor:pointer;transition:all .15s}
.btn-primary:hover{opacity:.88}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;background:var(--bg);color:var(--text2);font-weight:600;font-size:13px;font-family:inherit;padding:8px 18px;border-radius:var(--r);border:1px solid var(--border2);cursor:pointer;transition:all .15s}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--surface)}
.badge-circle{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;background:rgba(255,255,255,.9);color:var(--green);font-size:10px;font-weight:700;border-radius:9px;padding:0 4px}

/* ==========================================================================
   Privacy Banner
   ========================================================================== */

.privacy-banner{display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--green-bg);border-top:1px solid #a7f3d0;font-size:12px;color:var(--green);font-weight:500}
.privacy-banner svg{width:16px;height:16px;flex-shrink:0}

/* ==========================================================================
   Spinner
   ========================================================================== */

@keyframes spin{to{transform:rotate(360deg)}}
.spin{width:14px;height:14px;border:2px solid var(--accent-mid);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}

/* ==========================================================================
   Utility
   ========================================================================== */

.hidden{display:none!important}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media(max-width:600px){
  .drop-zone{margin:12px;padding:32px 16px}
  .level-group{flex-direction:column;align-items:flex-start}
  .file-item{padding:10px 14px;gap:8px}
  .file-meta{flex-wrap:wrap}
  .action-row{flex-direction:column;gap:8px}
  .action-row .btn-primary,.action-row .btn-ghost{width:100%;justify-content:center}
}