/* ================================================================
   JPG to PNG Converter — Stylesheet v1.0.0
   Design: DM Sans + JetBrains Mono, #268EFE brand colour
   Matches: Instant Image Compressor visual language
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Variables ──────────────────────────────────────────────────── */
:root {
    --jpc-primary:      #268EFE;
    --jpc-primary-dk:   #1a7ae8;
    --jpc-primary-lt:   rgba(38,142,254,.12);
    --jpc-primary-glow: rgba(38,142,254,.28);
    --jpc-success:      #10b981;
    --jpc-success-lt:   rgba(16,185,129,.12);
    --jpc-error:        #ef4444;
    --jpc-warning:      #f59e0b;

    --jpc-bg:           #f0f4fa;
    --jpc-surface:      #ffffff;
    --jpc-surface-2:    #f7f9fd;
    --jpc-border:       #e1e8f0;
    --jpc-text:         #0d1526;
    --jpc-text-muted:   #5e7294;
    --jpc-text-light:   #94aec8;

    --jpc-radius:       18px;
    --jpc-radius-sm:    10px;
    --jpc-shadow-sm:    0 2px 8px rgba(13,21,38,.06);
    --jpc-shadow:       0 4px 24px rgba(13,21,38,.09);
    --jpc-ease:         cubic-bezier(.4,0,.2,1);
    --jpc-t:            .22s;
}

[data-theme="dark"] {
    --jpc-bg:         #0c1220;
    --jpc-surface:    #111827;
    --jpc-surface-2:  #162035;
    --jpc-border:     #1f2e45;
    --jpc-text:       #e4eeff;
    --jpc-text-muted: #7895b8;
    --jpc-text-light: #3d5470;
    --jpc-shadow-sm:  0 2px 8px rgba(0,0,0,.35);
    --jpc-shadow:     0 4px 24px rgba(0,0,0,.45);
}

/* ── Reset ──────────────────────────────────────────────────────── */
.jpc-wrapper *, .jpc-wrapper *::before, .jpc-wrapper *::after {
    box-sizing: border-box;
}

/* ── Wrapper ────────────────────────────────────────────────────── */
.jpc-wrapper {
    position:    relative;
    max-width:   860px;
    margin:      2.5rem auto;
    padding:     0 1rem 3rem;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color:       var(--jpc-text);
    background:  var(--jpc-bg);
    transition:  background var(--jpc-t) var(--jpc-ease), color var(--jpc-t) var(--jpc-ease);
}

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

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

/* ── Hero header ────────────────────────────────────────────────── */
.jpc-header {
    text-align:    center;
    padding:       3rem 0 1.25rem;
}
.jpc-header-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           72px;
    height:          72px;
    background:      linear-gradient(145deg, var(--jpc-primary), var(--jpc-primary-dk));
    border-radius:   22px;
    color:           #fff;
    margin-bottom:   1.1rem;
    box-shadow:      0 8px 32px var(--jpc-primary-glow);
    transition:      transform .3s var(--jpc-ease), box-shadow .3s var(--jpc-ease);
}
.jpc-header-icon:hover {
    transform:  translateY(-3px) rotate(4deg);
    box-shadow: 0 14px 42px var(--jpc-primary-glow);
}
.jpc-title {
    font-size:      2.2rem;
    font-weight:    800;
    margin:         0 0 .5rem;
    letter-spacing: -.6px;
    background:     linear-gradient(135deg, var(--jpc-primary) 20%, var(--jpc-primary-dk) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.jpc-subtitle {
    color:       var(--jpc-text-muted);
    font-size:   .95rem;
    margin:      0;
    line-height: 1.6;
}

/* ── Feature pills ──────────────────────────────────────────────── */
.jpc-format-pills {
    display:         flex;
    justify-content: center;
    gap:             .5rem;
    margin-bottom:   1.5rem;
    flex-wrap:       wrap;
}
.jpc-pill {
    font-size:      .75rem;
    font-weight:    600;
    background:     var(--jpc-primary-lt);
    color:          var(--jpc-primary);
    border:         1px solid rgba(38,142,254,.25);
    border-radius:  999px;
    padding:        .25rem .9rem;
    white-space:    nowrap;
}

/* ── Controls bar ───────────────────────────────────────────────── */
.jpc-controls-bar {
    display:       flex;
    align-items:   center;
    flex-wrap:     wrap;
    gap:           1.25rem;
    background:    var(--jpc-surface);
    border:        1.5px solid var(--jpc-border);
    border-radius: var(--jpc-radius);
    padding:       1rem 1.5rem;
    margin-bottom: 1.1rem;
    box-shadow:    var(--jpc-shadow-sm);
}
.jpc-control-group {
    display:     flex;
    align-items: center;
    gap:         .65rem;
    flex-wrap:   wrap;
}
.jpc-control-group--right { margin-left: auto; }
.jpc-control-label {
    font-size:   .825rem;
    font-weight: 700;
    color:       var(--jpc-text-muted);
    white-space: nowrap;
    display:     flex;
    align-items: center;
    gap:         .5rem;
}
.jpc-control-hint { font-size: .75rem; color: var(--jpc-text-light); }

/* Colour picker */
.jpc-colour-preview {
    display:       inline-block;
    width:         20px;
    height:        20px;
    border-radius: 4px;
    border:        2px solid var(--jpc-border);
    flex-shrink:   0;
    transition:    border-color var(--jpc-t);
}
.jpc-colour-input {
    width:         40px;
    height:        30px;
    padding:       2px;
    border:        1.5px solid var(--jpc-border);
    border-radius: var(--jpc-radius-sm);
    cursor:        pointer;
    background:    var(--jpc-surface);
    transition:    border-color var(--jpc-t);
}
.jpc-colour-input:hover { border-color: var(--jpc-primary); }

/* Limit badge */
.jpc-limit-badge, .jpc-recaptcha-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           .35rem;
    font-size:     .75rem;
    font-weight:   600;
    color:         var(--jpc-text-muted);
    background:    var(--jpc-surface-2);
    border:        1.5px solid var(--jpc-border);
    border-radius: 999px;
    padding:       .3rem .8rem;
}
.jpc-recaptcha-badge { color: var(--jpc-success); border-color: rgba(16,185,129,.3); background: var(--jpc-success-lt); }
.jpc-recaptcha-badge svg { color: var(--jpc-success); }

/* ── Drop zone ──────────────────────────────────────────────────── */
.jpc-drop-zone {
    position:      relative;
    border:        2px dashed var(--jpc-border);
    border-radius: var(--jpc-radius);
    background:    var(--jpc-surface);
    padding:       3.5rem 1.5rem;
    text-align:    center;
    cursor:        pointer;
    margin-bottom: 1.1rem;
    transition:    all var(--jpc-t) var(--jpc-ease);
    box-shadow:    var(--jpc-shadow-sm);
    overflow:      hidden;
}
.jpc-drop-zone::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     radial-gradient(ellipse 60% 50% at 50% 0%, var(--jpc-primary-lt), transparent);
    opacity:        0;
    transition:     opacity var(--jpc-t) var(--jpc-ease);
    pointer-events: none;
}
.jpc-drop-zone:hover::before,
.jpc-drop-zone:focus::before,
.jpc-drop-zone.drag-over::before { opacity: 1; }
.jpc-drop-zone:hover,
.jpc-drop-zone:focus,
.jpc-drop-zone.drag-over {
    border-color: var(--jpc-primary);
    box-shadow:   var(--jpc-shadow), 0 0 0 4px var(--jpc-primary-lt);
    outline:      none;
}

/* Animated rings */
.jpc-drop-illustration {
    position:    relative;
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    width:        110px;
    height:       110px;
    margin-bottom: 1rem;
}
.jpc-drop-rings { position: absolute; inset: 0; }
.jpc-ring {
    position:      absolute;
    border-radius: 50%;
    border:        1.5px solid var(--jpc-primary-lt);
    animation:     jpc-ring-pulse 2.6s ease-in-out infinite;
}
.jpc-ring-1 { inset: 8px;   animation-delay: 0s; }
.jpc-ring-2 { inset: -4px;  animation-delay: .5s; border-color: rgba(38,142,254,.07); }
.jpc-ring-3 { inset: -18px; animation-delay: 1s;  border-color: rgba(38,142,254,.04); }
@keyframes jpc-ring-pulse {
    0%,100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.07); opacity: .4; }
}
.jpc-drop-icon-wrap {
    position:   relative;
    z-index:    1;
    color:      var(--jpc-primary);
    transition: transform .3s var(--jpc-ease);
}
.jpc-drop-zone:hover .jpc-drop-icon-wrap,
.jpc-drop-zone.drag-over .jpc-drop-icon-wrap { transform: translateY(-6px) scale(1.08); }
.jpc-drop-text {
    font-size:   1.05rem;
    font-weight: 700;
    margin:      0 0 .4rem;
    color:       var(--jpc-text);
}
.jpc-drop-hint {
    font-size:  .8rem;
    color:      var(--jpc-text-muted);
    margin:     0 0 1.2rem;
}
.jpc-browse-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           .4rem;
    background:    linear-gradient(135deg, var(--jpc-primary), var(--jpc-primary-dk));
    color:         #fff;
    border:        none;
    border-radius: var(--jpc-radius-sm);
    padding:       .6rem 1.6rem;
    font-size:     .875rem;
    font-weight:   700;
    cursor:        pointer;
    font-family:   inherit;
    transition:    all var(--jpc-t) var(--jpc-ease);
    box-shadow:    0 4px 14px var(--jpc-primary-glow);
}
.jpc-browse-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px var(--jpc-primary-glow); }

/* ── Global progress ────────────────────────────────────────────── */
.jpc-global-progress {
    background:    var(--jpc-surface);
    border:        1.5px solid var(--jpc-border);
    border-radius: var(--jpc-radius);
    padding:       1rem 1.5rem;
    margin-bottom: 1.1rem;
    box-shadow:    var(--jpc-shadow-sm);
}
.jpc-gp-header {
    display:         flex;
    justify-content: space-between;
    font-size:       .825rem;
    font-weight:     700;
    color:           var(--jpc-text-muted);
    margin-bottom:   .6rem;
}
.jpc-gp-count {
    font-family: 'JetBrains Mono', monospace;
    color:       var(--jpc-primary);
}
.jpc-progress-track {
    height:        8px;
    background:    var(--jpc-border);
    border-radius: 999px;
    overflow:      hidden;
}
.jpc-progress-bar {
    height:        100%;
    border-radius: 999px;
    background:    linear-gradient(90deg, var(--jpc-primary), var(--jpc-primary-dk));
    transition:    width .4s var(--jpc-ease);
    position:      relative;
    overflow:      hidden;
}
.jpc-progress-bar::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    animation:  jpc-shimmer 1.5s infinite;
}
@keyframes jpc-shimmer { from{transform:translateX(-100%)}to{transform:translateX(200%)} }

/* ── Session counter ────────────────────────────────────────────── */
.jpc-session-counter {
    display:       flex;
    align-items:   center;
    gap:           .75rem;
    background:    var(--jpc-surface);
    border:        1.5px solid var(--jpc-border);
    border-radius: var(--jpc-radius);
    padding:       .8rem 1.4rem;
    margin-bottom: 1rem;
    font-size:     .85rem;
    color:         var(--jpc-text-muted);
    box-shadow:    var(--jpc-shadow-sm);
    animation:     jpc-fade-in .3s var(--jpc-ease);
    flex-wrap:     wrap;
}
.jpc-sc-item { display: flex; align-items: center; gap: .45rem; }
.jpc-sc-item svg { color: var(--jpc-primary); flex-shrink: 0; }
.jpc-sc-item strong { color: var(--jpc-text); font-family: 'JetBrains Mono', monospace; }
.jpc-sc-divider { width: 1px; height: 20px; background: var(--jpc-border); }

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

/* ── File card ──────────────────────────────────────────────────── */
.jpc-file-card {
    background:    var(--jpc-surface);
    border:        1.5px solid var(--jpc-border);
    border-radius: var(--jpc-radius);
    padding:       1.2rem;
    display:       flex;
    flex-direction: column;
    gap:           .7rem;
    box-shadow:    var(--jpc-shadow-sm);
    transition:    transform var(--jpc-t), box-shadow var(--jpc-t), border-color var(--jpc-t);
    animation:     jpc-fade-in .3s var(--jpc-ease);
}
.jpc-file-card:hover     { transform: translateY(-2px); box-shadow: var(--jpc-shadow); }
.jpc-file-card.converting{ border-color: var(--jpc-primary); }
.jpc-file-card.success   { border-color: var(--jpc-success); }
.jpc-file-card.error     { border-color: var(--jpc-error); }

/* Card header */
.jpc-card-head { display: flex; align-items: flex-start; gap: .6rem; }
.jpc-card-badge {
    flex-shrink:    0;
    font-family:    'JetBrains Mono', monospace;
    font-size:      .63rem;
    font-weight:    600;
    background:     var(--jpc-primary-lt);
    color:          var(--jpc-primary);
    border:         1px solid rgba(38,142,254,.2);
    border-radius:  5px;
    padding:        2px 7px;
    text-transform: uppercase;
}
.jpc-card-badge.png-badge {
    background:  var(--jpc-success-lt);
    color:       var(--jpc-success);
    border-color: rgba(16,185,129,.25);
}
.jpc-card-filename {
    font-size:     .825rem;
    font-weight:   700;
    color:         var(--jpc-text);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    flex:          1;
}
.jpc-card-status { font-size: .78rem; font-weight: 600; color: var(--jpc-text-muted); }
.jpc-card-status.done { color: var(--jpc-success); }
.jpc-card-status.fail { color: var(--jpc-error); }

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

/* Size row */
.jpc-size-row { display: flex; align-items: center; gap: .5rem; }
.jpc-size-block { flex: 1; text-align: center; }
.jpc-size-label {
    font-size:      .67rem;
    font-weight:    700;
    color:          var(--jpc-text-light);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom:  2px;
}
.jpc-size-value {
    font-size:   .9rem;
    font-weight: 800;
    color:       var(--jpc-text);
    font-family: 'JetBrains Mono', monospace;
}
.jpc-size-arrow { font-size: 1.1rem; color: var(--jpc-primary); font-weight: 900; flex-shrink: 0; }

/* Conversion result badge */
.jpc-result-banner {
    display:       flex;
    align-items:   center;
    gap:           .8rem;
    background:    var(--jpc-success-lt);
    border:        1.5px solid rgba(16,185,129,.28);
    border-radius: var(--jpc-radius-sm);
    padding:       .7rem 1rem;
}
.jpc-result-banner.neutral {
    background:   rgba(38,142,254,.08);
    border-color: rgba(38,142,254,.2);
}
.jpc-result-icon {
    font-size:   1.6rem;
    line-height: 1;
    flex-shrink: 0;
}
.jpc-result-info { flex: 1; }
.jpc-result-title { font-size: .78rem; font-weight: 700; color: var(--jpc-text); display: block; margin-bottom: 2px; }
.jpc-result-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size:   .7rem;
    font-weight: 500;
    color:       var(--jpc-success);
    background:  rgba(16,185,129,.15);
    border-radius: 4px;
    padding:     1px 6px;
    display:     inline-block;
}
.jpc-result-banner.neutral .jpc-result-sub { color: var(--jpc-primary); background: var(--jpc-primary-lt); }

/* Error msg */
.jpc-card-error { font-size: .78rem; color: var(--jpc-error); font-weight: 600; }

/* Download button */
.jpc-btn-download {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .4rem;
    width:           100%;
    background:      linear-gradient(135deg, var(--jpc-success), #059669);
    color:           #fff;
    border:          none;
    border-radius:   var(--jpc-radius-sm);
    padding:         .55rem;
    font-size:       .82rem;
    font-weight:     700;
    cursor:          pointer;
    text-decoration: none;
    font-family:     inherit;
    transition:      all var(--jpc-t) var(--jpc-ease);
    box-shadow:      0 3px 10px rgba(16,185,129,.28);
}
.jpc-btn-download:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,185,129,.42); color: #fff; }

/* ── Bulk actions ────────────────────────────────────────────────── */
.jpc-bulk-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; margin-bottom: 1.5rem; }
.jpc-btn-primary {
    display:       inline-flex;
    align-items:   center;
    gap:           .5rem;
    background:    linear-gradient(135deg, var(--jpc-primary), var(--jpc-primary-dk));
    color:         #fff;
    border:        none;
    border-radius: var(--jpc-radius-sm);
    padding:       .7rem 1.5rem;
    font-size:     .875rem;
    font-weight:   700;
    cursor:        pointer;
    font-family:   inherit;
    transition:    all var(--jpc-t) var(--jpc-ease);
    box-shadow:    0 4px 14px var(--jpc-primary-glow);
}
.jpc-btn-primary:hover    { transform: translateY(-2px); box-shadow: 0 8px 22px var(--jpc-primary-glow); }
.jpc-btn-primary:disabled { opacity: .6; transform: none; cursor: wait; }
.jpc-btn-secondary {
    background:    transparent;
    color:         var(--jpc-text-muted);
    border:        1.5px solid var(--jpc-border);
    border-radius: var(--jpc-radius-sm);
    padding:       .7rem 1.5rem;
    font-size:     .875rem;
    font-weight:   700;
    cursor:        pointer;
    font-family:   inherit;
    transition:    all var(--jpc-t) var(--jpc-ease);
}
.jpc-btn-secondary:hover { border-color: var(--jpc-error); color: var(--jpc-error); }

/* ── Security note ──────────────────────────────────────────────── */
.jpc-security-note {
    display:     flex;
    align-items: flex-start;
    gap:         .4rem;
    font-size:   .77rem;
    color:       var(--jpc-text-light);
    margin-top:  .5rem;
    line-height: 1.5;
}
.jpc-security-note svg { flex-shrink: 0; margin-top: 1px; }

/* ── Admin styles ────────────────────────────────────────────────── */
.jpc-admin-wrap h1 { margin-bottom: 1.25rem; }
.jpc-stats-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.jpc-stat-card {
    flex: 1; min-width: 130px;
    background: #fff; border: 1px solid #e1e8f0; border-radius: 12px;
    padding: 1.2rem 1rem; display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: .3rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.jpc-stat-card.jpc-highlight { background: linear-gradient(135deg,#268EFE,#1a7ae8); border-color:#268EFE; color:#fff; }
.jpc-stat-num { font-size: 1.55rem; font-weight: 800; line-height: 1; }
.jpc-stat-lbl { font-size: .72rem; color: #8fa3be; font-weight: 600; }
.jpc-stat-card.jpc-highlight .jpc-stat-lbl { color: rgba(255,255,255,.75); }
.jpc-admin-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); gap: 1rem; margin-bottom: 1rem; }
.jpc-admin-card { background: #fff; border: 1px solid #e1e8f0; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.jpc-admin-card h2 { margin-top: 0; font-size: 1rem; }
.jpc-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.jpc-toggle input { opacity: 0; width: 0; height: 0; }
.jpc-toggle-slider { position: absolute; inset: 0; background: #e1e8f0; border-radius: 999px; cursor: pointer; transition: background .25s; }
.jpc-toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; bottom: 3px; left: 3px; transition: transform .25s; box-shadow: 0 1px 5px rgba(0,0,0,.2); }
.jpc-toggle input:checked + .jpc-toggle-slider { background: #268EFE; }
.jpc-toggle input:checked + .jpc-toggle-slider::before { transform: translateX(20px); }

/* ── Toast ──────────────────────────────────────────────────────── */
.jpc-toast {
    position:    fixed;
    bottom:      24px;
    right:       24px;
    background:  #0d1526;
    color:       #fff;
    border-radius: 12px;
    padding:     .8rem 1.3rem;
    font-size:   .845rem;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    box-shadow:  0 8px 30px rgba(0,0,0,.25);
    opacity:     0;
    transform:   translateY(10px);
    transition:  all .28s var(--jpc-ease);
    z-index:     99999;
    max-width:   360px;
}
.jpc-toast.show    { opacity: 1; transform: translateY(0); }
.jpc-toast.error   { background: var(--jpc-error); }
.jpc-toast.success { background: var(--jpc-success); }

/* ── Keyframes ──────────────────────────────────────────────────── */
@keyframes jpc-fade-in { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)} }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .jpc-title         { font-size: 1.7rem; }
    .jpc-controls-bar  { gap: 1rem; }
    .jpc-results       { grid-template-columns: 1fr; }
    .jpc-session-counter { flex-direction: column; align-items: flex-start; }
    .jpc-sc-divider    { display: none; }
    .jpc-control-group--right { margin-left: 0; }
}