/* =============================================================================
   IG Story Downloader — Stylesheet
   Clean, refined aesthetic with subtle depth and on-brand Instagram palette
   ============================================================================= */

/* ── Import typeface ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ── Custom properties ── */
.igsd-wrap {
    --igsd-font:        'DM Sans', -apple-system, sans-serif;
    --igsd-mono:        'DM Mono', monospace;

    /* Brand gradient */
    --igsd-grad:        linear-gradient(135deg, #F9A825 0%, #E91E63 50%, #7B1FA2 100%);
    --igsd-grad-soft:   linear-gradient(135deg, rgba(249,168,37,.12) 0%, rgba(233,30,99,.12) 50%, rgba(123,31,162,.12) 100%);

    /* Neutrals — light theme */
    --igsd-bg:          #ffffff;
    --igsd-surface:     #f8f9fb;
    --igsd-border:      #e8eaed;
    --igsd-border-focus:#7B1FA2;
    --igsd-text:        #1a1a2e;
    --igsd-text-muted:  #6b7280;
    --igsd-text-xmuted: #9ca3af;

    /* Feedback */
    --igsd-success-bg:  #f0fdf4;
    --igsd-success-txt: #15803d;
    --igsd-error-bg:    #fef2f2;
    --igsd-error-txt:   #b91c1c;
    --igsd-warn-bg:     #fefce8;
    --igsd-warn-txt:    #92400e;
    --igsd-info-bg:     #eff6ff;
    --igsd-info-txt:    #1d4ed8;

    /* Sizing */
    --igsd-radius:      14px;
    --igsd-radius-sm:   8px;
    --igsd-radius-xs:   4px;
    --igsd-shadow:      0 2px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
    --igsd-shadow-lg:   0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);

    font-family:        var(--igsd-font);
    color:              var(--igsd-text);
}

/* ── Dark theme overrides ── */
.igsd-wrap.igsd-theme-dark {
    --igsd-bg:          #0f0f16;
    --igsd-surface:     #1a1a2a;
    --igsd-border:      #2d2d40;
    --igsd-border-focus:#c084fc;
    --igsd-text:        #f1f1f5;
    --igsd-text-muted:  #9ca3af;
    --igsd-text-xmuted: #6b7280;
    --igsd-shadow:      0 2px 12px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.2);
    --igsd-shadow-lg:   0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
}

/* ── Container ── */
.igsd-wrap {
    background:         var(--igsd-bg);
    border-radius:      var(--igsd-radius);
    box-shadow:         var(--igsd-shadow-lg);
    padding:            2.5rem;
    max-width:          760px;
    margin:             2rem auto;
    position:           relative;
    overflow:           hidden;
}

/* Subtle top gradient accent bar */
.igsd-wrap::before {
    content:    '';
    position:   absolute;
    top:        0; left: 0; right: 0;
    height:     3px;
    background: var(--igsd-grad);
}

/* ── Header ── */
.igsd-header {
    display:        flex;
    align-items:    center;
    gap:            1rem;
    margin-bottom:  1.75rem;
}

.igsd-logo {
    flex-shrink:    0;
    display:        flex;
    align-items:    center;
    filter:         drop-shadow(0 2px 6px rgba(233,30,99,.25));
}

.igsd-header-text {
    flex: 1;
}

.igsd-title {
    font-size:      1.375rem;
    font-weight:    600;
    line-height:    1.25;
    letter-spacing: -0.02em;
    margin:         0 0 .2rem;
    color:          var(--igsd-text);
}

.igsd-subtitle {
    font-size:      .875rem;
    color:          var(--igsd-text-muted);
    margin:         0;
    line-height:    1.5;
}

/* ── Search area ── */
.igsd-search-area {
    margin-bottom:  1.5rem;
}

.igsd-input-group {
    display:        flex;
    align-items:    center;
    background:     var(--igsd-surface);
    border:         1.5px solid var(--igsd-border);
    border-radius:  var(--igsd-radius);
    padding:        .375rem .375rem .375rem 1rem;
    transition:     border-color .2s, box-shadow .2s;
    gap:            .5rem;
}

.igsd-input-group:focus-within {
    border-color:   var(--igsd-border-focus);
    box-shadow:     0 0 0 3px rgba(123,31,162,.12);
}

.igsd-input-icon {
    color:          var(--igsd-text-xmuted);
    display:        flex;
    flex-shrink:    0;
}

.igsd-input {
    flex:           1;
    border:         none;
    background:     transparent;
    font-family:    var(--igsd-font);
    font-size:      .9375rem;
    color:          var(--igsd-text);
    outline:        none;
    min-width:      0;
    padding:        .5rem 0;
    caret-color:    var(--igsd-border-focus);
}

.igsd-input::placeholder {
    color:          var(--igsd-text-xmuted);
}

/* ── Primary button ── */
.igsd-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            .4rem;
    padding:        .625rem 1.25rem;
    background:     var(--igsd-grad);
    color:          #fff;
    border:         none;
    border-radius:  var(--igsd-radius-sm);
    font-family:    var(--igsd-font);
    font-size:      .9375rem;
    font-weight:    600;
    letter-spacing: -.01em;
    cursor:         pointer;
    white-space:    nowrap;
    transition:     opacity .15s, transform .1s;
    position:       relative;
    overflow:       hidden;
    flex-shrink:    0;
}

.igsd-btn:hover  { opacity: .9; }
.igsd-btn:active { transform: scale(.97); }

.igsd-btn.igsd-loading .igsd-btn-label { opacity: 0; }
.igsd-btn.igsd-loading .igsd-btn-spinner { opacity: 1; }

.igsd-btn-label   { transition: opacity .15s; }
.igsd-btn-spinner {
    position:       absolute;
    inset:          0;
    display:        flex;
    align-items:    center;
    justify-content:center;
    opacity:        0;
    transition:     opacity .15s;
}

.igsd-btn-spinner::after {
    content:        '';
    width:          16px; height: 16px;
    border:         2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius:  50%;
    animation:      igsd-spin .65s linear infinite;
}

.igsd-btn-sm {
    padding:        .5rem 1rem;
    font-size:      .875rem;
}

@keyframes igsd-spin {
    to { transform: rotate(360deg); }
}

/* ── Hint text ── */
.igsd-hint {
    font-size:      .8125rem;
    color:          var(--igsd-text-xmuted);
    margin:         .6rem 0 0;
    line-height:    1.5;
}

/* ── Notifications ── */
.igsd-notice {
    display:        flex;
    align-items:    flex-start;
    gap:            .6rem;
    padding:        .875rem 1rem;
    border-radius:  var(--igsd-radius-sm);
    font-size:      .875rem;
    line-height:    1.5;
    margin-bottom:  1.25rem;
    animation:      igsd-fade-in .2s ease;
}

.igsd-notice[hidden] { display: none; }

.igsd-notice.igsd-notice-error   { background: var(--igsd-error-bg);   color: var(--igsd-error-txt);   border: 1px solid rgba(185,28,28,.15);  }
.igsd-notice.igsd-notice-success { background: var(--igsd-success-bg); color: var(--igsd-success-txt); border: 1px solid rgba(21,128,61,.15);  }
.igsd-notice.igsd-notice-info    { background: var(--igsd-info-bg);    color: var(--igsd-info-txt);    border: 1px solid rgba(29,78,216,.15);  }
.igsd-notice.igsd-notice-warn    { background: var(--igsd-warn-bg);    color: var(--igsd-warn-txt);    border: 1px solid rgba(146,64,14,.15);  }

/* ── Demo banner ── */
.igsd-demo-banner {
    display:        flex;
    align-items:    center;
    gap:            .5rem;
    background:     var(--igsd-warn-bg);
    color:          var(--igsd-warn-txt);
    border:         1px solid rgba(146,64,14,.15);
    border-radius:  var(--igsd-radius-sm);
    padding:        .75rem 1rem;
    font-size:      .8125rem;
    margin-bottom:  1.25rem;
}

.igsd-demo-banner[hidden] { display: none; }

/* ── Results ── */
.igsd-results[hidden] { display: none; }

.igsd-results-header {
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    margin-bottom:  1rem;
    flex-wrap:      wrap;
    gap:            .5rem;
}

.igsd-results-title {
    font-size:      1rem;
    font-weight:    600;
    color:          var(--igsd-text);
    margin:         0;
}

.igsd-select-all-btn {
    background:     none;
    border:         1.5px solid var(--igsd-border);
    border-radius:  var(--igsd-radius-xs);
    padding:        .3rem .75rem;
    font-family:    var(--igsd-font);
    font-size:      .8125rem;
    color:          var(--igsd-text-muted);
    cursor:         pointer;
    transition:     border-color .15s, color .15s;
}

.igsd-select-all-btn:hover {
    border-color:   var(--igsd-border-focus);
    color:          var(--igsd-text);
}

.igsd-select-all-btn[hidden] { display: none; }

/* ── Story grid ── */
.igsd-grid {
    display:        grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:            1rem;
}

/* ── Story card ── */
.igsd-card {
    position:       relative;
    border-radius:  var(--igsd-radius);
    overflow:       hidden;
    background:     var(--igsd-surface);
    border:         1.5px solid var(--igsd-border);
    cursor:         pointer;
    transition:     transform .18s, box-shadow .18s, border-color .18s;
    animation:      igsd-pop-in .25s ease both;
    aspect-ratio:   9/16;
    display:        flex;
    flex-direction: column;
    user-select:    none;
}

.igsd-card:hover {
    transform:      translateY(-3px);
    box-shadow:     var(--igsd-shadow);
    border-color:   rgba(123,31,162,.3);
}

.igsd-card.selected {
    border-color:   #7B1FA2;
    box-shadow:     0 0 0 3px rgba(123,31,162,.18);
}

/* Staggered animation delays */
.igsd-card:nth-child(1)  { animation-delay: .03s; }
.igsd-card:nth-child(2)  { animation-delay: .07s; }
.igsd-card:nth-child(3)  { animation-delay: .11s; }
.igsd-card:nth-child(4)  { animation-delay: .15s; }
.igsd-card:nth-child(5)  { animation-delay: .19s; }
.igsd-card:nth-child(6)  { animation-delay: .23s; }

/* Thumbnail */
.igsd-card-thumb {
    flex:           1;
    position:       relative;
    overflow:       hidden;
    background:     var(--igsd-border);
}

.igsd-card-thumb img {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    display:        block;
    transition:     transform .3s;
}

.igsd-card:hover .igsd-card-thumb img {
    transform:      scale(1.04);
}

/* Video badge */
.igsd-card-type {
    position:       absolute;
    top:            .5rem;
    left:           .5rem;
    background:     rgba(0,0,0,.65);
    color:          #fff;
    border-radius:  4px;
    padding:        .15rem .4rem;
    font-size:      .7rem;
    font-weight:    600;
    letter-spacing: .04em;
    text-transform: uppercase;
    display:        flex;
    align-items:    center;
    gap:            .25rem;
    backdrop-filter: blur(4px);
}

/* Checkbox */
.igsd-card-check {
    position:       absolute;
    top:            .5rem;
    right:          .5rem;
    width:          22px; height: 22px;
    border-radius:  50%;
    background:     rgba(255,255,255,.9);
    border:         2px solid rgba(0,0,0,.2);
    display:        flex;
    align-items:    center;
    justify-content:center;
    transition:     background .15s, border-color .15s;
    backdrop-filter: blur(4px);
}

.igsd-card.selected .igsd-card-check {
    background:     #7B1FA2;
    border-color:   #7B1FA2;
}

.igsd-card-check-icon {
    display:        none;
    color:          #fff;
}

.igsd-card.selected .igsd-card-check-icon {
    display:        block;
}

/* Footer */
.igsd-card-footer {
    padding:        .5rem .6rem;
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    background:     var(--igsd-bg);
}

.igsd-card-age {
    font-size:      .725rem;
    color:          var(--igsd-text-xmuted);
    font-family:    var(--igsd-mono);
}

.igsd-card-dl-btn {
    background:     var(--igsd-grad);
    border:         none;
    border-radius:  5px;
    color:          #fff;
    cursor:         pointer;
    padding:        .3rem .55rem;
    font-size:      .75rem;
    font-weight:    600;
    display:        flex;
    align-items:    center;
    gap:            .25rem;
    transition:     opacity .15s, transform .1s;
    font-family:    var(--igsd-font);
}

.igsd-card-dl-btn:hover  { opacity: .85; }
.igsd-card-dl-btn:active { transform: scale(.95); }

.igsd-card-dl-btn.igsd-dl-progress {
    opacity:        .6;
    pointer-events: none;
}

/* ── Bulk bar ── */
.igsd-bulk-bar {
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    background:     var(--igsd-surface);
    border:         1.5px solid var(--igsd-border);
    border-radius:  var(--igsd-radius-sm);
    padding:        .75rem 1rem;
    margin-top:     1rem;
    font-size:      .875rem;
    color:          var(--igsd-text-muted);
    animation:      igsd-fade-in .2s ease;
}

.igsd-bulk-bar[hidden] { display: none; }

/* ── Disclaimer ── */
.igsd-disclaimer {
    font-size:      .75rem;
    color:          var(--igsd-text-xmuted);
    text-align:     center;
    margin:         1.5rem 0 0;
    line-height:    1.6;
    border-top:     1px solid var(--igsd-border);
    padding-top:    1rem;
}

/* ── Animations ── */
@keyframes igsd-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes igsd-pop-in {
    from { opacity: 0; transform: scale(.94) translateY(6px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .igsd-wrap {
        padding:    1.5rem 1.25rem;
        border-radius: var(--igsd-radius-sm);
    }

    .igsd-input-group {
        flex-wrap:  wrap;
        padding:    .5rem;
        gap:        .4rem;
    }

    .igsd-input-icon { display: none; }

    .igsd-input {
        order:      -1;
        width:      100%;
        padding:    .5rem .4rem;
    }

    .igsd-btn {
        width:      100%;
        justify-content: center;
    }

    .igsd-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap:        .75rem;
    }
}

@media (max-width: 380px) {
    .igsd-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* =============================================================================
   Additional styles — Tabs + User cards (v2)
   ============================================================================= */

/* ── Mode Tabs ── */
.igsd-tabs {
    display:        flex;
    gap:            .375rem;
    background:     var(--igsd-surface);
    border:         1.5px solid var(--igsd-border);
    border-radius:  var(--igsd-radius-sm);
    padding:        .3rem;
    margin-bottom:  1.25rem;
}

.igsd-tab-btn {
    flex:           1;
    display:        flex;
    align-items:    center;
    justify-content:center;
    gap:            .4rem;
    padding:        .5rem .75rem;
    background:     transparent;
    border:         none;
    border-radius:  6px;
    font-family:    var(--igsd-font);
    font-size:      .875rem;
    font-weight:    500;
    color:          var(--igsd-text-muted);
    cursor:         pointer;
    transition:     background .15s, color .15s;
    white-space:    nowrap;
}

.igsd-tab-btn:hover {
    background:     var(--igsd-bg);
    color:          var(--igsd-text);
}

.igsd-tab-btn.active {
    background:     var(--igsd-bg);
    color:          var(--igsd-text);
    box-shadow:     0 1px 4px rgba(0,0,0,.08);
}

/* ── Select dropdown ── */
.igsd-select {
    border:         1.5px solid var(--igsd-border);
    background:     var(--igsd-bg);
    color:          var(--igsd-text);
    font-family:    var(--igsd-font);
    font-size:      .875rem;
    border-radius:  var(--igsd-radius-xs);
    padding:        .45rem .7rem;
    outline:        none;
    cursor:         pointer;
    transition:     border-color .15s;
    flex-shrink:    0;
}

.igsd-select:focus {
    border-color:   var(--igsd-border-focus);
}

/* ── User grid ── */
.igsd-user-grid {
    display:        flex;
    flex-direction: column;
    gap:            .5rem;
}

/* ── User card ── */
.igsd-user-card {
    display:        flex;
    align-items:    center;
    gap:            .875rem;
    padding:        .75rem 1rem;
    background:     var(--igsd-surface);
    border:         1.5px solid var(--igsd-border);
    border-radius:  var(--igsd-radius-sm);
    animation:      igsd-fade-in .2s ease both;
    transition:     border-color .15s;
}

.igsd-user-card:hover {
    border-color:   rgba(123,31,162,.25);
}

/* Avatar */
.igsd-user-avatar {
    width:          44px;
    height:         44px;
    border-radius:  50%;
    overflow:       hidden;
    flex-shrink:    0;
    background:     var(--igsd-border);
    display:        flex;
    align-items:    center;
    justify-content:center;
}

.igsd-user-avatar img {
    width:  100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.igsd-user-initials {
    font-size:      .875rem;
    font-weight:    600;
    background:     var(--igsd-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Info */
.igsd-user-info {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            .15rem;
    min-width:      0;
}

.igsd-user-name {
    font-size:      .9375rem;
    font-weight:    500;
    color:          var(--igsd-text);
    display:        flex;
    align-items:    center;
    gap:            .3rem;
    flex-wrap:      wrap;
}

.igsd-user-fullname {
    font-size:      .8125rem;
    color:          var(--igsd-text-muted);
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.igsd-user-meta-badge {
    font-size:      .725rem;
    color:          var(--igsd-text-xmuted);
    font-family:    var(--igsd-mono);
}

/* Verified */
.igsd-verified {
    display:        inline-flex;
    align-items:    center;
    flex-shrink:    0;
}

/* Private badge */
.igsd-private-badge {
    font-size:      .7rem;
    background:     rgba(107,114,128,.15);
    color:          var(--igsd-text-muted);
    border-radius:  3px;
    padding:        1px 5px;
    font-weight:    500;
}

/* Visit link */
.igsd-user-visit {
    display:        flex;
    align-items:    center;
    justify-content:center;
    width:          30px;
    height:         30px;
    border-radius:  6px;
    color:          var(--igsd-text-muted);
    text-decoration:none;
    transition:     background .15s, color .15s;
    flex-shrink:    0;
}

.igsd-user-visit:hover {
    background:     var(--igsd-border);
    color:          var(--igsd-text);
}

/* ── Load more ── */
.igsd-load-more-wrap {
    text-align:     center;
    margin-top:     1rem;
}

.igsd-load-more-btn {
    background:     transparent;
    border:         1.5px solid var(--igsd-border);
    border-radius:  var(--igsd-radius-sm);
    padding:        .6rem 1.5rem;
    font-family:    var(--igsd-font);
    font-size:      .875rem;
    font-weight:    500;
    color:          var(--igsd-text-muted);
    cursor:         pointer;
    transition:     border-color .15s, color .15s;
}

.igsd-load-more-btn:hover {
    border-color:   var(--igsd-border-focus);
    color:          var(--igsd-text);
}

.igsd-load-more-btn[hidden] { display: none; }

/* ── mode hidden utility ── */
#igsd-mode-users[hidden],
#igsd-mode-stories[hidden] { display: none; }

/* ── Responsive for user cards ── */
@media (max-width: 480px) {
    .igsd-tab-btn { font-size: .8rem; padding: .45rem .5rem; }
    .igsd-user-card { padding: .6rem .75rem; }
    .igsd-user-avatar { width: 36px; height: 36px; }
}