/* ═══════════════════════════════════════════════════════════════
   Instant PNG to WebP Converter — Stylesheet
   Version: 1.0.0
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ─────────────────────────────────────── */
:root {
    --ipwc-primary:     #268EFE;
    --ipwc-primary-dk:  #1a7ae8;
    --ipwc-success:     #22c55e;
    --ipwc-error:       #ef4444;
    --ipwc-warning:     #f59e0b;
    --ipwc-bg:          #f8fafc;
    --ipwc-surface:     #ffffff;
    --ipwc-border:      #e2e8f0;
    --ipwc-text:        #0f172a;
    --ipwc-text-muted:  #64748b;
    --ipwc-radius:      16px;
    --ipwc-shadow:      0 4px 24px rgba(0,0,0,.07);
    --ipwc-transition:  .22s cubic-bezier(.4,0,.2,1);
}

/* Dark mode */
[data-theme="dark"] {
    --ipwc-bg:         #0f172a;
    --ipwc-surface:    #1e293b;
    --ipwc-border:     #334155;
    --ipwc-text:       #f1f5f9;
    --ipwc-text-muted: #94a3b8;
    --ipwc-shadow:     0 4px 24px rgba(0,0,0,.35);
}

/* ── Wrapper ────────────────────────────────────────────────────── */
.ipwc-wrapper {
    position:   relative;
    max-width:  900px;
    margin:     2rem auto;
    padding:    0 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color:      var(--ipwc-text);
    background: var(--ipwc-bg);
    transition: background var(--ipwc-transition), color var(--ipwc-transition);
}

/* ── Dark mode toggle ───────────────────────────────────────────── */
.ipwc-dark-toggle {
    position:   absolute;
    top:        0;
    right:      1rem;
    background: var(--ipwc-surface);
    border:     1px solid var(--ipwc-border);
    border-radius: 50%;
    width:      40px;
    height:     40px;
    display:    flex;
    align-items: center;
    justify-content: center;
    cursor:     pointer;
    color:      var(--ipwc-text-muted);
    transition: all var(--ipwc-transition);
    box-shadow: var(--ipwc-shadow);
}
.ipwc-dark-toggle:hover { color: var(--ipwc-primary); border-color: var(--ipwc-primary); }

/* ── Ad slot ────────────────────────────────────────────────────── */
.ipwc-ad-slot {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* ── Header ─────────────────────────────────────────────────────── */
.ipwc-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-top: 2rem;
}
.ipwc-header-icon {
    display:    inline-flex;
    background: linear-gradient(135deg, var(--ipwc-primary), var(--ipwc-primary-dk));
    color:      #fff;
    border-radius: 20px;
    padding:    14px;
    margin-bottom: 1rem;
    box-shadow: 0 8px 24px rgba(38,142,254,.35);
}
.ipwc-title {
    font-size:   2rem;
    font-weight: 800;
    margin:      0 0 .5rem;
    letter-spacing: -.5px;
    background:  linear-gradient(135deg, var(--ipwc-primary), var(--ipwc-primary-dk));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ipwc-subtitle {
    color:     var(--ipwc-text-muted);
    font-size: .95rem;
    margin:    0;
}

/* ── Controls bar ───────────────────────────────────────────────── */
.ipwc-controls-bar {
    display:          flex;
    align-items:      center;
    gap:              2rem;
    background:       var(--ipwc-surface);
    border:           1px solid var(--ipwc-border);
    border-radius:    var(--ipwc-radius);
    padding:          1rem 1.5rem;
    margin-bottom:    1.25rem;
    box-shadow:       var(--ipwc-shadow);
    flex-wrap:        wrap;
}
.ipwc-control-group {
    display:    flex;
    align-items: center;
    gap:        .75rem;
}
.ipwc-control-group label {
    font-size:   .875rem;
    font-weight: 600;
    color:       var(--ipwc-text-muted);
    white-space: nowrap;
}
.ipwc-slider {
    -webkit-appearance: none;
    appearance:  none;
    width:       130px;
    height:      6px;
    border-radius: 3px;
    background:  var(--ipwc-border);
    outline:     none;
    cursor:      pointer;
}
.ipwc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:       18px;
    height:      18px;
    border-radius: 50%;
    background:  var(--ipwc-primary);
    cursor:      pointer;
    box-shadow:  0 2px 8px rgba(38,142,254,.4);
    transition:  transform .1s;
}
.ipwc-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Mode toggle */
.ipwc-mode-toggle {
    display:    flex;
    border:     1px solid var(--ipwc-border);
    border-radius: 8px;
    overflow:   hidden;
}
.ipwc-mode-btn {
    padding:    .35rem .9rem;
    font-size:  .8rem;
    font-weight: 600;
    border:     none;
    background: transparent;
    color:      var(--ipwc-text-muted);
    cursor:     pointer;
    transition: all var(--ipwc-transition);
}
.ipwc-mode-btn.active {
    background: var(--ipwc-primary);
    color:      #fff;
}

/* ── Drop zone ──────────────────────────────────────────────────── */
.ipwc-drop-zone {
    border:         2px dashed var(--ipwc-border);
    border-radius:  var(--ipwc-radius);
    background:     var(--ipwc-surface);
    padding:        3rem 1.5rem;
    text-align:     center;
    cursor:         pointer;
    transition:     all var(--ipwc-transition);
    margin-bottom:  1.25rem;
    box-shadow:     var(--ipwc-shadow);
    outline:        none;
}
.ipwc-drop-zone:hover,
.ipwc-drop-zone:focus,
.ipwc-drop-zone.drag-over {
    border-color:   var(--ipwc-primary);
    background:     rgba(38,142,254,.04);
    transform:      scale(1.005);
}
.ipwc-drop-icon {
    color:        var(--ipwc-primary);
    margin-bottom: .75rem;
    transition:   transform var(--ipwc-transition);
}
.ipwc-drop-zone.drag-over .ipwc-drop-icon { transform: translateY(-6px) scale(1.1); }
.ipwc-drop-text {
    font-size:   1.1rem;
    font-weight: 600;
    margin:      0 0 .4rem;
}
.ipwc-drop-hint {
    font-size:  .8rem;
    color:      var(--ipwc-text-muted);
    margin:     0 0 1rem;
}
.ipwc-browse-btn {
    display:     inline-flex;
    background:  linear-gradient(135deg, var(--ipwc-primary), var(--ipwc-primary-dk));
    color:       #fff;
    border:      none;
    border-radius: 8px;
    padding:     .55rem 1.4rem;
    font-size:   .875rem;
    font-weight: 600;
    cursor:      pointer;
    transition:  all var(--ipwc-transition);
    box-shadow:  0 4px 12px rgba(38,142,254,.35);
}
.ipwc-browse-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(38,142,254,.45); }

/* ── Global progress ────────────────────────────────────────────── */
.ipwc-global-progress {
    background:    var(--ipwc-surface);
    border:        1px solid var(--ipwc-border);
    border-radius: var(--ipwc-radius);
    padding:       1rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow:    var(--ipwc-shadow);
}
.ipwc-progress-label {
    display:        flex;
    justify-content: space-between;
    font-size:      .85rem;
    font-weight:    600;
    color:          var(--ipwc-text-muted);
    margin-bottom:  .6rem;
}
.ipwc-progress-track {
    background:    var(--ipwc-border);
    border-radius: 99px;
    height:        8px;
    overflow:      hidden;
}
.ipwc-progress-bar {
    height:        100%;
    border-radius: 99px;
    background:    linear-gradient(90deg, var(--ipwc-primary), var(--ipwc-primary-dk));
    transition:    width .4s ease;
}

/* ── Results grid ───────────────────────────────────────────────── */
.ipwc-results {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   1rem;
    margin-bottom:         1.25rem;
}

/* ── File card ──────────────────────────────────────────────────── */
.ipwc-file-card {
    background:    var(--ipwc-surface);
    border:        1px solid var(--ipwc-border);
    border-radius: var(--ipwc-radius);
    padding:       1.1rem;
    display:       flex;
    flex-direction: column;
    gap:           .6rem;
    box-shadow:    var(--ipwc-shadow);
    transition:    transform var(--ipwc-transition), box-shadow var(--ipwc-transition);
    animation:     ipwc-fade-in .3s ease;
}
.ipwc-file-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.1); }
.ipwc-file-card.converting { border-color: var(--ipwc-primary); }
.ipwc-file-card.success    { border-color: var(--ipwc-success); }
.ipwc-file-card.error      { border-color: var(--ipwc-error); }

.ipwc-card-filename {
    font-size:      .825rem;
    font-weight:    700;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    color:          var(--ipwc-text);
}

/* Card progress bar */
.ipwc-card-progress {
    background:    var(--ipwc-border);
    border-radius: 99px;
    height:        5px;
    overflow:      hidden;
}
.ipwc-card-progress-bar {
    height:        100%;
    border-radius: 99px;
    background:    linear-gradient(90deg, var(--ipwc-primary), var(--ipwc-primary-dk));
    width:         0%;
    transition:    width .4s ease;
    animation:     ipwc-pulse-bar 1.2s ease-in-out infinite;
}
.ipwc-file-card.success .ipwc-card-progress-bar {
    background:  var(--ipwc-success);
    width:       100% !important;
    animation:   none;
}
.ipwc-file-card.error .ipwc-card-progress-bar {
    background:  var(--ipwc-error);
    width:       100% !important;
    animation:   none;
}

/* Stats row */
.ipwc-card-stats {
    display:    flex;
    justify-content: space-between;
    font-size:  .78rem;
    color:      var(--ipwc-text-muted);
}
.ipwc-savings-badge {
    font-size:   .75rem;
    font-weight: 700;
    color:       var(--ipwc-success);
    background:  rgba(34,197,94,.1);
    border-radius: 6px;
    padding:     2px 7px;
}
.ipwc-error-msg {
    font-size:  .78rem;
    color:      var(--ipwc-error);
}
.ipwc-status-text {
    font-size:   .8rem;
    font-weight: 600;
    color:       var(--ipwc-text-muted);
}
.ipwc-status-text.done { color: var(--ipwc-success); }

/* ── Card action buttons ─────────────────────────────────────────── */
.ipwc-card-actions { display: flex; gap: .5rem; }
.ipwc-btn-download {
    flex:        1;
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    gap:         .4rem;
    background:  linear-gradient(135deg, var(--ipwc-success), #16a34a);
    color:       #fff;
    border:      none;
    border-radius: 8px;
    padding:     .5rem .9rem;
    font-size:   .8rem;
    font-weight: 600;
    cursor:      pointer;
    text-decoration: none;
    transition:  all var(--ipwc-transition);
    box-shadow:  0 3px 10px rgba(34,197,94,.3);
}
.ipwc-btn-download:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(34,197,94,.45); }

/* ── Bulk actions ───────────────────────────────────────────────── */
.ipwc-bulk-actions {
    display:     flex;
    gap:         1rem;
    margin-bottom: 2rem;
    flex-wrap:   wrap;
}
.ipwc-btn-primary {
    display:     inline-flex;
    align-items: center;
    gap:         .5rem;
    background:  linear-gradient(135deg, var(--ipwc-primary), var(--ipwc-primary-dk));
    color:       #fff;
    border:      none;
    border-radius: 10px;
    padding:     .7rem 1.4rem;
    font-size:   .875rem;
    font-weight: 700;
    cursor:      pointer;
    transition:  all var(--ipwc-transition);
    box-shadow:  0 4px 14px rgba(38,142,254,.35);
}
.ipwc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(38,142,254,.5); }
.ipwc-btn-secondary {
    background:  transparent;
    color:       var(--ipwc-text-muted);
    border:      1px solid var(--ipwc-border);
    border-radius: 10px;
    padding:     .7rem 1.4rem;
    font-size:   .875rem;
    font-weight: 600;
    cursor:      pointer;
    transition:  all var(--ipwc-transition);
}
.ipwc-btn-secondary:hover { border-color: var(--ipwc-error); color: var(--ipwc-error); }

/* ── Admin panel ────────────────────────────────────────────────── */
.ipwc-admin-wrap h1 { margin-bottom: 1.5rem; }
.ipwc-admin-stats {
    display:    flex;
    gap:        1rem;
    flex-wrap:  wrap;
    margin-bottom: 1.5rem;
}
.ipwc-stat-card {
    flex:          1;
    min-width:     140px;
    background:    #fff;
    border:        1px solid #e2e8f0;
    border-radius: 12px;
    padding:       1.25rem 1rem;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           .3rem;
    box-shadow:    0 2px 10px rgba(0,0,0,.05);
}
.ipwc-stat-card.highlight { border-color: #268EFE; background: linear-gradient(135deg, #268EFE, #1a7ae8); color: #fff; }
.ipwc-stat-number { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.ipwc-stat-label  { font-size: .75rem; color: #64748b; font-weight: 600; }
.ipwc-stat-card.highlight .ipwc-stat-label { color: rgba(255,255,255,.8); }
.ipwc-admin-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap:                   1rem;
    margin-bottom:         1rem;
}
.ipwc-admin-card {
    background:    #fff;
    border:        1px solid #e2e8f0;
    border-radius: 12px;
    padding:       1.5rem;
    box-shadow:    0 2px 10px rgba(0,0,0,.05);
}
.ipwc-admin-card h2 { margin-top: 0; font-size: 1rem; }
/* Toggle switch */
.ipwc-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.ipwc-toggle input { opacity: 0; width: 0; height: 0; }
.ipwc-toggle-slider {
    position:   absolute;
    inset:      0;
    background: #cbd5e1;
    border-radius: 99px;
    cursor:     pointer;
    transition: .3s;
}
.ipwc-toggle-slider::before {
    content:    '';
    position:   absolute;
    width:      18px;
    height:     18px;
    background: #fff;
    border-radius: 50%;
    bottom:     3px;
    left:       3px;
    transition: .3s;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.ipwc-toggle input:checked + .ipwc-toggle-slider { background: #268EFE; }
.ipwc-toggle input:checked + .ipwc-toggle-slider::before { transform: translateX(20px); }

/* ── Keyframes ──────────────────────────────────────────────────── */
@keyframes ipwc-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ipwc-pulse-bar {
    0%,100% { opacity: 1; }
    50%      { opacity: .6; }
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ipwc-controls-bar { gap: 1rem; }
    .ipwc-global-stats { flex-direction: column; gap: .5rem; text-align: center; }
    .ipwc-results { grid-template-columns: 1fr; }
    .ipwc-title { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   SAVINGS DISPLAY — Added v1.0.1
   ═══════════════════════════════════════════════════════════════ */

/* ── Per-card savings badge (big green block) ─────────────────── */
.ipwc-savings-badge {
    display:         flex;
    align-items:     center;
    gap:             .75rem;
    background:      linear-gradient(135deg, rgba(34,197,94,.15), rgba(22,163,74,.1));
    border:          1px solid rgba(34,197,94,.35);
    border-radius:   10px;
    padding:         .65rem 1rem;
    margin-top:      .1rem;
}
.ipwc-savings-badge.ipwc-savings-larger {
    background: rgba(245,158,11,.1);
    border-color: rgba(245,158,11,.35);
}
.ipwc-savings-pct {
    font-size:   1.6rem;
    font-weight: 900;
    color:       var(--ipwc-success);
    line-height: 1;
    min-width:   3rem;
    text-align:  center;
}
.ipwc-savings-pct.ipwc-savings-neg {
    color: var(--ipwc-warning);
}
.ipwc-savings-label {
    font-size:   .8rem;
    font-weight: 700;
    color:       var(--ipwc-text);
    line-height: 1.4;
}
.ipwc-savings-abs {
    display:     inline-block;
    font-weight: 800;
    color:       var(--ipwc-success);
    background:  rgba(34,197,94,.12);
    border-radius: 4px;
    padding:     1px 6px;
    font-size:   .78rem;
}

/* ── Size comparison row ──────────────────────────────────────── */
.ipwc-size-row {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    width:       100%;
}
.ipwc-size-col {
    flex:        1;
    text-align:  center;
}
.ipwc-size-label {
    font-size:   .7rem;
    font-weight: 700;
    color:       var(--ipwc-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 2px;
}
.ipwc-size-value {
    font-size:   .9rem;
    font-weight: 800;
    color:       var(--ipwc-text);
}
.ipwc-size-arrow {
    font-size:  1rem;
    color:      var(--ipwc-primary);
    font-weight: 900;
    flex-shrink: 0;
}

/* ── Session counter bar ──────────────────────────────────────── */
.ipwc-session-counter {
    display:          flex;
    align-items:      center;
    gap:              1.5rem;
    background:       var(--ipwc-surface);
    border:           1px solid var(--ipwc-border);
    border-radius:    var(--ipwc-radius);
    padding:          .9rem 1.5rem;
    margin-bottom:    1rem;
    box-shadow:       var(--ipwc-shadow);
    flex-wrap:        wrap;
    animation:        ipwc-fade-in .3s ease;
}
.ipwc-session-item {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    font-size:   .875rem;
    color:       var(--ipwc-text-muted);
}
.ipwc-session-item svg { flex-shrink: 0; color: var(--ipwc-primary); }
.ipwc-session-item strong { color: var(--ipwc-text); }
.ipwc-session-highlight {
    background:    linear-gradient(135deg, rgba(38,142,254,.1), rgba(79,70,229,.08));
    border:        1px solid rgba(38,142,254,.25);
    border-radius: 8px;
    padding:       .4rem .9rem;
}
.ipwc-session-highlight strong {
    color:       var(--ipwc-primary);
    font-size:   1rem;
    font-weight: 900;
}