/* ══ Hero theme — emerald/teal gradient ══ */
.comp-page {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #047857 100%);
    min-height: 65vh;
    padding: 28px 8px 64px;
    position: relative;
    overflow: hidden;
}
.comp-page::before {
    content:''; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size:40px 40px; pointer-events:none;
}
.comp-page::after {
    content:''; position:absolute;
    bottom:-2px; left:0; right:0; height:60px;
    background:#f8fafc;
    clip-path: ellipse(55% 100% at 50% 100%);
}

/* ══ Drop zone ══ */
.comp-drop {
    border:2.5px dashed rgba(255,255,255,0.3);
    border-radius:20px; padding:48px 24px;
    text-align:center; transition:all 0.25s;
    cursor:pointer;
    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(4px);
}
.comp-drop:hover, .comp-drop.drag-over {
    border-color:rgba(255,255,255,0.7);
    background:rgba(255,255,255,0.12);
    transform:scale(1.01);
}

/* ══ Compression level buttons ══ */
.level-btn {
    flex:1; padding:12px 8px;
    border-radius:12px; border:2px solid rgba(255,255,255,0.2);
    background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.7);
    font-size:13px; font-weight:700;
    cursor:pointer; transition:all 0.18s;
    text-align:center; font-family:inherit;
}
.level-btn:hover { background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.5); color:#fff; }
.level-btn.active { background:#fff; color:#065f46; border-color:#fff; box-shadow:0 4px 16px rgba(0,0,0,0.15); }
.level-btn .level-icon  { font-size:22px; display:block; margin-bottom:4px; }
.level-btn .level-name  { display:block; font-size:13px; font-weight:800; }
.level-btn .level-desc  { display:block; font-size:10px; margin-top:2px; opacity:0.8; font-weight:500; }

/* ══ File info card ══ */
.file-info-card {
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:14px; padding:16px 18px;
    display:flex; align-items:center; gap:14px;
    margin-bottom:16px; position:relative;
}
.file-pdf-icon {
    width:44px; height:52px; border-radius:8px;
    background:linear-gradient(135deg,#ef4444,#b91c1c);
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:900; color:#fff;
    flex-shrink:0; letter-spacing:0.5px;
    position:relative;
}
.file-pdf-icon::after {
    content:''; position:absolute; top:0; right:0;
    border-style:solid; border-width:0 8px 8px 0;
    border-color:transparent rgba(255,255,255,0.35) transparent transparent;
}
.file-fname  { font-size:14px; font-weight:700; color:#fff; }
.file-fsize  { font-size:12px; color:rgba(255,255,255,0.6); margin-top:2px; }
.file-remove-btn {
    width:28px; height:28px; border-radius:8px;
    background:rgba(255,255,255,0.15);
    color:rgba(255,255,255,0.7); border:none;
    cursor:pointer; display:flex; align-items:center;
    justify-content:center; font-size:14px;
    transition:all 0.15s; flex-shrink:0; margin-left:auto;
}
.file-remove-btn:hover { background:rgba(220,38,38,0.6); color:#fff; }

/* ══ Compress button ══ */
.comp-btn {
    width:100%; padding:15px;
    background:linear-gradient(135deg,#10b981,#059669);
    color:#fff; font-weight:800; font-size:16px;
    border-radius:14px; border:none; cursor:pointer;
    transition:all 0.2s; display:flex;
    align-items:center; justify-content:center; gap:10px;
    box-shadow:0 6px 20px rgba(16,185,129,0.4);
    font-family:inherit;
}
.comp-btn:hover  { background:linear-gradient(135deg,#059669,#047857); transform:translateY(-2px); box-shadow:0 10px 28px rgba(16,185,129,0.45); }
.comp-btn:active { transform:translateY(0); }
.comp-btn:disabled { background:#94a3b8; cursor:not-allowed; transform:none; box-shadow:none; }
.comp-btn .spin { width:15px;height:15px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.6s linear infinite;display:none; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ══ Progress ══ */
.prog-wrap { background:rgba(255,255,255,0.15); border-radius:999px; height:8px; overflow:hidden; }
.prog-bar  { height:100%; border-radius:999px; background:linear-gradient(90deg,#6ee7b7,#10b981); transition:width 0.4s ease; }

/* ══ Result card ══ */
.result-card {
    background:#fff; border-radius:20px;
    box-shadow:0 8px 32px rgba(0,0,0,0.1);
    overflow:hidden; display:none;
    animation:popIn 0.35s ease;
}
.result-card.show { display:block; }
@keyframes popIn { from{opacity:0;transform:scale(0.97)} to{opacity:1;transform:scale(1)} }

.result-header {
    background:linear-gradient(135deg,#064e3b,#065f46);
    padding:20px 24px;
    display:flex; align-items:center; gap:12px;
}
.result-title { font-size:16px; font-weight:800; color:#fff; }
.result-sub   { font-size:12px; color:rgba(255,255,255,0.6); margin-top:2px; }

/* ══ Size comparison bars ══ */
.size-compare { padding:20px 24px; }
.sc-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:#64748b; margin-bottom:6px; }
.sc-bar-wrap { background:#f1f5f9; border-radius:8px; height:32px; overflow:hidden; margin-bottom:4px; position:relative; }
.sc-bar { height:100%; border-radius:8px; display:flex; align-items:center; padding:0 12px; font-size:12px; font-weight:700; color:#fff; white-space:nowrap; transition:width 0.6s ease; position:relative; overflow:hidden; }
.sc-bar::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,0.15),transparent); }
.sc-bar.original   { background:linear-gradient(90deg,#94a3b8,#64748b); }
.sc-bar.compressed { background:linear-gradient(90deg,#10b981,#059669); }
.sc-size { font-size:11px; color:#64748b; text-align:right; }

/* ══ Savings badge ══ */
.savings-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:linear-gradient(135deg,#f0fdf4,#dcfce7);
    border:2px solid #86efac; border-radius:14px;
    padding:12px 20px; margin:16px 24px 0;
}
.savings-pct  { font-size:32px; font-weight:900; color:#16a34a; line-height:1; }
.savings-text { font-size:13px; color:#15803d; font-weight:600; }
.savings-sub  { font-size:11px; color:#4ade80; }

/* ══ Download button ══ */
.dl-comp-btn {
    display:inline-flex; align-items:center; gap:8px;
    background:#16a34a; color:#fff;
    font-weight:700; font-size:15px;
    padding:12px 32px; border-radius:12px;
    border:none; cursor:pointer; font-family:inherit;
    transition:background 0.2s;
}
.dl-comp-btn:hover { background:#15803d; }

/* ══ Quality note ══ */
.quality-note {
    background:#fffbeb; border:1px solid #fde68a;
    border-radius:10px; padding:10px 14px;
    font-size:12px; color:#92400e;
    display:flex; align-items:flex-start; gap:8px;
}