/* ============================================================================
   HEIC to JPG Converter - Tool Styles (scoped: .hc-)
   Relies on common.css for hero, content sections, FAQ, sidebar, ad slots.
   ============================================================================ */
:root { --hc-accent:#FF8C00; --hc-accent-dark:#e67e00; --hc-border:#e5e7eb; --hc-muted:#64748b; --hc-ink:#252525; }

.hc-card { background:#fff; border:1px solid var(--hc-border); border-radius:18px; box-shadow:0 10px 30px rgba(2,6,23,.06); overflow:hidden; }

/* Drop zone */
.hc-drop {
    margin:1.25rem; padding:2.5rem 1.5rem; border:2px dashed #cbd5e1; border-radius:14px;
    text-align:center; cursor:pointer; transition:all .15s; background:#f8fafc;
}
.hc-drop:hover, .hc-drop.drag { border-color:var(--hc-accent); background:rgba(255,140,0,.05); }
.hc-drop-icon { font-size:3rem; color:var(--hc-accent); }
.hc-drop h3 { margin:.6rem 0 .3rem; font-size:1.15rem; color:var(--hc-ink); }
.hc-drop p { color:var(--hc-muted); font-size:.9rem; margin:0 0 1rem; }
.hc-select-btn {
    border:none; background:linear-gradient(135deg,var(--hc-accent),var(--hc-accent-dark)); color:#fff;
    font-weight:700; font-size:.95rem; padding:.7rem 1.6rem; border-radius:10px; cursor:pointer;
    box-shadow:0 6px 16px rgba(255,140,0,.3);
}
.hc-select-btn:hover { transform:translateY(-1px); }

/* Settings bar */
.hc-settings { display:flex; flex-wrap:wrap; gap:1.25rem 2rem; align-items:center; padding:0 1.25rem 1.25rem; }
.hc-setting { display:flex; align-items:center; gap:.6rem; }
.hc-setting label { font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--hc-muted); }
.hc-select { border:1px solid var(--hc-border); border-radius:8px; padding:.45rem .7rem; font-family:inherit; background:#fff; font-size:.9rem; }
.hc-range { accent-color:var(--hc-accent); }
.hc-quality-val { font-weight:700; color:var(--hc-accent-dark); min-width:42px; }

/* Queue */
.hc-hidden { display:none; }
.hc-queue-section { border-top:1px solid var(--hc-border); padding:1.1rem 1.25rem; background:#f8fafc; }
.hc-queue-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.hc-queue-head h3 { margin:0; font-size:1rem; color:var(--hc-ink); }
.hc-queue-head .hc-q-actions { display:flex; gap:.5rem; }
.hc-btn {
    display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--hc-border); background:#fff;
    color:var(--hc-ink); font-weight:600; font-size:.82rem; padding:.45rem .8rem; border-radius:8px; cursor:pointer;
}
.hc-btn.primary { background:var(--hc-accent); color:#fff; border-color:var(--hc-accent); }
.hc-btn.primary:disabled { opacity:.55; cursor:not-allowed; }
.hc-btn:hover:not(:disabled) { border-color:var(--hc-accent); }

.hc-row { display:flex; align-items:center; gap:.9rem; background:#fff; border:1px solid var(--hc-border); border-radius:12px; padding:.7rem .9rem; margin-bottom:.6rem; }
.hc-thumb { width:48px; height:48px; border-radius:8px; overflow:hidden; background:#eef2f7; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hc-thumb img { width:100%; height:100%; object-fit:cover; }
.hc-thumb iconify-icon { font-size:1.4rem; color:#94a3b8; }
.hc-meta { flex:1; min-width:0; }
.hc-name { font-weight:600; color:var(--hc-ink); font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hc-sub { font-size:.78rem; color:var(--hc-muted); display:flex; gap:.5rem; align-items:center; margin-top:.2rem; }
.hc-arrow { color:#cbd5e1; }
.hc-out { font-weight:600; color:#16a34a; }
.hc-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.hc-status { display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; font-weight:600; }
.hc-status.processing { color:var(--hc-muted); }
.hc-status.done { color:#16a34a; }
.hc-status.error { color:#dc2626; }
.hc-dl, .hc-del { border:1px solid var(--hc-border); background:#fff; border-radius:8px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--hc-muted); }
.hc-dl:hover { color:var(--hc-accent-dark); border-color:var(--hc-accent); }
.hc-del:hover { color:#dc2626; border-color:#dc2626; }
.hc-spin { animation:hc-rot .8s linear infinite; }
@keyframes hc-rot { to { transform:rotate(360deg); } }

/* Toasts */
.hc-toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:.6rem; }
.hc-toast { display:flex; align-items:center; gap:.6rem; background:#1f2937; color:#fff; padding:.8rem 1.1rem; border-radius:10px; font-size:.88rem; box-shadow:0 10px 30px rgba(0,0,0,.2); transform:translateX(120%); opacity:0; transition:all .3s; }
.hc-toast.show { transform:translateX(0); opacity:1; }
.hc-toast.success { background:#16a34a; }
.hc-toast.error { background:#dc2626; }
.hc-toast iconify-icon { font-size:1.2rem; }

@media (max-width:560px) {
    .hc-settings { gap:1rem; }
    .hc-toast-container { left:16px; right:16px; bottom:16px; }
    .hc-toast { transform:translateY(120%); }
    .hc-toast.show { transform:translateY(0); }
}