/* ================================================================
   Instant Image Compressor — v1.2.0
   Original design restored: DM Sans + JetBrains Mono, #268EFE
   ================================================================ */

@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');

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

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

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

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

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

/* ── Wrapper ────────────────────────────────────────────────────── */
.iic-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(--iic-text);
    background:  var(--iic-bg);
    transition:  background var(--iic-t) var(--iic-ease), color var(--iic-t) var(--iic-ease);
}

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

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

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

/* ── Format pills ───────────────────────────────────────────────── */
.iic-format-pills {
    display:         flex;
    justify-content: center;
    gap:             .5rem;
    margin-bottom:   1.5rem;
    flex-wrap:       wrap;
}
.iic-pill {
    font-family:    'JetBrains Mono', monospace;
    font-size:      .72rem;
    font-weight:    500;
    letter-spacing: .06em;
    background:     var(--iic-primary-lt);
    color:          var(--iic-primary);
    border:         1px solid rgba(38,142,254,.25);
    border-radius:  999px;
    padding:        .25rem .85rem;
}

/* ── Controls bar ───────────────────────────────────────────────── */
.iic-controls-bar {
    display:       flex;
    align-items:   center;
    flex-wrap:     wrap;
    gap:           1.5rem;
    background:    var(--iic-surface);
    border:        1.5px solid var(--iic-border);
    border-radius: var(--iic-radius);
    padding:       1.1rem 1.5rem;
    margin-bottom: 1.1rem;
    box-shadow:    var(--iic-shadow-sm);
}
.iic-control-group {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    flex-wrap:   wrap;
}
.iic-control-label {
    font-size:   .825rem;
    font-weight: 700;
    color:       var(--iic-text-muted);
    white-space: nowrap;
    display:     flex;
    align-items: center;
    gap:         .5rem;
}
.iic-quality-bubble {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       34px;
    height:          24px;
    background:      var(--iic-primary);
    color:           #fff;
    font-size:       .75rem;
    font-weight:     800;
    border-radius:   6px;
    padding:         0 6px;
    font-family:     'JetBrains Mono', monospace;
    transition:      transform .1s;
}
.iic-slider-wrap {
    display:     flex;
    align-items: center;
    gap:         .5rem;
}
.iic-slider-cap {
    font-size:   .7rem;
    color:       var(--iic-text-light);
    font-weight: 600;
}
.iic-slider {
    -webkit-appearance: none;
    appearance:   none;
    width:        160px;
    height:       6px;
    border-radius: 3px;
    background:   var(--iic-border);
    outline:      none;
    cursor:       pointer;
}
.iic-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:        20px;
    height:       20px;
    border-radius: 50%;
    background:   var(--iic-primary);
    cursor:       pointer;
    box-shadow:   0 2px 8px var(--iic-primary-glow);
    transition:   transform .12s, box-shadow .12s;
    border:       2.5px solid #fff;
}
.iic-slider::-webkit-slider-thumb:hover {
    transform:  scale(1.2);
    box-shadow: 0 4px 14px var(--iic-primary-glow);
}
.iic-slider:disabled { opacity: .4; cursor: default; }

/* Mode toggle */
.iic-mode-toggle {
    display:       flex;
    border:        1.5px solid var(--iic-border);
    border-radius: 8px;
    overflow:      hidden;
}
.iic-mode-btn {
    padding:     .38rem .9rem;
    font-size:   .8rem;
    font-weight: 700;
    border:      none;
    background:  transparent;
    color:       var(--iic-text-muted);
    cursor:      pointer;
    transition:  all var(--iic-t) var(--iic-ease);
    font-family: inherit;
}
.iic-mode-btn.active {
    background: var(--iic-primary);
    color:      #fff;
}
.iic-mode-btn:not(.active):hover { background: var(--iic-primary-lt); color: var(--iic-primary); }

/* Toggle switch */
.iic-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.iic-toggle input { opacity: 0; width: 0; height: 0; }
.iic-toggle-slider {
    position:      absolute;
    inset:         0;
    background:    var(--iic-border);
    border-radius: 999px;
    cursor:        pointer;
    transition:    background .25s;
}
.iic-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);
}
.iic-toggle input:checked + .iic-toggle-slider { background: var(--iic-primary); }
.iic-toggle input:checked + .iic-toggle-slider::before { transform: translateX(20px); }
.iic-toggle-hint { font-size: .75rem; color: var(--iic-text-light); }

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

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

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

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

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

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

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

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

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

/* Savings banner */
.iic-savings-banner {
    display:       flex;
    align-items:   center;
    gap:           .8rem;
    background:    var(--iic-success-lt);
    border:        1.5px solid rgba(16,185,129,.28);
    border-radius: var(--iic-radius-sm);
    padding:       .7rem 1rem;
}
.iic-savings-banner.warn {
    background:   rgba(245,158,11,.1);
    border-color: rgba(245,158,11,.28);
}
.iic-savings-pct {
    font-family: 'JetBrains Mono', monospace;
    font-size:   1.75rem;
    font-weight: 600;
    color:       var(--iic-success);
    line-height: 1;
    min-width:   3.6rem;
    text-align:  center;
}
.iic-savings-banner.warn .iic-savings-pct { color: var(--iic-warning); }
.iic-savings-info { flex: 1; }
.iic-savings-label { font-size: .78rem; font-weight: 700; color: var(--iic-text); display: block; margin-bottom: 2px; }
.iic-savings-bytes {
    display:      inline-block;
    font-family:  'JetBrains Mono', monospace;
    font-size:    .7rem;
    font-weight:  500;
    color:        var(--iic-success);
    background:   rgba(16,185,129,.15);
    border-radius: 4px;
    padding:      1px 6px;
}
.iic-savings-banner.warn .iic-savings-bytes { color: var(--iic-warning); background: rgba(245,158,11,.12); }

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

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

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

/* ── Admin ──────────────────────────────────────────────────────── */
.iic-admin-wrap h1 { margin-bottom: 1.25rem; }
.iic-admin-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.iic-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);
}
.iic-stat-card.iic-highlight { background: linear-gradient(135deg,#268EFE,#1a7ae8); border-color:#268EFE; color:#fff; }
.iic-stat-num { font-size: 1.55rem; font-weight: 800; line-height: 1; }
.iic-stat-lbl { font-size: .72rem; color: #8fa3be; font-weight: 600; }
.iic-stat-card.iic-highlight .iic-stat-lbl { color: rgba(255,255,255,.75); }
.iic-admin-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(310px,1fr)); gap: 1rem; margin-bottom: 1rem; }
.iic-admin-card { background:#fff; border:1px solid #e1e8f0; border-radius:12px; padding:1.4rem; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.iic-admin-card h2 { margin-top:0; font-size:.95rem; }

/* ── Toast ──────────────────────────────────────────────────────── */
.iic-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(--iic-ease);
    z-index:      99999;
    max-width:    360px;
    word-break:   break-word;
}
.iic-toast.show    { opacity: 1; transform: translateY(0); }
.iic-toast.error   { background: var(--iic-error); }
.iic-toast.success { background: var(--iic-success); }

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

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