/* ═══════════════════════════════════════════════════════════════
   GWAA Instagram Tools — Common CSS
   Matches InstantViews/VidIQ design system
   Used by: profile-viewer, story-viewer, post-downloader, etc.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --ig-primary: #635bff;
    --ig-primary-dark: #635bff;
    --ig-primary-light: rgba(99,91,255,0.1);
    --ig-accent: #574fe0;
    --ig-success: #10b981;
    --ig-warning: #f59e0b;
    --ig-danger: #ef4444;
    --ig-instagram: #E1306C;
    --ig-gradient: linear-gradient(135deg, #635bff, #574fe0);
    --ig-gradient-soft: linear-gradient(135deg, rgba(99,91,255,0.08), rgba(29,78,216,0.05));
}

/* ═══════════════════════════════════════════════════════════════
   BREADCRUMB BAR
   ═══════════════════════════════════════════════════════════════ */
.ig-breadcrumb-bar { display:flex; align-items:center; gap:12px; height:64px; margin:-24px -32px 24px -32px; padding:0 32px; border-bottom:1px solid var(--border-color); background:var(--bg-card); font-size:13px; }
.ig-breadcrumb-back { display:flex; align-items:center; gap:6px; color:var(--text-secondary); text-decoration:none; font-weight:500; cursor:pointer; transition:color 0.2s; }
.ig-breadcrumb-back:hover { color:var(--ig-primary); }
.ig-breadcrumb-divider { color:var(--border-color); font-size:18px; }
.ig-breadcrumb-path { display:flex; align-items:center; gap:8px; color:var(--text-muted); }
.ig-breadcrumb-path a { color:var(--text-muted); text-decoration:none; transition:color 0.2s; }
.ig-breadcrumb-path a:hover { color:var(--ig-primary); }
.ig-breadcrumb-current { color:var(--text-primary); font-weight:500; }

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════════ */
.ig-page-header { display:flex; align-items:flex-start; gap:16px; margin-bottom:24px; }
.ig-page-icon { width:64px; height:64px; background:var(--ig-gradient); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:30px; flex-shrink:0; }
.ig-page-title { font-size:34px; font-weight:800; margin:0 0 6px; letter-spacing:-0.01em; color:var(--text-primary); }
.ig-page-subtitle { color:var(--text-muted); font-size:16px; line-height:1.55; margin:0; }
.ig-badges { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.ig-badge { padding:4px 10px; border-radius:6px; font-size:13px; font-weight:600; text-transform:uppercase; }
.ig-badge-primary { background:var(--ig-primary); color:white; }
.ig-badge-free { background:var(--ig-success); color:white; }
.ig-badge-pro { background:var(--ig-accent); color:white; }
.ig-badge-new { background:var(--ig-warning); color:white; }

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════ */
.ig-hero { background:var(--ig-gradient-soft); border:1px solid rgba(99,91,255,0.15); border-radius:24px; padding:40px; margin-bottom:32px; position:relative; overflow:hidden; }
.ig-hero::before { content:''; position:absolute; top:-50%; right:-20%; width:400px; height:400px; background:radial-gradient(circle, rgba(99,91,255,0.1) 0%, transparent 70%); pointer-events:none; }
.ig-hero-content { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }
.ig-hero-title { font-size:32px; font-weight:800; color:var(--text-primary); margin-bottom:12px; line-height:1.2; }
.ig-hero-title span { background:var(--ig-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.ig-hero-desc { font-size:16px; color:var(--text-secondary); line-height:1.7; margin-bottom:24px; }
.ig-hero-stats { display:flex; gap:32px; flex-wrap:wrap; }
.ig-hero-stat { text-align:left; }
.ig-hero-stat-value { font-size:28px; font-weight:800; color:var(--ig-primary); }
.ig-hero-stat-label { font-size:13px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }

/* ═══════════════════════════════════════════════════════════════
   INPUT SECTION
   ═══════════════════════════════════════════════════════════════ */
.ig-input-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:20px; padding:32px; margin-bottom:24px; }
.ig-input-label { font-size:16px; font-weight:600; color:var(--text-primary); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.ig-input-row { display:flex; gap:12px; align-items:center; }
.ig-input { flex:1; padding:14px 20px; border:2px solid var(--border-color); border-radius:14px; font-size:15px; background:var(--bg-secondary,#fff); color:var(--text-primary); outline:none; transition:all 0.2s; font-family:inherit; }
.ig-input:focus { border-color:var(--ig-primary); box-shadow:0 0 0 4px var(--ig-primary-light); }
.ig-input::placeholder { color:var(--text-muted); }
.ig-btn { padding:14px 28px; border-radius:14px; font-size:15px; font-weight:600; border:none; cursor:pointer; transition:all 0.2s; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.ig-btn-primary { background:var(--ig-gradient); color:white; box-shadow:0 4px 14px rgba(99,91,255,0.3); }
.ig-btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(99,91,255,0.4); }
.ig-btn-secondary { background:var(--bg-card); color:var(--text-primary); border:1px solid var(--border-color); }
.ig-btn-secondary:hover { border-color:var(--ig-primary); color:var(--ig-primary); }
.ig-btn-sm { padding:10px 18px; font-size:13px; border-radius:10px; }
.ig-input-hint { font-size:13px; color:var(--text-muted); margin-top:8px; }

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.ig-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px; overflow:hidden; transition:all 0.2s; }
.ig-card:hover { border-color:rgba(99,91,255,0.3); }
.ig-card-header { padding:16px 20px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; }
.ig-card-header h3 { margin:0; font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; }
.ig-card-body { padding:20px; }
.ig-card-footer { padding:16px 20px; border-top:1px solid var(--border-color); background:var(--bg-secondary,#fafafa); }

/* ═══════════════════════════════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════════════════════════════ */
.ig-stats-bar { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:24px; }
.ig-stat-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px; padding:24px; text-align:center; transition:all 0.3s; }
.ig-stat-card:hover { border-color:var(--ig-primary); transform:translateY(-4px); box-shadow:0 8px 24px rgba(99,91,255,0.1); }
.ig-stat-icon { width:48px; height:48px; margin:0 auto 12px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.ig-stat-icon.blue { background:rgba(99,91,255,0.1); }

.ig-stat-icon.green { background:rgba(16,185,129,0.1); }
.ig-stat-icon.amber { background:rgba(245,158,11,0.1); }
.ig-stat-number { font-size:28px; font-weight:800; color:var(--text-primary); margin-bottom:4px; }
.ig-stat-label { font-size:13px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }

/* ═══════════════════════════════════════════════════════════════
   PROFILE DISPLAY
   ═══════════════════════════════════════════════════════════════ */
.ig-profile { display:flex; gap:24px; align-items:center; padding:24px; flex-wrap:wrap; }
.ig-profile-pic { width:96px; height:96px; border-radius:50%; border:3px solid var(--ig-primary); object-fit:cover; flex-shrink:0; }
.ig-profile-info { flex:1; min-width:200px; }
.ig-profile-name { font-size:22px; font-weight:700; color:var(--text-primary); margin-bottom:2px; }
.ig-profile-username { font-size:15px; color:var(--text-muted); margin-bottom:8px; }
.ig-profile-bio { font-size:15px; color:var(--text-secondary); line-height:1.6; max-width:500px; margin-bottom:12px; }
.ig-profile-stats { display:flex; gap:28px; }
.ig-profile-stat { text-align:center; }
.ig-profile-stat-num { font-size:20px; font-weight:700; color:var(--text-primary); }
.ig-profile-stat-label { font-size:12px; color:var(--text-muted); }
.ig-verified { color:var(--ig-primary); font-size:18px; }

/* ═══════════════════════════════════════════════════════════════
   ACTION BUTTONS ROW
   ═══════════════════════════════════════════════════════════════ */
.ig-actions { display:flex; gap:10px; flex-wrap:wrap; padding:0 20px 20px; }

/* ═══════════════════════════════════════════════════════════════
   MEDIA GRID (Posts, Reels, Stories)
   ═══════════════════════════════════════════════════════════════ */
.ig-media-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; padding:20px; }
.ig-media-item { position:relative; border-radius:12px; overflow:hidden; aspect-ratio:1; cursor:pointer; }
.ig-media-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; }
.ig-media-item:hover img { transform:scale(1.05); }
.ig-media-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; gap:16px; opacity:0; transition:opacity 0.3s; color:white; font-weight:600; font-size:14px; }
.ig-media-item:hover .ig-media-overlay { opacity:1; }
.ig-media-stat { display:flex; align-items:center; gap:4px; }

/* ═══════════════════════════════════════════════════════════════
   DOWNLOAD SECTION
   ═══════════════════════════════════════════════════════════════ */
.ig-download-list { display:flex; flex-wrap:wrap; gap:12px; }
.ig-download-item { display:inline-flex; align-items:center; gap:12px; padding:11px 18px; background:linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); border:none; border-radius:10px; cursor:pointer; transition:all 0.2s; box-shadow:0 3px 10px rgba(14,165,233,0.3); width:auto; }
.ig-download-item:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(14,165,233,0.45); background:linear-gradient(135deg, #0284c7 0%, #0369a1 100%); }
.ig-download-item:active { transform:translateY(0); box-shadow:0 2px 6px rgba(14,165,233,0.3); }
.ig-download-label { font-size:14px; font-weight:600; color:#fff; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.ig-download-label svg { width:18px; height:18px; flex-shrink:0; }
.ig-download-meta { font-size:11px; color:#fff; font-weight:700; background:rgba(255,255,255,0.25); padding:3px 9px; border-radius:14px; letter-spacing:0.4px; }

/* ═══════════════════════════════════════════════════════════════
   FEATURES GRID
   ═══════════════════════════════════════════════════════════════ */
.ig-features-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-bottom:32px; }
.ig-feature-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px; padding:24px; transition:all 0.3s; position:relative; overflow:hidden; }
.ig-feature-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ig-gradient); opacity:0; transition:opacity 0.3s; }
.ig-feature-card:hover { border-color:var(--ig-primary); transform:translateY(-4px); box-shadow:0 12px 32px rgba(99,91,255,0.1); }
.ig-feature-card:hover::before { opacity:1; }
.ig-feat-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:24px; }
.ig-feat-icon.blue { background:rgba(99,91,255,0.1); }



.ig-feat-icon.blue { background:rgba(99,91,255,0.1); }

.ig-feature-card h4 { font-size:16px; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
.ig-feature-card p { font-size:15px; color:var(--text-muted); line-height:1.7; margin:0; }

/* ═══════════════════════════════════════════════════════════════
   PIPELINE / HOW IT WORKS
   ═══════════════════════════════════════════════════════════════ */
.ig-pipeline { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:0; background:var(--bg-card); border:1px solid var(--border-color); border-radius:20px; overflow:hidden; margin-bottom:32px; position:relative; }
.ig-pipeline-step { padding:24px 16px; text-align:center; position:relative; border-right:1px solid var(--border-color); transition:all 0.3s; }
.ig-pipeline-step:last-child { border-right:none; }
.ig-pipeline-step:hover { background:rgba(99,91,255,0.03); }
.ig-pipeline-num { position:absolute; top:10px; left:10px; width:24px; height:24px; background:var(--ig-primary); color:white; border-radius:50%; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; z-index:3; }
.ig-pipeline-icon { width:56px; height:56px; margin:6px auto 14px; background:linear-gradient(145deg, var(--bg-secondary,#f5f5f5), var(--bg-card)); border:2px solid var(--border-color); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px; transition:all 0.3s; }
.ig-pipeline-icon svg { width:28px; height:28px; stroke:var(--ig-primary, #635bff); stroke-width:1.5; fill:none; }
.ig-pipeline-step:hover .ig-pipeline-icon { border-color:var(--ig-primary); transform:scale(1.08); box-shadow:0 8px 24px rgba(99,91,255,0.15); }
.ig-pipeline-title { font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:6px; line-height:1.3; }
.ig-pipeline-desc { font-size:13px; color:var(--text-muted); line-height:1.55; }
/* Auto-generated chevron arrows between steps — no markup needed on pages.
   Statically centered with transform; pulsing animation adds horizontal nudge. */
.ig-pipeline-step:not(:last-child)::after { content:'›'; position:absolute; right:-16px; top:50%; width:32px; height:32px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:2; color:var(--ig-primary, #635bff); font-size:24px; font-weight:700; line-height:1; padding-bottom:3px; transform:translateY(-50%); animation:igPipelineArrow 1.6s ease-in-out infinite; }
@keyframes igPipelineArrow { 0%,100% { transform:translateY(-50%) translateX(0); opacity:1; } 50% { transform:translateY(-50%) translateX(3px); opacity:0.55; } }
@media(max-width:900px) { .ig-pipeline-step:not(:last-child)::after { display:none; } }

/* ═══════════════════════════════════════════════════════════════
   CTA SECTION
   ═══════════════════════════════════════════════════════════════ */
.ig-cta { background:var(--ig-gradient); border-radius:24px; padding:48px; text-align:center; color:white; position:relative; overflow:hidden; margin-top:32px; }
.ig-cta::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.ig-cta-content { position:relative; z-index:1; }
.ig-cta-title { font-size:32px; font-weight:800; letter-spacing:-0.01em; margin-bottom:12px; }
.ig-cta-desc { font-size:16px; opacity:0.9; margin-bottom:28px; max-width:500px; margin-left:auto; margin-right:auto; }
.ig-cta-btn { display:inline-flex; align-items:center; gap:10px; background:white; color:var(--ig-primary); padding:16px 36px; border-radius:14px; font-size:16px; font-weight:700; border:none; cursor:pointer; transition:all 0.3s; box-shadow:0 4px 20px rgba(0,0,0,0.15); }
.ig-cta-btn:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,0.25); }

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════════ */
.ig-section { margin-bottom:32px; }
.ig-section-header { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.ig-section-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:22px; }
.ig-section-icon.blue { background:linear-gradient(135deg, #635bff, #574fe0); color:white; }

.ig-section-icon.green { background:linear-gradient(135deg, #10b981, #059669); color:white; }
.ig-section-icon.amber { background:linear-gradient(135deg, #f59e0b, #d97706); color:white; }
.ig-section-title { font-size:27px; font-weight:700; letter-spacing:-0.01em; color:var(--text-primary); margin:0 0 4px; }
.ig-section-subtitle { font-size:15px; color:var(--text-muted); margin:0; }

/* ═══════════════════════════════════════════════════════════════
   LOADING / EMPTY STATES
   ═══════════════════════════════════════════════════════════════ */
.ig-loading { text-align:center; padding:48px; }
.ig-spinner { width:40px; height:40px; border:3px solid var(--border-color); border-top-color:var(--ig-primary); border-radius:50%; animation:igSpin 0.8s linear infinite; margin:0 auto 16px; }
@keyframes igSpin { to { transform:rotate(360deg); } }
.ig-loading-text { font-size:15px; color:var(--text-muted); }
.ig-empty { text-align:center; padding:48px; }
.ig-empty-icon { font-size:48px; margin-bottom:16px; }
.ig-empty-title { font-size:18px; font-weight:600; color:var(--text-primary); margin-bottom:8px; }
.ig-empty-desc { font-size:15px; color:var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   HASHTAG TAGS
   ═══════════════════════════════════════════════════════════════ */
.ig-tags { display:flex; flex-wrap:wrap; gap:8px; }
.ig-tag { padding:8px 14px; background:var(--ig-primary-light); color:var(--ig-primary); border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; transition:all 0.2s; border:1px solid transparent; }
.ig-tag:hover { background:var(--ig-primary); color:white; }
.ig-tag.copied { background:var(--ig-success); color:white; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:900px) {
    .ig-hero-content { grid-template-columns:1fr; text-align:center; }
    .ig-hero-stats { justify-content:center; }
    .ig-features-grid { grid-template-columns:repeat(2, 1fr); }
    .ig-stats-bar { grid-template-columns:repeat(2, 1fr); }
    .ig-pipeline { grid-template-columns:1fr; }
    .ig-pipeline-step { border-right:none; border-bottom:1px solid var(--border-color); }
    .ig-pipeline-step:last-child { border-bottom:none; }
    .ig-breadcrumb-bar { margin:-24px -16px 24px -16px; padding:0 16px; }
}
@media(max-width:600px) {
    .ig-hero { padding:24px; }
    .ig-hero-title { font-size:24px; }
    .ig-input-card { padding:20px; }
    .ig-input-row { flex-direction:column; }
    .ig-input, .ig-btn { width:100%; }
    .ig-features-grid { grid-template-columns:1fr; }
    .ig-stats-bar { grid-template-columns:1fr 1fr; }
    .ig-profile { flex-direction:column; text-align:center; }
    .ig-profile-stats { justify-content:center; }
    .ig-actions { justify-content:center; }
    .ig-media-grid { grid-template-columns:repeat(2, 1fr); }
    .ig-cta { padding:32px 20px; }
    .ig-cta-title { font-size:22px; }
    .ig-page-header { flex-direction:column; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .ig-input { background:var(--bg-tertiary); }
[data-theme="dark"] .ig-card { background:var(--bg-card); border-color:var(--border-color); }
[data-theme="dark"] .ig-input-card { background:var(--bg-card); border-color:var(--border-color); }
[data-theme="dark"] .ig-download-item { background:linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); border:none; }
[data-theme="dark"] .ig-feature-card { background:var(--bg-card); border-color:var(--border-color); }
[data-theme="dark"] .ig-stat-card { background:var(--bg-card); border-color:var(--border-color); }
[data-theme="dark"] .ig-pipeline { background:var(--bg-card); border-color:var(--border-color); }
[data-theme="dark"] .ig-pipeline-step { border-color:var(--border-color); }
[data-theme="dark"] .ig-tag { background:rgba(99,91,255,0.15); }
[data-theme="dark"] .ig-hero { background:rgba(99,91,255,0.05); border-color:rgba(99,91,255,0.15); }

.ig-section-icon.blue { background:linear-gradient(135deg, #635bff, #574fe0); color:white; }

/* Extra spacing fixes */
.ig-result-section + .ig-section { margin-top: 40px; }
.ig-section + .ig-section { margin-top: 16px; }
.ig-card + .ig-card { margin-top: 24px; }
.ig-result-section.show + .ig-section { margin-top: 40px; }

/* FAQ Section — matches InstantViews style */
.ig-faq-list { display:flex; flex-direction:column; gap:12px; }
.ig-faq-item { background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; overflow:hidden; transition:all 0.3s; cursor:pointer; }
.ig-faq-item:hover { border-color:rgba(99,91,255,0.3); }
.ig-faq-item.open { border-color:#635bff; }
.ig-faq-question { padding:20px 24px; font-size:16px; font-weight:600; color:var(--text-primary); display:flex; justify-content:space-between; align-items:center; gap:16px; transition:background 0.2s; }
.ig-faq-question:hover { background:rgba(99,91,255,0.03); }
.ig-faq-answer { max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
.ig-faq-item.open .ig-faq-answer { max-height:300px; }
.ig-faq-answer-inner { padding:0 24px 24px; }
.ig-faq-answer p { font-size:15px; color:var(--text-secondary); line-height:1.8; margin:0; padding-top:16px; border-top:1px solid var(--border-color); }
[data-theme="dark"] .ig-faq-item { background:var(--bg-card); border-color:var(--border-color); }
.ig-faq-toggle { width:28px; height:28px; background:var(--bg-hover); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ig-faq-toggle svg { width:14px; height:14px; transition:transform 0.3s; }
.ig-faq-toggle svg path { stroke:var(--text-secondary); stroke-width:2; fill:none; }
.ig-faq-toggle { color:var(--text-secondary); }
.ig-faq-item.open .ig-faq-toggle { background:var(--bg-hover); }
.ig-faq-item.open .ig-faq-toggle svg { transform:rotate(180deg); }
.ig-faq-item.open .ig-faq-toggle svg path { stroke:var(--text-secondary); }
.ig-faq-item.open .ig-faq-toggle { color:var(--text-secondary); }

/* === Post/Reel info chips === */
.ig-post-author-avatar.real { background:#f5f5f5 !important; padding:0; overflow:hidden; }
.ig-post-author-avatar.real img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.ig-post-author-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ig-verified-badge { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; background:#635bff; border-radius:50%; flex-shrink:0; }
.ig-verified-badge svg { width:10px; height:10px; fill:white; }
.ig-post-fullname { font-size:14px; color:var(--text-muted); margin-bottom:2px; }
.ig-info-chips { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 16px; }
.ig-info-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; background:rgba(99,91,255,0.08); border:1px solid rgba(99,91,255,0.15); border-radius:8px; font-size:13px; font-weight:600; color:#4a3fd0; }
.ig-info-chip svg { width:13px; height:13px; fill:#635bff; flex-shrink:0; }
.ig-info-chip.location { background:rgba(16,185,129,0.08); border-color:rgba(16,185,129,0.2); color:#047857; }
.ig-info-chip.location svg { fill:#10b981; }
.ig-info-chip.carousel { background:rgba(245,158,11,0.08); border-color:rgba(245,158,11,0.2); color:#92400e; }
.ig-info-chip.carousel svg { fill:#f59e0b; }
[data-theme="dark"] .ig-info-chip { background:rgba(99,91,255,0.18); border-color:rgba(99,91,255,0.3); color:#beb6ff; }
[data-theme="dark"] .ig-info-chip.location { background:rgba(16,185,129,0.18); border-color:rgba(16,185,129,0.3); color:#6ee7b7; }
[data-theme="dark"] .ig-info-chip.carousel { background:rgba(245,158,11,0.18); border-color:rgba(245,158,11,0.3); color:#fcd34d; }

/* === Smart Data Extraction list (numbered rows) === */
.ig-data-list { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.ig-data-row { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; background:var(--bg-secondary,#fafafa); border:1px solid var(--border-color,#e5e7eb); border-radius:12px; transition:all 0.2s; }
.ig-data-row:hover { border-color:#635bff; box-shadow:0 4px 12px rgba(99,91,255,0.08); }
.ig-data-num { width:32px; height:32px; flex-shrink:0; background:#635bff; color:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.ig-data-row.green .ig-data-num { background:#10b981; }
.ig-data-row.amber .ig-data-num { background:#f59e0b; }
.ig-data-content { flex:1; min-width:0; }
.ig-data-title { font-weight:600; font-size:16px; color:var(--text-primary); margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.ig-data-title svg { width:16px; height:16px; flex-shrink:0; fill:#635bff; }
.ig-data-row.green .ig-data-title svg { fill:#10b981; }
.ig-data-row.amber .ig-data-title svg { fill:#f59e0b; }
.ig-data-desc { font-size:15px; color:var(--text-secondary,#6b7280); line-height:1.6; }
[data-theme="dark"] .ig-data-row { background:var(--bg-tertiary); border-color:var(--border-color); }

/* === Profile bio + purple chip (profile stats) === */
.ig-post-bio { font-size:14px; color:var(--text-secondary,#6b7280); line-height:1.5; margin:6px 0 4px; font-style:italic; }
.ig-info-chip.purple { background:rgba(139,92,246,0.1); border-color:rgba(139,92,246,0.2); color:#6d28d9; }
.ig-info-chip.purple svg { fill:#8b5cf6; }
[data-theme="dark"] .ig-info-chip.purple { background:rgba(139,92,246,0.2); border-color:rgba(139,92,246,0.3); color:#c4b5fd; }

/* === Page icon visibility boost === */
.ig-page-icon svg { width:38px !important; height:38px !important; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15)); }
.ig-page-icon svg path { fill:#ffffff !important; }
.ig-page-icon { box-shadow:0 4px 14px rgba(99,91,255,0.35); }

/* Section icons (blue) — same crispness fix */
.ig-section-icon.blue svg path { fill:#ffffff; }

/* === DP Downloader result card === */
.ig-dp-result { display:flex; flex-direction:column; align-items:center; padding:36px 24px; text-align:center; }
.ig-dp-preview { width:220px; height:220px; border-radius:50%; object-fit:cover; border:4px solid #635bff; box-shadow:0 12px 40px rgba(99,91,255,0.25); margin-bottom:20px; background:#f5f5f5; }
.ig-dp-name-row { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.ig-dp-name { font-size:22px; font-weight:700; color:var(--text-primary); }
.ig-dp-username { font-size:15px; color:var(--text-muted); margin-bottom:14px; }
.ig-dp-bio { font-size:15px; color:var(--text-secondary,#6b7280); line-height:1.6; max-width:480px; margin-bottom:24px; font-style:italic; }
.ig-dp-download-btn { display:inline-flex; align-items:center; gap:10px; padding:16px 28px; background:linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color:#fff; border:none; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; transition:all 0.2s; box-shadow:0 6px 20px rgba(14,165,233,0.35); margin-bottom:32px; }
.ig-dp-download-btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(14,165,233,0.5); background:linear-gradient(135deg, #0284c7 0%, #0369a1 100%); }
.ig-dp-download-btn:active { transform:translateY(0); }
.ig-dp-download-btn svg { width:22px; height:22px; flex-shrink:0; }
.ig-dp-stats { display:flex; gap:48px; padding-top:24px; border-top:1px solid var(--border-color,#e5e7eb); width:100%; max-width:480px; justify-content:center; }
.ig-dp-stat { text-align:center; }
.ig-dp-stat-num { font-size:22px; font-weight:700; color:var(--text-primary); }
.ig-dp-stat-label { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }
@media (max-width:640px) { .ig-dp-preview { width:160px; height:160px; } .ig-dp-stats { gap:24px; } }

/* === Engagement Calculator result card === */
.ig-eng-result { padding:32px 24px; }
.ig-eng-user { display:flex; align-items:center; gap:14px; padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--border-color,#e5e7eb); }
.ig-eng-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; background:#f5f5f5; }
.ig-eng-user-row { display:flex; align-items:center; gap:8px; font-size:18px; font-weight:700; color:var(--text-primary); }
.ig-eng-username { font-size:15px; color:var(--text-muted); }
.ig-eng-score-wrap { display:flex; flex-direction:column; align-items:center; margin-bottom:32px; }
.ig-eng-score-circle { width:200px; height:200px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; border:14px solid #e5e7eb; background:#fafafa; position:relative; transition:all 0.3s; }
.ig-eng-score-circle.excellent { border-color:#10b981; background:rgba(16,185,129,0.05); box-shadow:0 0 0 6px rgba(16,185,129,0.1); }
.ig-eng-score-circle.good { border-color:#635bff; background:rgba(99,91,255,0.05); box-shadow:0 0 0 6px rgba(99,91,255,0.1); }
.ig-eng-score-circle.average { border-color:#f59e0b; background:rgba(245,158,11,0.05); box-shadow:0 0 0 6px rgba(245,158,11,0.1); }
.ig-eng-score-circle.low { border-color:#ef4444; background:rgba(239,68,68,0.05); box-shadow:0 0 0 6px rgba(239,68,68,0.1); }
.ig-eng-score-val { font-size:42px; font-weight:800; color:var(--text-primary); line-height:1; }
.ig-eng-score-cap { font-size:11px; color:var(--text-muted); margin-top:6px; text-transform:uppercase; letter-spacing:1px; }
.ig-eng-quality { margin-top:16px; padding:6px 16px; border-radius:20px; font-size:14px; font-weight:700; }
.ig-eng-score-circle.excellent ~ .ig-eng-quality { background:rgba(16,185,129,0.15); color:#047857; }
.ig-eng-score-circle.good ~ .ig-eng-quality { background:rgba(99,91,255,0.15); color:#574fe0; }
.ig-eng-score-circle.average ~ .ig-eng-quality { background:rgba(245,158,11,0.15); color:#92400e; }
.ig-eng-score-circle.low ~ .ig-eng-quality { background:rgba(239,68,68,0.15); color:#b91c1c; }
.ig-eng-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.ig-eng-stat { padding:18px 14px; background:var(--bg-secondary,#fafafa); border:1px solid var(--border-color,#e5e7eb); border-radius:12px; text-align:center; transition:all 0.2s; }
.ig-eng-stat:hover { border-color:#635bff; transform:translateY(-2px); box-shadow:0 4px 12px rgba(99,91,255,0.08); }
.ig-eng-stat-icon { width:42px; height:42px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:10px; }
.ig-eng-stat-val { font-size:22px; font-weight:700; color:var(--text-primary); }
.ig-eng-stat-lbl { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-top:4px; }
.ig-eng-benchmarks { padding:18px 20px; background:rgba(99,91,255,0.04); border:1px solid rgba(99,91,255,0.12); border-radius:12px; }
.ig-eng-benchmark-title { font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:10px; }
.ig-eng-benchmark-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; font-size:14px; color:var(--text-secondary); }
.ig-eng-benchmark-grid strong { color:var(--text-primary); }
@media (max-width:640px) { .ig-eng-stats { grid-template-columns:repeat(2,1fr); } .ig-eng-benchmark-grid { grid-template-columns:1fr; } .ig-eng-score-circle { width:160px; height:160px; border-width:10px; } .ig-eng-score-val { font-size:32px; } }
[data-theme="dark"] .ig-eng-stat { background:var(--bg-tertiary); border-color:var(--border-color); }

/* === Engagement formula section === */
.ig-formula-box { background:linear-gradient(135deg, rgba(99,91,255,0.05), rgba(29,78,216,0.08)); border:1px solid rgba(99,91,255,0.15); border-radius:16px; padding:28px; margin-top:18px; }
.ig-formula-eq { font-family:'SF Mono','Monaco','Cascadia Code',monospace; font-size:18px; font-weight:600; color:var(--text-primary); text-align:center; padding:20px; background:#fff; border-radius:12px; border:1px dashed rgba(99,91,255,0.3); margin-bottom:20px; line-height:1.8; }
.ig-formula-eq span.num { color:#635bff; }
.ig-formula-eq span.den { color:#0ea5e9; }
.ig-formula-eq span.op { color:var(--text-muted); margin:0 8px; }
.ig-formula-eq span.eq { color:#10b981; font-weight:700; }
.ig-formula-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ig-formula-step { background:#fff; padding:18px; border-radius:12px; border:1px solid var(--border-color,#e5e7eb); }
.ig-formula-step-num { width:28px; height:28px; background:#635bff; color:#fff; border-radius:7px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; margin-bottom:10px; }
.ig-formula-step-title { font-weight:700; font-size:15px; color:var(--text-primary); margin-bottom:4px; }
.ig-formula-step-desc { font-size:14px; color:var(--text-secondary); line-height:1.6; }
.ig-formula-example { margin-top:20px; padding:16px 18px; background:#fff; border-radius:10px; border-left:3px solid #10b981; }
.ig-formula-example-title { font-weight:700; font-size:14px; color:var(--text-primary); margin-bottom:6px; }
.ig-formula-example-body { font-size:14px; color:var(--text-secondary); line-height:1.7; }
@media (max-width:640px) { .ig-formula-steps { grid-template-columns:1fr; } .ig-formula-eq { font-size:14px; padding:14px; } }
[data-theme="dark"] .ig-formula-eq, [data-theme="dark"] .ig-formula-step, [data-theme="dark"] .ig-formula-example { background:var(--bg-card); }

/* === Engagement page: full profile + posts grid === */
.ig-eng-profile { display:flex; gap:20px; align-items:flex-start; padding:24px; background:linear-gradient(135deg, rgba(99,91,255,0.04), rgba(14,165,233,0.03)); border-radius:16px; border:1px solid var(--border-color,#e5e7eb); margin-bottom:28px; flex-wrap:wrap; }
.ig-eng-avatar { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 4px 14px rgba(0,0,0,0.1); background:#f5f5f5; flex-shrink:0; }
.ig-eng-profile-info { flex:1; min-width:200px; }
.ig-eng-name-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:2px; }
.ig-eng-name { font-size:20px; font-weight:700; color:var(--text-primary); }
.ig-eng-private-tag { padding:3px 9px; background:rgba(245,158,11,0.15); color:#92400e; font-size:11px; font-weight:700; border-radius:12px; }
.ig-eng-username { font-size:15px; color:var(--text-muted); margin-bottom:10px; }
.ig-eng-bio { font-size:13px; color:var(--text-secondary,#6b7280); line-height:1.5; margin-bottom:14px; font-style:italic; max-width:560px; }
.ig-eng-profile-stats { display:flex; gap:24px; flex-wrap:wrap; }
.ig-eng-pstat { display:flex; flex-direction:column; }
.ig-eng-pstat-num { font-size:18px; font-weight:700; color:var(--text-primary); line-height:1.1; }
.ig-eng-pstat-lbl { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }

/* 12 posts grid */
.ig-eng-posts-section { margin-top:24px; padding-top:24px; border-top:1px solid var(--border-color,#e5e7eb); }
.ig-eng-posts-title { font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:14px; }
.ig-eng-posts-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ig-eng-post-card { position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; cursor:pointer; background:#f3f4f6; }
.ig-eng-post-card a { display:block; width:100%; height:100%; position:relative; }
.ig-eng-post-thumb { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.3s; }
.ig-eng-post-card:hover .ig-eng-post-thumb { transform:scale(1.06); }
.ig-eng-post-video-badge { position:absolute; top:6px; right:6px; width:22px; height:22px; background:rgba(0,0,0,0.6); border-radius:50%; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.ig-eng-post-video-badge svg { width:11px; height:11px; }
.ig-eng-post-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%); opacity:0; transition:opacity 0.2s; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; padding:10px; pointer-events:none; }
.ig-eng-post-card:hover .ig-eng-post-overlay { opacity:1; }
.ig-eng-post-stat { color:#fff; font-size:12px; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,0.5); }
@media (max-width:900px) { .ig-eng-posts-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px) { .ig-eng-posts-grid { grid-template-columns:repeat(2,1fr); } .ig-eng-profile { gap:14px; padding:18px; } .ig-eng-avatar { width:64px; height:64px; } .ig-eng-name { font-size:16px; } }
[data-theme="dark"] .ig-eng-profile { background:linear-gradient(135deg, rgba(99,91,255,0.08), rgba(14,165,233,0.06)); }

/* === Engagement chart === */
.ig-eng-chart-section { margin-top:24px; padding:24px; background:#fff; border:1px solid var(--border-color,#e5e7eb); border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,0.04); }
.ig-eng-chart-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.ig-eng-chart-title { font-size:16px; font-weight:700; color:var(--text-primary); }
.ig-eng-chart-sub { font-size:13px; color:var(--text-muted); margin-top:3px; }
.ig-eng-chart-legend { display:flex; gap:16px; flex-wrap:wrap; }
.ig-eng-legend-item { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text-secondary); }
.ig-eng-legend-dot { width:10px; height:10px; border-radius:3px; }
.ig-eng-chart-wrap { position:relative; height:320px; width:100%; }
@media (max-width:600px) { .ig-eng-chart-wrap { height:260px; } .ig-eng-chart-section { padding:16px; } }
[data-theme="dark"] .ig-eng-chart-section { background:var(--bg-card); border-color:var(--border-color); }

/* === Hashtag Generator === */
.ig-hash-result { padding:24px; }
.ig-hash-summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; background:linear-gradient(135deg, rgba(99,91,255,0.06), rgba(14,165,233,0.04)); border:1px solid rgba(99,91,255,0.15); border-radius:14px; margin-bottom:22px; flex-wrap:wrap; }
.ig-hash-keyword-row { display:flex; align-items:center; gap:8px; }
.ig-hash-keyword-label { font-size:13px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }
.ig-hash-keyword { font-size:20px; font-weight:700; color:var(--text-primary); }
.ig-hash-meta { font-size:13px; color:var(--text-secondary); margin-top:4px; }
.ig-hash-copy-all { display:inline-flex; align-items:center; gap:8px; padding:12px 20px; background:linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color:#fff; border:none; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; transition:all 0.2s; box-shadow:0 4px 12px rgba(14,165,233,0.3); white-space:nowrap; }
.ig-hash-copy-all:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(14,165,233,0.45); background:linear-gradient(135deg, #0284c7 0%, #0369a1 100%); }
.ig-hash-copy-all svg { width:16px; height:16px; flex-shrink:0; }

/* Buckets */
.ig-hash-bucket { margin-bottom:18px; padding:16px 18px 18px; border-radius:14px; border:1px solid var(--border-color,#e5e7eb); background:var(--bg-card,#fff); transition:border-color 0.2s; }
.ig-hash-bucket:hover { border-color:rgba(99,91,255,0.25); }
.ig-hash-bucket-head { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:start; margin-bottom:14px; }
.ig-hash-bucket-title { font-size:16px; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
.ig-hash-bucket-count { font-size:13px; padding:2px 8px; background:rgba(0,0,0,0.05); border-radius:10px; color:var(--text-secondary); font-weight:600; }
.ig-hash-bucket-desc { font-size:13px; color:var(--text-muted); margin-top:2px; grid-column:1; }
.ig-hash-bucket-copy { grid-column:2; grid-row:1/3; align-self:center; padding:9px 16px; background:transparent; border:1px solid var(--border-color,#e5e7eb); border-radius:8px; font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.ig-hash-bucket-copy:hover { border-color:#635bff; color:#635bff; background:rgba(99,91,255,0.04); }
.ig-hash-bucket.high .ig-hash-bucket-title { color:#dc2626; }
.ig-hash-bucket.medium .ig-hash-bucket-title { color:#0284c7; }
.ig-hash-bucket.niche .ig-hash-bucket-title { color:#059669; }

/* Tag chips */
.ig-hash-tags { display:flex; flex-wrap:wrap; gap:8px; }
.ig-hash-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; background:var(--bg-secondary,#f5f5f5); border:1px solid var(--border-color,#e5e7eb); border-radius:20px; font-size:13px; cursor:pointer; transition:all 0.15s; color:var(--text-primary); font-family:inherit; }
.ig-hash-chip:hover { background:rgba(99,91,255,0.08); border-color:#635bff; transform:translateY(-1px); }
.ig-hash-chip.copied { background:#10b981; border-color:#10b981; color:#fff; }
.ig-hash-chip.copied .ig-hash-chip-vol { color:rgba(255,255,255,0.85); }
.ig-hash-chip-tag { font-weight:600; }
.ig-hash-chip-vol { font-size:11px; color:var(--text-muted); font-weight:500; }
.ig-hash-bucket.high .ig-hash-chip { background:rgba(220,38,38,0.06); border-color:rgba(220,38,38,0.18); }
.ig-hash-bucket.high .ig-hash-chip:hover { background:rgba(220,38,38,0.12); border-color:#dc2626; }
.ig-hash-bucket.medium .ig-hash-chip { background:rgba(2,132,199,0.06); border-color:rgba(2,132,199,0.18); }
.ig-hash-bucket.medium .ig-hash-chip:hover { background:rgba(2,132,199,0.12); border-color:#0284c7; }
.ig-hash-bucket.niche .ig-hash-chip { background:rgba(5,150,105,0.06); border-color:rgba(5,150,105,0.18); }
.ig-hash-bucket.niche .ig-hash-chip:hover { background:rgba(5,150,105,0.12); border-color:#059669; }
.ig-hash-empty { padding:14px; text-align:center; color:var(--text-muted); font-size:13px; font-style:italic; }

.ig-hash-tip { margin-top:6px; padding:16px 20px; background:rgba(245,158,11,0.06); border:1px solid rgba(245,158,11,0.2); border-radius:10px; font-size:14px; color:#92400e; }
[data-theme=dark] .ig-hash-bucket { background:var(--bg-tertiary); border-color:var(--border-color); }
@media (max-width:600px) { .ig-hash-summary { flex-direction:column; align-items:stretch; } .ig-hash-copy-all { justify-content:center; } .ig-hash-bucket-head { grid-template-columns:1fr; } .ig-hash-bucket-copy { grid-column:1; grid-row:auto; justify-self:start; } }

/* === Hashtag selection mode === */
.ig-hash-meta { display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ig-hash-charbar { display:inline-block; width:130px; height:6px; background:rgba(0,0,0,0.08); border-radius:3px; overflow:hidden; position:relative; }
.ig-hash-charbar-fill { display:block; height:100%; width:0%; background:#10b981; transition:width 0.25s ease, background 0.25s; border-radius:3px; }
.ig-hash-charbar-fill.warn { background:#f59e0b; }
.ig-hash-charbar-fill.danger { background:#ef4444; }
.ig-hash-clear { font-size:12px; color:#635bff; cursor:pointer; font-weight:600; text-decoration:underline; }
.ig-hash-clear:hover { color:#574fe0; }
.ig-hash-hint { font-size:13px; color:var(--text-muted); margin:-12px 0 18px; padding:0 4px; }

/* Selected chip state */
.ig-hash-chip { position:relative; }
.ig-hash-chip-check { display:none; width:14px; height:14px; background:#10b981; color:#fff; border-radius:50%; align-items:center; justify-content:center; font-size:9px; font-weight:900; line-height:1; flex-shrink:0; }
.ig-hash-chip.selected .ig-hash-chip-check { display:inline-flex; }
.ig-hash-chip.selected { background:rgba(16,185,129,0.12) !important; border-color:#10b981 !important; box-shadow:0 0 0 2px rgba(16,185,129,0.15); }
.ig-hash-chip.selected .ig-hash-chip-tag { color:#047857; }

/* Remove the old 'copied' flash since clicks are now toggle */
.ig-hash-chip.copied { background:transparent; }

/* === Hashtag toolbar (Smart Mix, Export, Search, Sort) === */
.ig-hash-summary-right { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ig-hash-smart-mix { display:inline-flex; align-items:center; gap:7px; padding:11px 18px; background:linear-gradient(135deg, #f59e0b, #d97706); color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; transition:all 0.2s; box-shadow:0 4px 12px rgba(245,158,11,0.3); }
.ig-hash-smart-mix:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(245,158,11,0.45); background:linear-gradient(135deg, #d97706, #b45309); }
.ig-hash-smart-mix svg { width:15px; height:15px; flex-shrink:0; }

.ig-hash-export select { padding:9px 28px 9px 12px; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M3 4l3 4 3-4" stroke="%236b7280" stroke-width="1.5" fill="none"/></svg>') no-repeat right 8px center; background-size:10px; border:1px solid var(--border-color,#e5e7eb); border-radius:9px; font-size:13px; font-weight:600; color:var(--text-primary); cursor:pointer; appearance:none; -webkit-appearance:none; }
.ig-hash-export select:hover { border-color:#635bff; }

.ig-hash-toolbar { display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; align-items:center; flex-wrap:wrap; }
.ig-hash-search-wrap { position:relative; flex:1; min-width:200px; max-width:340px; }
.ig-hash-search-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--text-muted); pointer-events:none; }
.ig-hash-search { width:100%; padding:11px 14px 11px 38px; border:1px solid var(--border-color,#e5e7eb); border-radius:9px; font-size:14px; background:var(--bg-card,#fff); color:var(--text-primary); transition:border-color 0.2s; }
.ig-hash-search:focus { outline:none; border-color:#635bff; box-shadow:0 0 0 3px rgba(99,91,255,0.1); }
.ig-hash-sort { display:flex; align-items:center; gap:8px; }
.ig-hash-sort label { font-size:13px; color:var(--text-muted); font-weight:600; }
.ig-hash-sort select { padding:8px 28px 8px 11px; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M3 4l3 4 3-4" stroke="%236b7280" stroke-width="1.5" fill="none"/></svg>') no-repeat right 8px center; background-size:10px; border:1px solid var(--border-color,#e5e7eb); border-radius:8px; font-size:13px; color:var(--text-primary); cursor:pointer; appearance:none; -webkit-appearance:none; }

/* === Difficulty badges on chips === */
.ig-hash-chip-diff { font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:8px; text-transform:uppercase; letter-spacing:0.4px; }
.ig-hash-chip-diff.vhard { background:rgba(220,38,38,0.15); color:#b91c1c; }
.ig-hash-chip-diff.hard { background:rgba(234,88,12,0.15); color:#c2410c; }
.ig-hash-chip-diff.med { background:rgba(245,158,11,0.15); color:#92400e; }
.ig-hash-chip-diff.easy { background:rgba(16,185,129,0.15); color:#047857; }
.ig-hash-chip-diff.veasy { background:rgba(13,148,136,0.15); color:#115e59; }

/* === Volume comparison chart === */
.ig-hash-chart-section { margin-top:10px; margin-bottom:22px; padding:18px 20px; background:var(--bg-card,#fff); border:1px solid var(--border-color,#e5e7eb); border-radius:14px; }
.ig-hash-chart-title { font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:12px; }
.ig-hash-chart-wrap { width:100%; min-height:300px; }

[data-theme=dark] .ig-hash-search,
[data-theme=dark] .ig-hash-export select,
[data-theme=dark] .ig-hash-sort select { background-color:var(--bg-tertiary); border-color:var(--border-color); color:var(--text-primary); }
[data-theme=dark] .ig-hash-chart-section { background:var(--bg-tertiary); }

@media (max-width:700px) {
    .ig-hash-summary-right { width:100%; justify-content:flex-start; }
    .ig-hash-toolbar { flex-direction:column; align-items:stretch; }
    .ig-hash-search-wrap { max-width:none; }
}

/* === Inflact-style clean hashtag chips (overrides earlier styles) === */
.ig-hash-chip { padding:10px 16px !important; font-size:15px !important; font-weight:400 !important; color:#1f2937 !important; background:#f8fafc !important; border:1px solid #e5e7eb !important; border-radius:8px !important; gap:10px !important; }
.ig-hash-chip:hover { background:#f4f3ff !important; border-color:#635bff !important; transform:none !important; box-shadow:0 1px 3px rgba(99,91,255,0.08) !important; }
.ig-hash-chip-tag { font-weight:400 !important; letter-spacing:-0.01em; color:#3a30a8; }
.ig-hash-chip-vol { font-weight:400 !important; font-size:13px !important; color:#94a3b8 !important; }
.ig-hash-chip-diff { font-weight:700 !important; font-size:11px !important; padding:3px 8px !important; letter-spacing:0.4px !important; opacity:0.95; }

/* Bucket-specific subtle tints — clean, professional */
.ig-hash-bucket.high .ig-hash-chip { background:#fff5f5 !important; border-color:#fee2e2 !important; }
.ig-hash-bucket.high .ig-hash-chip:hover { background:#ffebeb !important; border-color:#fca5a5 !important; }
.ig-hash-bucket.medium .ig-hash-chip { background:#f0f9ff !important; border-color:#e0f2fe !important; }
.ig-hash-bucket.medium .ig-hash-chip:hover { background:#e0f2fe !important; border-color:#7dd3fc !important; }
.ig-hash-bucket.niche .ig-hash-chip { background:#f0fdf4 !important; border-color:#dcfce7 !important; }
.ig-hash-bucket.niche .ig-hash-chip:hover { background:#dcfce7 !important; border-color:#86efac !important; }

/* Selected — keep distinct */
.ig-hash-chip.selected { background:#ecfdf5 !important; border-color:#10b981 !important; box-shadow:0 0 0 1px rgba(16,185,129,0.3) !important; }
.ig-hash-chip.selected .ig-hash-chip-tag { color:#047857 !important; font-weight:500 !important; }

/* Bucket title — lighter weight, cleaner */
.ig-hash-bucket-title { font-weight:700 !important; font-size:16px !important; }
.ig-hash-bucket-desc { font-size:13px !important; }

[data-theme=dark] .ig-hash-chip { background:#1f2937 !important; border-color:#374151 !important; color:#e5e7eb !important; }
[data-theme=dark] .ig-hash-chip-tag { color:#beb6ff !important; }

/* === Hashtag 3-tab input (Inflact-style) === */
.ig-hash-tabs { display:flex; gap:0; background:var(--bg-secondary,#f5f5f5); border:1px solid var(--border-color,#e5e7eb); border-radius:14px; padding:6px; margin-bottom:18px; flex-wrap:wrap; }
.ig-hash-tab { flex:1; min-width:170px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 18px; background:transparent; border:none; border-radius:10px; font-size:15px; font-weight:700; color:#475569; cursor:pointer; transition:all 0.2s; font-family:inherit; white-space:nowrap; letter-spacing:-0.005em; }
.ig-hash-tab svg { width:20px; height:20px; flex-shrink:0; opacity:0.85; stroke-width:2.2; }
.ig-hash-tab:hover { color:#1e293b; background:rgba(99,91,255,0.06); }
.ig-hash-tab:hover svg { opacity:1; }
.ig-hash-tab.active { background:#fff; color:#574fe0; box-shadow:0 2px 10px rgba(99,91,255,0.18); font-weight:800; }
.ig-hash-tab.active svg { opacity:1; color:#574fe0; stroke-width:2.5; }
[data-theme="dark"] .ig-hash-tab.active { background:var(--bg-card); color:#978dff; }
[data-theme="dark"] .ig-hash-tabs { background:var(--bg-tertiary); border-color:var(--border-color); }

.ig-hash-mode-pane { display:none; }
.ig-hash-mode-pane.active { display:block; }

/* Photo dropzone */
.ig-hash-photo-dropzone { display:block; cursor:pointer; border:2px dashed var(--border-color,#cbd5e1); border-radius:14px; background:var(--bg-secondary,#fafafa); padding:32px 24px; text-align:center; transition:all 0.2s; min-height:200px; position:relative; overflow:hidden; }
.ig-hash-photo-dropzone:hover, .ig-hash-photo-dropzone.dragging { border-color:#635bff; background:rgba(99,91,255,0.04); }
.ig-hash-photo-dropzone-inner { display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--text-muted); }
.ig-hash-photo-dropzone-inner svg { stroke:#94a3b8; }
.ig-hash-photo-dropzone:hover .ig-hash-photo-dropzone-inner svg { stroke:#635bff; }
.ig-hash-photo-title { font-size:16px; font-weight:600; color:var(--text-primary); }
.ig-hash-photo-sub { font-size:13px; color:var(--text-muted); max-width:360px; line-height:1.5; }
.ig-hash-photo-preview { max-width:100%; max-height:280px; border-radius:12px; object-fit:contain; display:block; margin:0 auto; box-shadow:0 4px 12px rgba(0,0,0,0.08); }
@media (max-width:600px) { .ig-hash-tabs { padding:4px; } .ig-hash-tab { min-width:0; padding:10px 12px; font-size:13px; } .ig-hash-tab svg { width:16px; height:16px; } .ig-hash-tab span { display:none; } .ig-hash-tab.active span { display:inline; } }

/* === Hashtag tabs: stack vertically one-per-row on tablet+mobile === */
@media (max-width:780px) {
    .ig-hash-tabs { flex-direction:column !important; gap:6px !important; padding:6px !important; }
    .ig-hash-tab { width:100% !important; min-width:0 !important; justify-content:flex-start !important; padding:14px 16px !important; font-size:15px !important; flex:none !important; }
    .ig-hash-tab svg { width:18px !important; height:18px !important; display:inline-block !important; }
    .ig-hash-tab span { display:inline !important; }
    .ig-hash-tab.active { font-weight:800 !important; }
}

/* ============================================ */
/* INFLACT-STYLE HASHTAG LAYOUT v2               */
/* ============================================ */

/* Layout: main + right sidebar */
.ig-hash-layout { display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:flex-start; }
@media (max-width:1000px) { .ig-hash-layout { grid-template-columns:1fr; } }

.ig-hash-main { min-width:0; }

/* Photo preview banner */
.ig-hash-photopreview { display:flex; align-items:center; gap:16px; padding:14px 18px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; margin-bottom:20px; }
.ig-hash-photopreview img { width:72px; height:72px; border-radius:12px; object-fit:cover; flex-shrink:0; }
.ig-hash-photopreview-info { flex:1; min-width:0; }
.ig-hash-photopreview-label { font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.5px; font-weight:700; margin-bottom:4px; }
.ig-hash-photopreview-keywords { font-size:14px; color:#1e293b; font-weight:500; word-break:break-word; }

/* Action bar above sections */
.ig-hash-actionbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 18px; background:linear-gradient(135deg, rgba(99,91,255,0.05), rgba(14,165,233,0.03)); border:1px solid rgba(99,91,255,0.12); border-radius:12px; margin-bottom:20px; flex-wrap:wrap; }
.ig-hash-actionbar-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ig-hash-actionbar-label { font-size:13px; color:#64748b; text-transform:uppercase; letter-spacing:0.4px; font-weight:600; }
.ig-hash-actionbar-keyword { font-size:18px; font-weight:700; color:#1e293b; }
.ig-hash-actionbar-right { display:flex; align-items:center; gap:12px; }

/* Sections */
.ig-hash-section { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:24px; margin-bottom:22px; }
.ig-hash-section-head { padding-bottom:18px; border-bottom:1px solid #f1f5f9; margin-bottom:20px; }
.ig-hash-section-head h3 { font-size:22px; font-weight:700; color:#0f172a; margin:0 0 4px; letter-spacing:-0.01em; }
.ig-hash-section-head p { font-size:14px; color:#64748b; margin:0; }
[data-theme=dark] .ig-hash-section { background:var(--bg-card); border-color:var(--border-color); }
[data-theme=dark] .ig-hash-section-head h3 { color:var(--text-primary); }

/* 3-column grid inside section */
.ig-hash-cols { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
@media (max-width:780px) { .ig-hash-cols { grid-template-columns:1fr; gap:24px; } }

.ig-hash-col { min-width:0; }
.ig-hash-col-head { display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid #f1f5f9; margin-bottom:10px; flex-wrap:wrap; }
.col-title { font-size:15px; font-weight:700; color:#1e293b; flex:1; min-width:80px; }
[data-theme=dark] .col-title { color:var(--text-primary); }
.col-hint { font-size:10px; color:#475569; background:#e2e8f0; padding:3px 7px; border-radius:5px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; }
[data-theme=dark] .col-hint { color:#cbd5e1; background:#334155; }
.col-diff { font-size:10px; padding:3px 7px; border-radius:5px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; }
.col-diff.hard { background:rgba(220,38,38,0.12); color:#b91c1c; }
.col-diff.med { background:rgba(99,91,255,0.12); color:#574fe0; }
.col-diff.easy { background:rgba(16,185,129,0.12); color:#047857; }

/* Tag chips v2 (Inflact-style row with checkbox) */
.ig-hash-col-tags { display:flex; flex-direction:column; gap:2px; }
.ig-hash-chip-v2 { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; cursor:pointer; transition:background 0.15s; min-width:0; }
.ig-hash-chip-v2:hover { background:#f1f5f9; }
.ig-hash-chip-v2 input[type=checkbox] { width:14px; height:14px; flex-shrink:0; cursor:pointer; accent-color:#635bff; margin:0; }
.ig-hash-chip-v2 .ig-hash-chip-name { flex:1; font-size:15px; font-weight:400; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ig-hash-chip-v2 .ig-hash-chip-vol { font-size:13px; color:#94a3b8; font-weight:400; flex-shrink:0; }
.ig-hash-chip-v2.selected { background:#f4f3ff; }
.ig-hash-chip-v2.selected .ig-hash-chip-name { color:#574fe0; font-weight:600; }
[data-theme=dark] .ig-hash-chip-v2:hover { background:rgba(255,255,255,0.04); }
[data-theme=dark] .ig-hash-chip-v2 .ig-hash-chip-name { color:var(--text-primary); }
[data-theme=dark] .ig-hash-chip-v2.selected { background:rgba(99,91,255,0.15); }

.ig-hash-empty { padding:14px; text-align:center; color:#94a3b8; font-size:13px; font-style:italic; }

/* Sidebar */
.ig-hash-sidebar { position:sticky; top:24px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:20px; max-height:calc(100vh - 100px); display:flex; flex-direction:column; }
@media (max-width:1000px) { .ig-hash-sidebar { position:static; max-height:none; } }
[data-theme=dark] .ig-hash-sidebar { background:var(--bg-card); border-color:var(--border-color); }
.ig-hash-sidebar-head { padding-bottom:14px; border-bottom:1px solid #f1f5f9; margin-bottom:14px; }
.ig-hash-sidebar-title { font-size:16px; font-weight:700; color:#0f172a; margin-bottom:4px; }
[data-theme=dark] .ig-hash-sidebar-title { color:var(--text-primary); }
.ig-hash-sidebar-sub { font-size:13px; color:#64748b; }

.ig-hash-sidebar .ig-hash-charbar { display:block; width:100%; height:6px; background:#f1f5f9; border-radius:3px; overflow:hidden; margin-bottom:16px; }
.ig-hash-sidebar .ig-hash-charbar-fill { display:block; height:100%; width:0%; background:#10b981; transition:width 0.25s, background 0.25s; }
.ig-hash-sidebar .ig-hash-charbar-fill.warn { background:#f59e0b; }
.ig-hash-sidebar .ig-hash-charbar-fill.danger { background:#ef4444; }

.ig-hash-selbox { flex:1; min-height:120px; max-height:300px; overflow-y:auto; padding:14px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; margin-bottom:14px; }
[data-theme=dark] .ig-hash-selbox { background:var(--bg-tertiary); border-color:var(--border-color); }
.ig-hash-selbox-body { font-size:13px; color:#94a3b8; line-height:1.7; word-break:break-word; font-style:italic; }
.ig-hash-selbox-body.has-tags { color:#1e293b; font-style:normal; font-weight:500; }
[data-theme=dark] .ig-hash-selbox-body.has-tags { color:var(--text-primary); }

.ig-hash-selbox-foot { display:flex; flex-direction:column; gap:10px; }
.ig-hash-selbox-foot .ig-hash-export { width:100%; }
.ig-hash-selbox-foot .ig-hash-export select { width:100%; }
.ig-hash-selbox-copy { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 18px; background:linear-gradient(135deg, #635bff, #574fe0); color:#fff; border:none; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; transition:all 0.2s; box-shadow:0 4px 14px rgba(99,91,255,0.3); }
.ig-hash-selbox-copy:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(99,91,255,0.45); background:linear-gradient(135deg, #574fe0, #4a3fd0); }
.ig-hash-selbox-copy svg { width:16px; height:16px; flex-shrink:0; }

/* === Story Viewer === */
.ig-stories-result { padding:24px; }
.ig-stories-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--border-color,#e5e7eb); flex-wrap:wrap; }
.ig-stories-user { display:flex; align-items:center; gap:14px; }
.ig-stories-avatar-ring { width:64px; height:64px; border-radius:50%; padding:3px; background:linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); flex-shrink:0; }
.ig-stories-avatar { width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid #fff; background:#f5f5f5; }
.ig-stories-name-row { display:flex; align-items:center; gap:6px; font-size:18px; font-weight:700; color:var(--text-primary); }
.ig-stories-username { font-size:14px; color:var(--text-muted); }
.ig-stories-count { text-align:right; }
.ig-stories-count-num { font-size:28px; font-weight:800; color:#ec4899; line-height:1; display:block; }
.ig-stories-count-lbl { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }

.ig-stories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; }
.ig-story-card { background:#000; border-radius:14px; overflow:hidden; transition:transform 0.2s; }
.ig-story-card:hover { transform:translateY(-3px); }
.ig-story-thumb { position:relative; aspect-ratio:9/16; width:100%; overflow:hidden; }
.ig-story-thumb img, .ig-story-thumb video { width:100%; height:100%; object-fit:cover; display:block; }
.ig-story-play-badge { position:absolute; top:10px; right:10px; width:30px; height:30px; background:rgba(0,0,0,0.65); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ig-story-play-badge svg { width:14px; height:14px; }
.ig-story-time { position:absolute; bottom:10px; left:10px; padding:4px 9px; background:rgba(0,0,0,0.6); color:#fff; font-size:11px; font-weight:600; border-radius:6px; backdrop-filter:blur(4px); }
.ig-story-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px; background:#1a1a1a; }
.ig-story-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 10px; background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.18); border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s; font-family:inherit; }
.ig-story-btn:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.3); }
.ig-story-btn.primary { background:linear-gradient(135deg, #ec4899, #db2777); border-color:transparent; }
.ig-story-btn.primary:hover { background:linear-gradient(135deg, #db2777, #be185d); transform:translateY(-1px); }
.ig-story-btn svg { width:14px; height:14px; flex-shrink:0; }

.ig-stories-empty { text-align:center; padding:48px 20px; }
.ig-stories-empty-icon { font-size:48px; margin-bottom:12px; opacity:0.7; }
.ig-stories-empty-title { font-size:18px; font-weight:700; color:var(--text-primary); margin-bottom:6px; }
.ig-stories-empty-desc { font-size:14px; color:var(--text-muted); max-width:380px; margin:0 auto; line-height:1.6; }

/* === Story Viewer full profile header === */
.ig-stories-user-info { flex:1; min-width:0; }
.ig-stories-private-tag { padding:3px 9px; background:rgba(245,158,11,0.15); color:#92400e; font-size:11px; font-weight:700; border-radius:12px; }
.ig-stories-bio { font-size:13px; color:var(--text-secondary,#6b7280); line-height:1.5; margin-top:6px; font-style:italic; max-width:560px; }
.ig-stories-profile-stats { display:flex; gap:20px; margin-top:10px; flex-wrap:wrap; }
.ig-stories-pstat { display:flex; flex-direction:column; }
.ig-stories-pstat-num { font-size:16px; font-weight:700; color:var(--text-primary); line-height:1.1; }
.ig-stories-pstat-lbl { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; font-weight:600; }

/* === Story Lightbox Modal === */
.ig-story-modal { position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; }
.ig-story-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.92); backdrop-filter:blur(6px); }
.ig-story-modal-content { position:relative; max-width:min(420px,90vw); max-height:85vh; aspect-ratio:9/16; display:flex; align-items:center; justify-content:center; z-index:2; overflow:hidden; border-radius:14px; }
.ig-story-modal-media { max-width:100%; max-height:100%; display:block; object-fit:contain; transition:transform 0.2s; }
.ig-story-modal-media.zoomable { cursor:zoom-in; touch-action:none; transform-origin:center center; }
.ig-story-modal-close { position:fixed; top:20px; right:20px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.18); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:5; transition:all 0.2s; backdrop-filter:blur(8px); }
.ig-story-modal-close:hover { background:rgba(255,255,255,0.32); transform:scale(1.05); }
.ig-story-modal-close svg { width:22px; height:22px; }
.ig-story-modal-nav { position:fixed; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.18); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:5; transition:all 0.2s; backdrop-filter:blur(8px); }
.ig-story-modal-nav:hover:not(:disabled) { background:rgba(255,255,255,0.32); transform:translateY(-50%) scale(1.08); }
.ig-story-modal-nav:disabled { opacity:0.3; cursor:not-allowed; }
/* Desktop: arrows positioned just outside the centered image, not at viewport edges */
.ig-story-modal-nav.prev { left:calc(50% - 270px); }
.ig-story-modal-nav.next { right:calc(50% - 270px); }
.ig-story-modal-nav svg { width:24px; height:24px; }
/* Tablet/narrow desktop fallback when arrows would clash with viewport edge */
@media (max-width:768px) {
    .ig-story-modal-nav.prev { left:8px; }
    .ig-story-modal-nav.next { right:8px; }
    /* Hide close on mobile — use back gesture / swipe down */
    .ig-story-modal-close { display:none; }
}
.ig-story-modal-progress { position:fixed; top:24px; left:50%; transform:translateX(-50%); display:flex; gap:4px; max-width:min(420px,80vw); width:100%; z-index:3; padding:0 24px; }
.ig-story-modal-progress .progress-dot { flex:1; height:3px; background:rgba(255,255,255,0.25); border-radius:2px; transition:background 0.3s; }
.ig-story-modal-progress .progress-dot.done { background:rgba(255,255,255,0.6); }
.ig-story-modal-progress .progress-dot.active { background:#fff; }
.ig-story-modal-footer { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:14px; color:#fff; z-index:3; padding:10px 18px; background:rgba(0,0,0,0.45); border-radius:24px; backdrop-filter:blur(8px); font-size:13px; font-weight:600; }
.ig-story-modal-save { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:linear-gradient(135deg, #ec4899, #db2777); color:#fff; border:none; border-radius:18px; font-size:13px; font-weight:700; cursor:pointer; transition:transform 0.15s; }
.ig-story-modal-save:hover { transform:translateY(-1px); }
.ig-story-modal-save svg { width:14px; height:14px; }
@media (max-width:600px) {
    .ig-story-modal-nav { width:40px; height:40px; }
    .ig-story-modal-nav.prev { left:8px; }
    .ig-story-modal-nav.next { right:8px; }
    .ig-story-modal-close { top:12px; right:12px; }
    .ig-story-modal-progress { top:12px; padding:0 12px; }
    .ig-story-modal-content { max-width:96vw; max-height:80vh; }
}

/* === Story card: big center play button + inline player === */
.ig-story-thumb-img { width:100%; height:100%; object-fit:cover; display:block; }
.ig-story-thumb-video { width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.ig-story-play-center { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,0.92); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 24px rgba(0,0,0,0.4); transition:transform 0.15s, background 0.15s; padding:0; z-index:2; }
.ig-story-play-center:hover { transform:translate(-50%, -50%) scale(1.08); background:#fff; }
.ig-story-play-center:active { transform:translate(-50%, -50%) scale(0.96); }
.ig-story-play-center svg { width:24px; height:24px; fill:#000; margin-left:3px; }
/* Hide the play button once a video is inserted (the <video> element takes over) */
.ig-story-thumb:has(video) .ig-story-play-center { display:none; }

/* === Username Checker === */
.ig-uc-result { padding:32px 24px; }

/* AVAILABLE state */
.ig-uc-available { text-align:center; max-width:480px; margin:0 auto; }
.ig-uc-icon-circle { width:96px; height:96px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px; }
.ig-uc-icon-circle.available { background:linear-gradient(135deg, #10b981, #059669); box-shadow:0 8px 28px rgba(16,185,129,0.35); }
.ig-uc-icon-circle.taken { width:60px; height:60px; background:linear-gradient(135deg, #ef4444, #dc2626); box-shadow:0 6px 20px rgba(239,68,68,0.3); margin-bottom:0; flex-shrink:0; }
.ig-uc-status-label { font-size:14px; font-weight:800; color:#059669; letter-spacing:2px; margin-bottom:8px; }
.ig-uc-checked-name { font-size:32px; font-weight:800; color:var(--text-primary); margin-bottom:14px; letter-spacing:-0.01em; }
.ig-uc-status-desc { font-size:15px; color:var(--text-secondary); line-height:1.6; margin-bottom:26px; max-width:420px; margin-left:auto; margin-right:auto; }
.ig-uc-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.ig-uc-cta-btn { display:inline-flex; align-items:center; gap:8px; padding:13px 22px; background:transparent; color:var(--text-primary); border:1.5px solid var(--border-color,#e5e7eb); border-radius:11px; font-size:14px; font-weight:700; cursor:pointer; transition:all 0.2s; text-decoration:none; }
.ig-uc-cta-btn:hover { border-color:#635bff; color:#635bff; transform:translateY(-1px); }
.ig-uc-cta-btn.primary { background:linear-gradient(135deg, #10b981, #059669); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(16,185,129,0.3); }
.ig-uc-cta-btn.primary:hover { background:linear-gradient(135deg, #059669, #047857); box-shadow:0 6px 18px rgba(16,185,129,0.45); }
.ig-uc-cta-btn svg { width:16px; height:16px; flex-shrink:0; }

/* TAKEN state */
.ig-uc-taken-banner { display:flex; align-items:center; gap:18px; padding:18px 22px; background:linear-gradient(135deg, rgba(239,68,68,0.06), rgba(220,38,38,0.04)); border:1px solid rgba(239,68,68,0.18); border-radius:14px; margin-bottom:24px; }
.ig-uc-taken-label { font-size:13px; font-weight:800; color:#b91c1c; letter-spacing:1.5px; }
.ig-uc-taken-by { font-size:15px; color:var(--text-primary); font-weight:600; margin-top:2px; }

.ig-uc-profile { display:flex; gap:20px; padding:24px; background:var(--bg-secondary,#fafafa); border:1px solid var(--border-color,#e5e7eb); border-radius:14px; margin-bottom:22px; flex-wrap:wrap; }
.ig-uc-avatar { width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 4px 14px rgba(0,0,0,0.08); flex-shrink:0; background:#f5f5f5; }
.ig-uc-profile-info { flex:1; min-width:200px; }
.ig-uc-name-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.ig-uc-name { font-size:22px; font-weight:700; color:var(--text-primary); letter-spacing:-0.01em; }
.ig-uc-private-tag { padding:3px 9px; background:rgba(245,158,11,0.15); color:#92400e; font-size:11px; font-weight:700; border-radius:12px; }
.ig-uc-username { font-size:15px; color:var(--text-muted); margin-bottom:10px; }
.ig-uc-bio { font-size:14px; color:var(--text-secondary); line-height:1.5; max-width:560px; margin-bottom:14px; font-style:italic; }
.ig-uc-stats { display:flex; gap:24px; flex-wrap:wrap; }
.ig-uc-stat { display:flex; flex-direction:column; }
.ig-uc-stat-num { font-size:18px; font-weight:700; color:var(--text-primary); line-height:1.1; }
.ig-uc-stat-lbl { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; margin-top:2px; }

/* Suggestions */
.ig-uc-suggestions { padding:18px 20px; background:rgba(99,91,255,0.04); border:1px solid rgba(99,91,255,0.12); border-radius:12px; }
.ig-uc-suggestions-title { font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:12px; }
.ig-uc-suggestions-list { display:flex; flex-wrap:wrap; gap:8px; }
.ig-uc-suggestion { display:inline-flex; align-items:center; gap:6px; padding:8px 13px; background:#fff; border:1px solid var(--border-color,#e5e7eb); border-radius:8px; font-size:13px; font-weight:600; color:var(--text-primary); cursor:pointer; transition:all 0.2s; font-family:inherit; }
.ig-uc-suggestion:hover { border-color:#635bff; color:#635bff; transform:translateY(-1px); background:rgba(99,91,255,0.04); }
.ig-uc-suggestion svg { width:12px; height:12px; opacity:0.5; transition:opacity 0.2s; }
.ig-uc-suggestion:hover svg { opacity:1; }

[data-theme=dark] .ig-uc-profile { background:var(--bg-tertiary); border-color:var(--border-color); }
[data-theme=dark] .ig-uc-suggestion { background:var(--bg-card); border-color:var(--border-color); }

/* === Username Checker AI suggestions === */
.ig-uc-ai-section { margin-top:26px; padding:20px 22px; background:linear-gradient(135deg, rgba(139,92,246,0.05), rgba(99,91,255,0.04)); border:1px solid rgba(139,92,246,0.18); border-radius:14px; text-align:left; }
.ig-uc-ai-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.ig-uc-ai-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; background:linear-gradient(135deg, #8b5cf6, #6d28d9); color:#fff; font-size:11px; font-weight:800; border-radius:6px; letter-spacing:0.5px; }
.ig-uc-ai-title { font-size:15px; font-weight:700; color:var(--text-primary); }
.ig-uc-ai-desc { font-size:13px; color:var(--text-muted); margin-bottom:14px; }
.ig-uc-ai-list { display:flex; flex-direction:column; gap:6px; }
.ig-uc-ai-loading { padding:18px; text-align:center; color:var(--text-muted); font-size:13px; font-style:italic; background:rgba(255,255,255,0.4); border-radius:8px; }
.ig-uc-ai-empty { padding:14px; text-align:center; color:var(--text-muted); font-size:13px; }

.ig-uc-ai-row { display:flex; align-items:center; gap:12px; padding:10px 14px; background:#fff; border:1px solid var(--border-color,#e5e7eb); border-radius:10px; transition:all 0.15s; flex-wrap:wrap; }
.ig-uc-ai-row:hover { border-color:#635bff; box-shadow:0 2px 8px rgba(99,91,255,0.08); }
[data-theme=dark] .ig-uc-ai-row { background:var(--bg-card); border-color:var(--border-color); }
.ig-uc-ai-row-name { flex:1; min-width:140px; font-size:15px; font-weight:600; color:var(--text-primary); }
.ig-uc-ai-row-status { font-size:11px; font-weight:800; padding:4px 10px; border-radius:5px; letter-spacing:0.3px; flex-shrink:0; }
.ig-uc-ai-row.available .ig-uc-ai-row-status { background:rgba(16,185,129,0.12); color:#047857; }
.ig-uc-ai-row.taken .ig-uc-ai-row-status { background:rgba(239,68,68,0.12); color:#b91c1c; }
.ig-uc-ai-row.unknown .ig-uc-ai-row-status { background:rgba(0,0,0,0.06); color:var(--text-muted); }
.ig-uc-ai-row.available .ig-uc-ai-row-name { color:#047857; }
.ig-uc-ai-row.taken .ig-uc-ai-row-name { color:var(--text-secondary); }
.ig-uc-ai-row-actions { display:flex; gap:6px; flex-shrink:0; }
.ig-uc-ai-row-btn { width:32px; height:32px; padding:0; background:transparent; border:1px solid var(--border-color,#e5e7eb); border-radius:7px; color:var(--text-secondary); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all 0.15s; }
.ig-uc-ai-row-btn:hover { border-color:#635bff; color:#635bff; background:rgba(99,91,255,0.04); }
.ig-uc-ai-row-btn svg { width:14px; height:14px; }
.ig-uc-ai-row-btn.primary { background:linear-gradient(135deg, #10b981, #059669); color:#fff; border-color:transparent; }
.ig-uc-ai-row-btn.primary:hover { background:linear-gradient(135deg, #059669, #047857); color:#fff; }
@media (max-width:600px) {
    .ig-uc-ai-row { gap:8px; padding:9px 12px; }
    .ig-uc-ai-row-name { min-width:0; font-size:13px; flex:1 1 100%; }
    .ig-uc-ai-row-actions { flex:1 1 100%; justify-content:flex-end; }
}

/* === AI Suggestion Animated Loader === */
.ig-uc-ai-loader { padding:18px 4px; }
.ig-uc-ai-loader-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.ig-uc-ai-loader-spinner { width:22px; height:22px; border-radius:50%; border:2.5px solid rgba(139,92,246,0.2); border-top-color:#8b5cf6; animation:ucLoaderSpin 0.9s linear infinite; flex-shrink:0; }
@keyframes ucLoaderSpin { to { transform:rotate(360deg); } }
.ig-uc-ai-loader-text { font-size:14px; font-weight:600; color:#6d28d9; transition:opacity 0.3s; animation:ucLoaderPulse 1.6s ease-in-out infinite; }
@keyframes ucLoaderPulse { 0%,100% { opacity:1; } 50% { opacity:0.65; } }
.ig-uc-ai-loader-bar { width:100%; height:4px; background:rgba(139,92,246,0.12); border-radius:3px; overflow:hidden; margin-bottom:14px; }
.ig-uc-ai-loader-bar-fill { height:100%; width:0%; background:linear-gradient(90deg, #8b5cf6, #635bff, #06b6d4); background-size:200% 100%; border-radius:3px; transition:width 0.8s ease; animation:ucLoaderShimmer 2s linear infinite; }
@keyframes ucLoaderShimmer { 0% { background-position:0% 0; } 100% { background-position:200% 0; } }
.ig-uc-ai-loader-skeleton { display:flex; flex-direction:column; gap:6px; }
.ig-uc-ai-loader-row { height:48px; border-radius:10px; background:linear-gradient(90deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 100%); background-size:200% 100%; animation:ucLoaderSkele 1.4s ease-in-out infinite; }
@keyframes ucLoaderSkele { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
[data-theme=dark] .ig-uc-ai-loader-row { background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04)); background-size:200% 100%; }

/* === Regenerate button === */
.ig-uc-ai-regen { margin-top:12px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; background:transparent; color:#6d28d9; border:1.5px dashed rgba(139,92,246,0.4); border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.2s; font-family:inherit; }
.ig-uc-ai-regen:hover { background:rgba(139,92,246,0.06); border-color:#8b5cf6; border-style:solid; color:#5b21b6; }
.ig-uc-ai-regen:active { transform:scale(0.98); }
.ig-uc-ai-regen svg { width:15px; height:15px; flex-shrink:0; transition:transform 0.5s; }
.ig-uc-ai-regen:hover svg { transform:rotate(180deg); }
[data-theme=dark] .ig-uc-ai-regen { color:#c4b5fd; border-color:rgba(139,92,246,0.45); }
[data-theme=dark] .ig-uc-ai-regen:hover { background:rgba(139,92,246,0.15); color:#ddd6fe; }

/* === Batch divider between AI suggestion regenerations === */
.ig-uc-ai-batch-divider { display:flex; align-items:center; gap:10px; margin:14px 0 4px; }
.ig-uc-ai-batch-divider:before, .ig-uc-ai-batch-divider:after { content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(139,92,246,0.25), transparent); }
.ig-uc-ai-batch-divider span { font-size:11px; font-weight:700; color:#6d28d9; letter-spacing:0.5px; text-transform:uppercase; padding:3px 10px; background:rgba(139,92,246,0.08); border-radius:10px; }
[data-theme="dark"] .ig-uc-ai-batch-divider span { color:#c4b5fd; background:rgba(139,92,246,0.18); }

/* === Highlight Downloader === */
.ig-hl-result { padding:24px; }

/* Header — same shape as Story Viewer */
.ig-hl-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:20px; margin-bottom:24px; border-bottom:1px solid var(--border-color,#e5e7eb); flex-wrap:wrap; }
.ig-hl-user { display:flex; align-items:center; gap:14px; }
.ig-hl-avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 4px 14px rgba(0,0,0,0.1); background:#f5f5f5; flex-shrink:0; }
.ig-hl-user-info { flex:1; min-width:0; }
.ig-hl-name-row { display:flex; align-items:center; gap:6px; font-size:18px; font-weight:700; color:var(--text-primary); flex-wrap:wrap; }
.ig-hl-private-tag { padding:3px 9px; background:rgba(245,158,11,0.15); color:#92400e; font-size:11px; font-weight:700; border-radius:12px; }
.ig-hl-username { font-size:14px; color:var(--text-muted); }
.ig-hl-bio { font-size:13px; color:var(--text-secondary,#6b7280); line-height:1.5; margin-top:6px; font-style:italic; max-width:560px; }
.ig-hl-profile-stats { display:flex; gap:20px; margin-top:10px; flex-wrap:wrap; }
.ig-hl-pstat { display:flex; flex-direction:column; }
.ig-hl-pstat-num { font-size:16px; font-weight:700; color:var(--text-primary); line-height:1.1; }
.ig-hl-pstat-lbl { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; font-weight:600; }
.ig-hl-count { text-align:right; }
.ig-hl-count-num { font-size:28px; font-weight:800; color:#8b5cf6; line-height:1; display:block; }
.ig-hl-count-lbl { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }

/* Highlights circle grid — Instagram-style */
.ig-hl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:18px 12px; }
.ig-hl-card { display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; transition:transform 0.2s; }
.ig-hl-card:hover { transform:translateY(-3px); }
.ig-hl-cover-ring { width:88px; height:88px; border-radius:50%; padding:3px; background:linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); transition:transform 0.15s; }
.ig-hl-card:hover .ig-hl-cover-ring { transform:scale(1.05); }
.ig-hl-cover { width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid #fff; background:#f5f5f5; display:block; }
.ig-hl-title { font-size:13px; font-weight:600; color:var(--text-primary); text-align:center; max-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ig-hl-count-badge { font-size:11px; color:var(--text-muted); font-weight:500; }

.ig-hl-empty { text-align:center; padding:48px 20px; }
.ig-hl-empty-icon { font-size:48px; margin-bottom:12px; opacity:0.7; }
.ig-hl-empty-title { font-size:18px; font-weight:700; color:var(--text-primary); margin-bottom:6px; }
.ig-hl-empty-desc { font-size:14px; color:var(--text-muted); max-width:380px; margin:0 auto; line-height:1.6; }

/* Items section — appears when a highlight is selected */
.ig-hl-items-section { margin-top:32px; padding-top:24px; border-top:1px solid var(--border-color,#e5e7eb); }
.ig-hl-items-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.ig-hl-items-title { font-size:20px; font-weight:700; color:var(--text-primary); }
.ig-hl-items-sub { font-size:13px; color:var(--text-muted); margin-top:3px; }
.ig-hl-items-close { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:transparent; color:var(--text-secondary); border:1px solid var(--border-color,#e5e7eb); border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.15s; }
.ig-hl-items-close:hover { border-color:#ef4444; color:#dc2626; }
.ig-hl-items-close svg { width:14px; height:14px; }
.ig-hl-items-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:18px; }
.ig-hl-items-empty { padding:32px; text-align:center; color:var(--text-muted); font-size:14px; grid-column:1/-1; }

@media (max-width:600px) {
    .ig-hl-grid { grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:14px 8px; }
    .ig-hl-cover-ring { width:72px; height:72px; }
    .ig-hl-title { max-width:80px; font-size:12px; }
}

/* === Aggregator pages (Instagram Viewer + Downloader) === */
.ig-agg-tabs { display:flex; gap:6px; padding:6px; background:var(--bg-secondary,#f5f5f5); border:1px solid var(--border-color,#e5e7eb); border-radius:14px; margin-bottom:20px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ig-agg-tab { flex:1; min-width:120px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 16px; background:transparent; border:none; border-radius:10px; font-size:14px; font-weight:700; color:#475569; cursor:pointer; transition:all 0.2s; font-family:inherit; white-space:nowrap; letter-spacing:-0.005em; }
.ig-agg-tab svg { width:18px; height:18px; flex-shrink:0; opacity:0.7; }
.ig-agg-tab:hover { color:#1e293b; background:rgba(99,91,255,0.06); }
.ig-agg-tab:hover svg { opacity:1; }
.ig-agg-tab.active { background:#fff; color:#574fe0; box-shadow:0 2px 10px rgba(99,91,255,0.18); font-weight:800; }
.ig-agg-tab.active svg { opacity:1; }
[data-theme=dark] .ig-agg-tabs { background:var(--bg-tertiary); border-color:var(--border-color); }
[data-theme=dark] .ig-agg-tab { color:#cbd5e1; }
[data-theme=dark] .ig-agg-tab.active { background:var(--bg-card); color:#beb6ff; }
.ig-agg-input { margin-bottom:24px; }

.ig-agg-section-title { font-size:16px; font-weight:700; color:var(--text-primary); margin:8px 0 16px; }

.ig-agg-empty { text-align:center; padding:48px 20px; background:var(--bg-card); border:1px solid var(--border-color,#e5e7eb); border-radius:14px; }
.ig-agg-empty-icon { font-size:48px; margin-bottom:12px; opacity:0.7; }
.ig-agg-empty-title { font-size:18px; font-weight:700; color:var(--text-primary); margin-bottom:6px; }
.ig-agg-empty-desc { font-size:14px; color:var(--text-muted); max-width:420px; margin:0 auto; line-height:1.6; }

/* Aggregator Profile card */
.ig-agg-profile-card { display:flex; gap:24px; padding:28px; background:var(--bg-card); border:1px solid var(--border-color,#e5e7eb); border-radius:16px; flex-wrap:wrap; }
[data-theme=dark] .ig-agg-profile-card { background:var(--bg-card); border-color:var(--border-color); }
.ig-agg-profile-pic { width:120px; height:120px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 8px 24px rgba(0,0,0,0.1); background:#f5f5f5; flex-shrink:0; }
.ig-agg-profile-info { flex:1; min-width:240px; }
.ig-agg-profile-name-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.ig-agg-profile-name { font-size:24px; font-weight:800; color:var(--text-primary); letter-spacing:-0.01em; }
.ig-agg-profile-username { font-size:15px; color:var(--text-muted); margin-bottom:12px; }
.ig-agg-profile-bio { font-size:14px; color:var(--text-secondary); line-height:1.6; margin-bottom:18px; max-width:560px; font-style:italic; }
.ig-agg-profile-stats { display:flex; gap:32px; margin-bottom:22px; flex-wrap:wrap; }
.ig-agg-pstat { display:flex; flex-direction:column; }
.ig-agg-pstat-num { font-size:22px; font-weight:800; color:var(--text-primary); line-height:1.1; }
.ig-agg-pstat-lbl { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; margin-top:3px; }
.ig-agg-profile-actions { display:flex; gap:10px; flex-wrap:wrap; }
.ig-agg-quickbtn { padding:10px 18px; background:rgba(99,91,255,0.08); border:1px solid rgba(99,91,255,0.18); color:#574fe0; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.15s; font-family:inherit; }
.ig-agg-quickbtn:hover { background:rgba(99,91,255,0.15); border-color:#635bff; }
[data-theme=dark] .ig-agg-quickbtn { color:#beb6ff; }

@media (max-width:600px) {
    .ig-agg-tabs { padding:4px; gap:4px; }
    .ig-agg-tab { min-width:0; padding:10px 12px; font-size:13px; }
    .ig-agg-tab svg { width:15px; height:15px; }
}

/* === Aggregator Downloader media grid (multi-photo carousel posts) === */
.ig-agg-media-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px; }
.ig-agg-media-card { display:flex; flex-direction:column; gap:10px; padding:12px; background:var(--bg-card); border:1px solid var(--border-color,#e5e7eb); border-radius:14px; }
[data-theme="dark"] .ig-agg-media-card { background:var(--bg-card); border-color:var(--border-color); }
.ig-agg-media-thumb { position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:#f3f4f6; }
.ig-agg-media-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ig-agg-media-play-badge { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:48px; height:48px; background:rgba(0,0,0,0.6); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ig-agg-media-play-badge svg { width:20px; height:20px; }

/* === Fix aggregator tab focus ring on mobile (suppress default browser outline) === */
.ig-agg-tab:focus { outline:none; }
.ig-agg-tab:focus-visible { outline:2px solid rgba(99,91,255,0.4); outline-offset:1px; }
.ig-agg-tab:active { transform:scale(0.97); }
/* Ensure active background fully covers the tab area + sits ABOVE any focus ring stack */
.ig-agg-tab.active { position:relative; z-index:1; }
.ig-agg-tab.active:focus,
.ig-agg-tab.active:focus-visible { outline:none; box-shadow:0 2px 10px rgba(99,91,255,0.18), 0 0 0 2px rgba(99,91,255,0.15); }

/* === Aggregator profile sub-sections (Highlights / Posts / Reels below profile card) === */
.ig-agg-subsection { margin-top:28px; padding-top:24px; border-top:1px solid var(--border-color,#e5e7eb); }
.ig-agg-subsection:empty { display:none; padding:0; border:none; margin:0; }
.ig-agg-subsection-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ig-agg-subsection-head h3 { font-size:18px; font-weight:700; color:var(--text-primary); margin:0; }
.ig-agg-subsection-link { font-size:13px; font-weight:600; color:#635bff; cursor:pointer; text-decoration:none; }
.ig-agg-subsection-link:hover { color:#574fe0; text-decoration:underline; }
.ig-agg-subsection-loading { padding:24px; text-align:center; color:var(--text-muted); font-size:13px; font-style:italic; }

/* Highlight loader — shown while items are fetched after clicking a highlight circle */
.ig-hl-loader { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; background:var(--bg-card,#fff); border:1px solid var(--border-color,#e5e7eb); border-radius:16px; gap:14px; margin:16px 0; }
.ig-hl-loader-spinner { width:46px; height:46px; border-radius:50%; background:conic-gradient(from 0deg, #ec4899 0%, #f59e0b 40%, #635bff 100%); -webkit-mask:radial-gradient(circle 18px at center, transparent 95%, #000 96%); mask:radial-gradient(circle 18px at center, transparent 95%, #000 96%); animation:igHlSpin 0.9s linear infinite; }
@keyframes igHlSpin { to { transform:rotate(360deg); } }
.ig-hl-loader-text { font-size:15px; color:var(--text-primary,#1f2937); font-weight:600; }
.ig-hl-loader-text strong { color:#635bff; }
.ig-hl-loader-sub { font-size:13px; color:var(--text-muted,#94a3b8); }

/* Responsive tab strip — wraps to multiple rows on smaller screens */
@media (max-width: 900px) {
    .ig-agg-tabs { flex-wrap:wrap; overflow-x:visible; }
    .ig-agg-tab { flex:1 1 calc(25% - 6px); min-width:0; padding:11px 10px; font-size:13px; }
    .ig-agg-tab span { white-space:nowrap; }
}
@media (max-width: 720px) {
    .ig-agg-tab { flex:1 1 calc(33.333% - 6px); padding:10px 8px; font-size:13px; }
    .ig-agg-tab svg { width:16px; height:16px; }
}
@media (max-width: 480px) {
    .ig-agg-tabs { gap:4px; padding:5px; border-radius:12px; }
    .ig-agg-tab { flex:1 1 calc(33.333% - 4px); padding:9px 6px; font-size:12px; gap:5px; }
    .ig-agg-tab svg { width:14px; height:14px; }
}
@media (max-width: 360px) {
    .ig-agg-tab { flex:1 1 calc(50% - 4px); }
}

/* Input row stack on small screens */
@media (max-width: 600px) {
    .ig-input-row { flex-direction:column; }
    .ig-input-row .ig-input { width:100%; }
    .ig-input-row .ig-btn { width:100%; justify-content:center; }
}

/* Story actions buttons — 2 buttons (View + Save) side by side, stack only if very narrow */
.ig-story-actions { display:flex; gap:6px; padding:8px; }
.ig-story-actions .ig-story-btn { flex:1; min-width:0; }
@media (max-width: 380px) {
    .ig-story-actions { flex-direction:column; }
}

/* Eng post actions same treatment */
.ig-eng-post-actions { display:flex; gap:6px; padding:8px; }
.ig-eng-post-actions .ig-story-btn { flex:1; min-width:0; }
@media (max-width: 380px) {
    .ig-eng-post-actions { flex-direction:column; }
}

/* Stories grid + posts grid responsive columns */
@media (max-width: 900px) {
    .ig-eng-posts-grid { grid-template-columns:repeat(3, 1fr); }
    .ig-stories-grid { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .ig-eng-posts-grid { grid-template-columns:repeat(2, 1fr); gap:8px; }
    .ig-stories-grid { grid-template-columns:repeat(2, 1fr); gap:8px; }
}
@media (max-width: 380px) {
    .ig-eng-posts-grid { grid-template-columns:1fr; }
    .ig-stories-grid { grid-template-columns:1fr; }
}

/* Highlight grid responsive */
@media (max-width: 600px) {
    .ig-hl-grid { grid-template-columns:repeat(3, 1fr) !important; gap:10px; }
}
@media (max-width: 380px) {
    .ig-hl-grid { grid-template-columns:repeat(2, 1fr) !important; }
}

/* Profile card stack on narrow screens */
@media (max-width: 600px) {
    .ig-agg-profile-card { padding:18px; gap:16px; }
    .ig-agg-profile-pic { width:88px; height:88px; }
    .ig-agg-profile-name { font-size:20px; }
    .ig-agg-profile-stats { gap:20px; }
}

/* Quicknav buttons inside profile card — wrap nicely on mobile */
@media (max-width: 600px) {
    .ig-agg-profile-quicknav { gap:5px; }
    .ig-agg-quicknav-btn { padding:7px 10px; font-size:12px; flex:1 1 calc(33.333% - 4px); justify-content:center; }
    .ig-agg-quicknav-btn svg { width:13px; height:13px; }
}

/* Page header (badges row) wrap on mobile */
@media (max-width: 600px) {
    .ig-page-header { flex-direction:column; align-items:flex-start; }
    .ig-page-title { font-size:24px; }
    .ig-badges { flex-wrap:wrap; }
}

/* Hero text smaller on mobile */
@media (max-width: 600px) {
    .ig-hero { padding:20px; }
    .ig-hero-title { font-size:22px; }
    .ig-hero-desc { font-size:13px; }
}

/* Aggregator post cards need a 1:1 aspect on the THUMBNAIL only, not the whole card.
   Without this fix the bottom View button is clipped by overflow:hidden. */
.ig-eng-post-card:has(.ig-eng-post-actions) {
    aspect-ratio: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
}
.ig-eng-post-card:has(.ig-eng-post-actions) > div:first-child {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.ig-eng-post-card:has(.ig-eng-post-actions) .ig-eng-post-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* === Global broken-image fallback (applies to every <img> on every page) === */
img.ig-img-broken,
img[data-broken="1"] {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%) !important;
    object-fit: contain !important;
    padding: 12% !important;
    /* Inline SVG placeholder: simple image-with-mountain icon */
    background-image:
        linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%),
        url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%236366f1\" opacity=\".35\"><path d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"/></svg>") !important;
    background-size: cover, 40% auto !important;
    background-position: center, center !important;
    background-repeat: no-repeat, no-repeat !important;
}


/* Dark-mode CTA — properly dark, integrates with page bg */
[data-theme="dark"] .ig-cta {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid rgba(99,91,255,0.30);
}
[data-theme="dark"] .ig-cta::before {
    opacity: 0.4;
}
[data-theme="dark"] .ig-cta-btn {
    background: linear-gradient(135deg, #635bff 0%, #574fe0 100%);
    color: #fff;
    box-shadow: 0 4px 20px rgba(99,91,255,0.40);
}
[data-theme="dark"] .ig-cta-btn:hover {
    box-shadow: 0 8px 30px rgba(99,91,255,0.60);
}