/* AUTO-GENERATED by build_css_bundles.py from cosmos.css + viewer-landing.css.
   Do not edit - edit the source files instead. */
/* ==== cosmos.css ==== */
/* ═══════════════════════════════════════════════════════
   COSMOS THEME — InstaPeep  (Full Redesign)
   Ported from cosmos-iter-b.html design.
   Loaded AFTER style.css and viewer.css to override.
   ═══════════════════════════════════════════════════════ */

/* ── Variable Overrides ── */
:root,
[data-theme="dark"] {
    --bg: #03030a;
    --card-bg: rgba(3, 3, 9, 0.982);
    --item-bg: rgba(255, 255, 255, 0.018);
    --item-hover: rgba(255, 255, 255, 0.028);
    --panel-bg: rgba(3, 3, 9, 0.96);
    --text-primary: #f0eef5;
    --text-secondary: #a09cb5;
    --text-tertiary: #5d5878;
    --text-on-accent: #fff;
    --text-on-dark: #fff;
    --border: rgba(255, 255, 255, 0.055);
    --border-light: rgba(255, 255, 255, 0.04);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.4);
    --accent-color: #FF006E;
    --accent-color-rgb: 255, 0, 110;
    --search-btn-bg: linear-gradient(135deg, #FF006E, #FF5C8A, #FFB347);
    --search-btn-color: #fff;
    --overlay-bg: rgba(0, 0, 0, 0.85);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    --cosmos-solid: rgba(2, 3, 7, 0.99);
    --cosmos-solid-border: rgba(255, 255, 255, 0.04);
    --cosmos-gradient: linear-gradient(135deg, #FF006E, #FF5C8A, #FFB347);
    --cosmos-ring: conic-gradient(from 0deg, #FF006E, #FF5C8A, #FFB347, #FF5C8A, #FF006E);
    --cosmos-card-shadow: 0 20px 46px -30px rgba(0, 0, 0, 0.78), 0 12px 30px -18px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --cosmos-soft-shadow: 0 16px 34px -26px rgba(0, 0, 0, 0.6), 0 8px 20px -14px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

/* ── Base ── */
html {
    overflow-x: hidden; /* prevent horizontal scrollbar; clips at viewport edge not body edge */
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    background: var(--bg) !important;
    color: var(--text-primary);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}


/* ═══════════ SPACE BACKGROUND ═══════════ */
.space-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.space-bg .nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    contain: layout style paint;
}

.space-bg .nebula-1 { width: 650px; height: 650px; background: #FF006E; top: -20%; left: -12%; opacity: 0.12; }
.space-bg .nebula-2 { width: 500px; height: 500px; background: #FFB347; top: 40%; right: -18%; opacity: 0.09; }
.space-bg .nebula-3 { width: 450px; height: 450px; background: #FF5C8A; bottom: -15%; left: 25%; opacity: 0.105; }
.space-bg .nebula-4 { width: 300px; height: 300px; background: #d946ef; top: 10%; right: 20%; opacity: 0.065; }

/* Keyframes kept for theme-lab.css variants */
@keyframes cosmosDrift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, -30px); } }
@keyframes cosmosDrift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, 20px); } }
@keyframes cosmosDrift3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(15px, -20px); } }

/* Stars (individual div elements) */
.star { position: absolute; border-radius: 50%; background: rgba(255, 220, 240, 0.6); transform: translate3d(0, 0, 0); }
.star-sm { width: 1px; height: 1px; }
.star-md { width: 2px; height: 2px; }
.star-lg { width: 3px; height: 3px; background: rgba(255, 180, 220, 0.8); }
@keyframes twinkle  {
    0%, 100% { opacity: 0.2; transform: translate3d(-4px, -2px, 0); }
    50% { opacity: 1; transform: translate3d(4px, 3px, 0); }
}
@keyframes twinkle2 {
    0%, 100% { opacity: 0.4; transform: translate3d(3px, 2px, 0); }
    50% { opacity: 0.8; transform: translate3d(-4px, -3px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .space-bg .nebula,
    .space-bg::before,
    .space-bg::after,
    .space-bg .star {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 768px) {
    .space-bg {
        display: none !important;
    }
}


/* ── Z-layering ── */
/* .ad-zone is excluded so body-level ad zones keep their own positioning
   instead of being forced to position: relative. (The desktop sidebar rails
   from ads.js live inside <main>, which must stay position: relative — they
   are absolutely positioned against it.) */
body > *:not(.space-bg):not(.theme-lab-toggle):not(.theme-lab-panel):not(.ad-zone) {
    position: relative;
    z-index: 1;
}

main,
.container,
.lower-sections,
.site-footer {
    position: relative;
    z-index: 1;
}

.results:not(.hidden) {
    padding-top: 0;
    padding-bottom: 24px;
}

.results.hidden {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* ═══════════ PAGE SHELL ═══════════ */
/* Wider shell on desktop so the in-container ad units (Zone A header, Zone C
   infeed, Zone E grid) render larger display formats; 1100px from 1600px up.
   Either way the content stays inside the 1200px ad column (CENTER_MAX in
   ads.js) that the desktop sidebars clear, so neither width touches them. */
.container {
    max-width: 1240px;
}

@media (min-width: 1600px) {
    .container { max-width: 1100px; }
}


/* ═══════════ HIDE THEME TOGGLE ═══════════ */
.theme-slider,
.desktop-theme-toggle,
.mobile-theme-toggle {
    display: none !important;
}


/* ═══════════ HEADER — Glass Blur ═══════════ */
/* position: fixed + backdrop-filter on ::before so it doesn't create
   a containing block for the fixed-position mobile menu inside the header */
.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--cosmos-solid-border) !important;
    box-shadow: none !important;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform;
}

/* Spacer to offset content below the fixed header */
body {
    padding-top: 51px !important;
}

.header-content {
    min-height: 50px;
}

.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(3, 3, 10, 0.9);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    z-index: -1;
    transform: translateZ(0);
}

@media (max-width: 768px) {
    .site-header {
        position: sticky !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        will-change: auto !important;
    }

    /* The header scrolls with the page on mobile, so a live backdrop blur is
       re-sampled constantly. The plate is already ~90% opaque — bump it to 97%
       and drop the blur: visually near-identical, far cheaper to scroll. */
    .site-header::before {
        background: rgba(3, 3, 10, 0.97);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body {
        padding-top: 0 !important;
    }
}

/* Logo: always show dark variant, slightly reduced visual weight */
[data-theme="dark"] .logo-light { display: none !important; }
[data-theme="dark"] .logo-dark  { display: block !important; opacity: 0.92; }

/* Nav links */
.nav-link { color: var(--text-secondary); }
.nav-link:hover, .nav-link.active { color: var(--text-primary); }

/* Dropdown */
.nav-dropdown-menu,
.dropdown-menu {
    background: var(--cosmos-solid) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.nav-dropdown-item:hover,
.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}


/* ═══════════ HERO CHIP (Badge above title) ═══════════ */
.badge,
.hero-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 16px !important;
    border-radius: var(--radius-full) !important;
    background: rgba(var(--accent-color-rgb), 0.12) !important;
    border: 1px solid rgba(var(--accent-color-rgb), 0.2) !important;
    color: var(--accent-color) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    margin-bottom: 22px !important;
}

.badge svg,
.hero-chip svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
    flex-shrink: 0;
}


/* ═══════════ HERO TITLE GRADIENT ═══════════ */
.hero-title .highlight,
.hero-title .grad {
    background: var(--cosmos-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.hero-title {
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
}


/* ═══════════ HERO SUBTITLE ═══════════ */
.hero-section {
    max-width: 920px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.hero-subtitle {
    color: #cbc8d9 !important;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0 !important;
    line-height: 1.65;
}

.search-container {
    max-width: 620px !important;
}


/* ═══════════ TRUST STATS (below search) ═══════════ */
.stats {
    display: flex !important;
    justify-content: center !important;
    gap: 36px !important;
    flex-wrap: wrap !important;
    margin-bottom: 28px !important;
}

.stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    text-align: center;
}

.stat .stat-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat .stat-icon-wrap svg {
    width: 15px;
    height: 15px;
    stroke: var(--accent-color);
    fill: none;
    stroke-width: 2;
}

/* Hide old inline stat-icon SVG when stat-icon-wrap exists */
.stat .stat-icon-wrap ~ .stat-icon {
    display: none !important;
}
.stat .stat-icon-wrap ~ span .stat-icon {
    display: none !important;
}

/* Also style standalone stat-icons for backward compat */
.stat > .stat-icon {
    width: 15px;
    height: 15px;
    stroke: var(--accent-color);
    color: var(--accent-color);
}


/* ═══════════ SEO BIO SECTION ═══════════ */
.seo-bio {
    max-width: 760px !important;
    margin: 0 auto 20px !important;
    padding: 0 24px !important;
    text-align: center !important;
}

.seo-content {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.seo-bio p,
.seo-content p {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.75;
}

.seo-bio strong,
.seo-content strong {
    color: var(--text-primary);
    font-weight: 600;
}


/* ═══════════ SEARCH BOX ═══════════ */
[data-theme="dark"] .search-box,
[data-theme="dark"] .hero-section .search-box {
    background: rgba(4, 4, 14, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 14px !important;
    transition: all 0.3s;
}

[data-theme="dark"] .search-box:focus-within,
[data-theme="dark"] .hero-section .search-box:focus-within {
    border-color: rgba(var(--accent-color-rgb), 0.5) !important;
    box-shadow: 0 0 0 5px rgba(var(--accent-color-rgb), 0.08), 0 8px 40px rgba(var(--accent-color-rgb), 0.1) !important;
}

[data-theme="dark"] .search-btn,
[data-theme="dark"] .hero-section .search-btn {
    background: var(--cosmos-gradient) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(var(--accent-color-rgb), 0.3);
}

[data-theme="dark"] .search-btn:hover,
[data-theme="dark"] .hero-section .search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(var(--accent-color-rgb), 0.5) !important;
    opacity: 1 !important;
}


/* ═══════════ FEATURE CARDS (cosmos gradient icons) ═══════════ */
.features {
    max-width: 980px !important;
    margin: 0 auto 36px !important;
    padding: 0 24px !important;
    gap: 16px !important;
}

.feature {
    background: rgba(4, 4, 14, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: var(--radius) !important;
    padding: 18px 14px !important;
    text-align: center !important;
    box-shadow: var(--cosmos-soft-shadow) !important;
    transition: all 0.25s;
}

.feature:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(var(--accent-color-rgb), 0.2) !important;
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Feature icon — gradient background square wrapper */
.feature .feature-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--cosmos-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    box-shadow: 0 4px 20px rgba(var(--accent-color-rgb), 0.35);
}

.feature .feature-icon-wrap svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
}

/* When feature-icon-wrap exists, hide the old bare SVG */
.feature .feature-icon-wrap ~ .feature-icon {
    display: none !important;
}

/* Fallback: style old bare feature-icon SVGs with gradient box */
.feature > svg.feature-icon {
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto 12px;
    padding: 11px;
    border-radius: 10px;
    background: var(--cosmos-gradient);
    box-shadow: 0 4px 20px rgba(var(--accent-color-rgb), 0.35);
    stroke: #fff !important;
    color: #fff !important;
    display: block;
}

.feature .feature-title {
    font-size: 13px !important;
    font-weight: 500 !important;
}

.feature .feature-text {
    font-size: 11.5px !important;
    color: var(--text-secondary) !important;
    line-height: 1.5;
}


/* ═══════════ STEPS ═══════════ */
.steps {
    max-width: 800px !important;
    margin: 0 auto 44px !important;
}

.step {
    background: rgba(8, 8, 20, 0.90) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: var(--cosmos-soft-shadow) !important;
}

.step-number {
    background: var(--accent-color) !important;
    color: #fff !important;
}

.steps-title {
    color: var(--text-primary) !important;
}


/* ═══════════ SEO SECTION (lower) ═══════════ */
.seo-section {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.seo-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.seo-section p {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.75;
}


/* ═══════════ FAQ ═══════════ */
.faq {
    max-width: 720px !important;
}

.faq-title {
    color: var(--text-primary) !important;
}

.faq-item {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}


/* ═══════════ PROFILE CARD ═══════════ */
/* No backdrop-filter here on purpose: the background below is 98.6% opaque,
   so a blur behind it is invisible while still forcing an expensive
   backdrop snapshot on every paint/scroll (a real cost on mobile). */
.profile-card {
    margin: 18px 0 10px !important;
    background: rgba(2, 3, 10, 0.986) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: var(--cosmos-card-shadow) !important;
}

.profile-pic-wrapper {
    width: 110px !important;
    height: 110px !important;
    background: transparent !important;
}

.profile-pic-ring {
    background: var(--cosmos-ring) !important;
    box-shadow: 0 0 28px rgba(var(--accent-color-rgb), 0.22);
}

.profile-pic {
    width: 102px !important;
    height: 102px !important;
    border: 4px solid var(--bg) !important;
}

.profile-stats .stat-value {
    color: #f7f4ff !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.04);
}

.profile-stats .stat-label {
    color: rgba(208, 203, 230, 0.86) !important;
}

.stat-label {
    text-transform: none !important;
}

.profile-action-btn {
    border: 1px solid rgba(var(--accent-color-rgb), 0.22) !important;
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb), 0.10) 0%, rgba(var(--accent-color-rgb), 0.03) 100%),
        var(--cosmos-solid) !important;
    color: var(--text-primary) !important;
}

.profile-action-btn:hover {
    border-color: rgba(var(--accent-color-rgb), 0.4) !important;
    background: rgba(var(--accent-color-rgb), 0.1) !important;
}


/* ═══════════ CONNECTIONS / TABS ═══════════ */
.connections-container {
    background: rgba(2, 3, 10, 0.986) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: var(--radius-lg) !important;
    padding: 0 22px 22px !important;
    box-shadow: var(--cosmos-soft-shadow) !important;
}

/* Taller scroll region (was 420px) — sized to the viewport so it stays
   reasonable on any screen. More visible list height means more room for the
   Zone C infeed ads injected into the feed. */
.user-list {
    max-height: min(70vh, 620px) !important;
}

.tabs {
    background: rgba(1, 2, 7, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: var(--radius) !important;
    padding: 3px !important;
    gap: 0 !important;
}

.tab {
    flex: 1;
    text-align: center;
    border-radius: var(--radius-sm) !important;
    font-weight: 500;
    color: var(--text-tertiary);
    transition: all 0.15s;
}

.tab.active {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    font-weight: 600;
}

.tab-count {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-tertiary) !important;
}

.tab.active .tab-count {
    background: rgba(var(--accent-color-rgb), 0.15) !important;
    color: var(--accent-color) !important;
}

/* Filter Bar */
.filter-bar {
    background: rgba(1, 2, 8, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: var(--radius-sm) !important;
}

.filter-input {
    color: var(--text-primary) !important;
    background: transparent !important;
}

.filter-input::placeholder {
    color: var(--text-tertiary) !important;
}


/* ═══════════ USER LIST ═══════════ */
.user-item {
    --user-item-bg: rgba(0, 0, 0, 0.32);
    --user-item-hover-bg: rgba(255, 255, 255, 0.055);
    --user-item-index-hover-bg: var(--border);
    --user-item-index-hover-color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: var(--user-item-bg) !important;
    border-radius: 10px !important;
    margin-bottom: 0;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.015);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.user-item:hover {
    background: var(--user-item-hover-bg) !important;
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

.user-item:last-child {
    border-bottom: none !important;
    box-shadow: none;
}

.load-more-btn {
    background: rgba(0, 0, 0, 0.28) !important;
    border: none !important;
    color: var(--accent-color) !important;
}

.load-more-btn:hover {
    background: rgba(var(--accent-color-rgb), 0.1) !important;
}

.action-btn {
    background: rgba(0, 0, 0, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: rgba(223, 219, 241, 0.88) !important;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Always-visible quick-action CTAs (Story / Follower viewer): gradient glyphs on
   a barely-there translucent plate, just enough to read as tappable. */
.action-btn.quick-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}
.action-btn.quick-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}


/* ═══════════ GENDER STATS ═══════════ */
.gender-stats {
    background: rgba(2, 2, 10, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    box-shadow: var(--cosmos-soft-shadow) !important;
}


/* ═══════════ PRIVATE MESSAGE ═══════════ */
.private-message {
    background: rgba(8, 8, 20, 0.90) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: var(--cosmos-soft-shadow) !important;
}


/* ═══════════ ERROR / LOADER ═══════════ */
.error-card {
    background: rgba(5, 6, 15, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: var(--cosmos-soft-shadow) !important;
}

.loader-container {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.loader-avatar,
[data-theme="dark"] .loader-avatar {
    --loader-avatar-bg-1: #070811;
    --loader-avatar-bg-2: #1a2130;
    --loader-avatar-bg-3: #030409;
    --loader-avatar-highlight-2: rgba(135, 176, 255, 0.18) !important;
    --loader-avatar-highlight-3: rgba(228, 240, 255, 0.82) !important;
    --loader-avatar-top-glow: rgba(255, 255, 255, 0.1) !important;
    --loader-avatar-inner-shadow: rgba(1, 3, 10, 0.42) !important;
    --loader-avatar-border: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 -18px 24px rgba(1, 3, 10, 0.42) !important;
}

.loader-ring {
    inset: -6px;
    border-width: 3.5px !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-top-color: var(--accent-color) !important;
    box-shadow: 0 0 18px rgba(var(--accent-color-rgb), 0.32);
}

.loader-ring.done {
    border-top-color: #22c55e !important;
}

.loader-username {
    color: var(--text-primary) !important;
}

.loader-status {
    color: rgba(233, 229, 248, 0.92) !important;
}

.loader-dots span {
    background: rgba(233, 229, 248, 0.85) !important;
}

.panel-loading {
    color: rgba(233, 229, 248, 0.92) !important;
}

.mini-spinner {
    border-color: rgba(255, 255, 255, 0.14) !important;
    border-top-color: var(--accent-color) !important;
    box-shadow: 0 0 14px rgba(var(--accent-color-rgb), 0.24);
}

/* Shimmer for other avatar wrappers */
.avatar-wrapper,
[data-theme="dark"] .avatar-wrapper {
    background: linear-gradient(110deg, rgba(12, 12, 24, 1) 30%, rgba(40, 40, 60, 0.5) 50%, rgba(12, 12, 24, 1) 70%) !important;
    background-size: 200% 100% !important;
}

[data-theme="dark"] .media-item:not(.loaded),
.media-item:not(.loaded) {
    background: linear-gradient(110deg, rgba(12, 12, 24, 1) 30%, rgba(40, 40, 60, 0.5) 50%, rgba(12, 12, 24, 1) 70%) !important;
    background-size: 200% 100% !important;
}


/* ═══════════ FOOTER ═══════════ */
.site-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}


/* ═══════════ MOBILE MENU ═══════════ */
.mobile-menu {
    background: rgba(3, 3, 10, 0.985) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.55) !important;
}

[data-theme="dark"] .mobile-menu {
    background: rgba(3, 3, 10, 0.985) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.mobile-menu-header {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.mobile-menu-close {
    background: rgba(255, 255, 255, 0.05) !important;
}

.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.mobile-menu-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.mobile-menu-overlay.active {
    background: rgba(0, 0, 0, 0.6);
}


/* ═══════════ CONTENT TABS (Story Viewer page) ═══════════ */
.content-container {
    background: rgba(2, 3, 10, 0.986) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: var(--radius-lg) !important;
    padding: 18px !important;
    box-shadow: var(--cosmos-soft-shadow) !important;
    overflow: visible !important;
}

.content-tabs {
    background: rgba(1, 2, 7, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    border-radius: var(--radius) !important;
    margin: 0 0 18px !important;
    padding: 3px !important;
    gap: 0 !important;
}

.content-tab { color: var(--text-tertiary); }
.content-tab:hover { color: var(--text-secondary); }
.content-tab.active {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #fff !important;
}

.content-panel {
    padding: 18px 4px 4px !important;
}

.story-viewer {
    background: var(--cosmos-solid) !important;
}

.highlight-cover {
    background: var(--cosmos-solid) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .highlight-cover {
    background: linear-gradient(110deg, rgba(12, 12, 24, 1) 30%, rgba(40, 40, 60, 0.5) 50%, rgba(12, 12, 24, 1) 70%) !important;
    background-size: 200% 100% !important;
}

.highlight-item.loaded .highlight-cover {
    background: var(--card-bg) !important;
    animation: none !important;
}

.modal-content { background: var(--card-bg) !important; }
.modal-info    { background: var(--card-bg) !important; }


/* ═══════════ LANDING SECTIONS (lower page) ═══════════ */
.steps {
    max-width: 1040px !important;
    padding: 0 24px !important;
}

.landing-section {
    max-width: 920px;
    margin: 60px auto;
    padding: 0 24px;
}

.landing-section--wide {
    max-width: 1080px;
}

.landing-section__title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.landing-section__title--lg {
    font-size: 1.8rem;
    margin-bottom: 12px;
}

.landing-section__subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 32px;
    font-size: 0.95rem;
}

.landing-section__note {
    text-align: center;
    margin-top: 16px;
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.card-grid--sm {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    text-align: center;
}

.info-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--cosmos-soft-shadow);
}

.info-card--compact {
    padding: 20px;
}

.info-card--body {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 28px;
    line-height: 1.7;
    box-shadow: var(--cosmos-soft-shadow);
}

.info-card__emoji {
    font-size: 2rem;
    margin-bottom: 8px;
}

.info-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.info-card__text {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.info-card__heading {
    color: var(--text-primary);
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.info-card__para {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.info-card__para:last-child {
    margin-bottom: 0;
}

.info-card__label {
    color: var(--text-primary);
    font-weight: 600;
}

/* Stars */
.star-rating {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    color: #f59e0b;
}

/* Testimonials */
.testimonial__quote {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.testimonial__author {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}

/* Stat bar */
.stat-bar {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin: 40px auto;
    max-width: 1040px;
    padding: 0 24px;
}

.stat-block {
    text-align: center;
}

.stat-block__value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-block__label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    display: block;
    margin-top: 2px;
}

/* Disclaimer */
.disclaimer-section {
    max-width: 920px;
    margin: 40px auto 20px;
    padding: 20px 24px;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    line-height: 1.6;
    text-align: center;
    border-top: 1px solid var(--border-light);
}

.disclaimer-section a {
    color: var(--text-secondary);
}

/* Footer fine print: --text-tertiary (+ the disclaimer's 0.7 opacity) fails
   WCAG AA contrast on the dark background (3.06:1 / 2.01:1). */
[data-theme="dark"] .footer-copyright,
[data-theme="dark"] .footer-disclaimer {
    color: var(--text-secondary);
    opacity: 1;
}

/* Accent-colored links inside info cards, FAQ, and landing sections */
.info-card--body a,
.faq-a a,
.landing-section a:not(.footer-link) {
    color: var(--accent-color);
}


/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 768px) {
    .space-bg .nebula { filter: blur(80px); }
    .space-bg .nebula-1 { width: 420px; height: 420px; top: -25%; left: -20%; opacity: 0.16; }
    .space-bg .nebula-2 { width: 320px; height: 320px; right: -25%; opacity: 0.12; }
    .space-bg .nebula-3 { width: 300px; height: 300px; bottom: -15%; left: 0%; opacity: 0.14; }
    .space-bg .nebula-4 { width: 220px; height: 220px; right: 5%; opacity: 0.08; }

    .results:not(.hidden) {
        padding-top: 0;
        padding-bottom: 18px;
    }

    .profile-pic-wrapper { width: 90px !important; height: 90px !important; }
    .profile-pic { width: 82px !important; height: 82px !important; }

    /* No top margin on mobile: the Zone B ad sits directly above the results,
       and its own bottom margin is the only gap we want there. */
    .profile-card { margin: 0 0 8px !important; }

    .connections-container { padding: 0 16px 16px !important; }

    .content-container {
        padding: 16px !important;
    }

    .content-tabs {
        margin-bottom: 16px !important;
    }

    .content-panel {
        padding: 14px 2px 2px !important;
    }

    .features { grid-template-columns: 1fr 1fr !important; padding: 0 20px !important; margin-bottom: 44px !important; }
    .stats { gap: 28px !important; margin-bottom: 32px !important; }

    .hero-title { font-size: 1.9rem !important; }
    .hero-subtitle { font-size: 0.92rem !important; margin-bottom: 0 !important; }
    .badge, .hero-chip { margin-bottom: 16px !important; }
}

@media (max-width: 480px) {
    .space-bg .nebula { filter: blur(70px); }
    .space-bg .nebula-1 { width: 320px; height: 320px; top: -30%; left: -25%; opacity: 0.12; }
    .space-bg .nebula-2 { width: 260px; height: 260px; right: -30%; opacity: 0.09; }
    .space-bg .nebula-3 { width: 240px; height: 240px; bottom: -20%; left: -5%; opacity: 0.10; }
    .space-bg .nebula-4 { width: 170px; height: 170px; right: 0%; opacity: 0.05; }

    .results:not(.hidden) {
        padding-top: 0;
        padding-bottom: 16px;
    }

    .profile-pic-wrapper { width: 80px !important; height: 80px !important; }
    .profile-pic { width: 72px !important; height: 72px !important; }

    .profile-card { margin: 0 0 8px !important; }

    .connections-container { padding: 0 14px 14px !important; }

    .content-container {
        padding: 14px !important;
    }

    .content-tabs {
        margin-bottom: 14px !important;
    }

    .content-panel {
        padding: 12px 0 0 !important;
    }

    .features { grid-template-columns: 1fr !important; padding: 0 16px !important; }
    .stats { gap: 24px !important; }

    .hero-title { font-size: 1.55rem !important; margin-bottom: 10px !important; }
    .badge, .hero-chip { margin-bottom: 14px !important; font-size: 10.5px !important; }
    .hero-subtitle { font-size: 0.88rem !important; }
}


/* ═══════════ MOBILE FULL-BLEED PANELS ═══════════ */
/* Placed last so it wins over the 480px block's profile-card margin shorthand.
   Stretches the profile card, connections list and viewer content panels
   edge-to-edge on phones, reclaiming the container's side padding. Each panel
   keeps its own internal padding, so content never sits against the screen
   edge. The extra width feeds directly into the Zone C infeed and Zone E grid
   ad units that live inside these panels. */
@media (max-width: 768px) {
    .profile-card,
    .connections-container,
    .content-container {
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    /* The connections list runs fully edge-to-edge so the Zone C infeed ad is a
       true 100vw unit: drop the container + tab-panel side padding (that stray
       2px was the "tiny padding" on the infeed), then re-inset only the header
       text and filter pill via margin so the content still breathes. The
       .user-item rows keep their own 8px padding, and the content panels below
       KEEP their padding so the media grid holds its original column count. */
    .connections-container,
    .tab-panel {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .panel-header,
    .filter-bar {
        margin-left: 14px !important;
        margin-right: 14px !important;
    }
}


/* ═══════════ RESERVE LATE-INSERTED BLOCKS (CLS) ═══════════ */
/* ads.js (Zone B, before #results) and bugreport.js (#bug-report, after it)
   insert these after first paint, which shifted #lower-sections by 330px.
   Same height and margins as the real boxes; each rule stops matching as soon
   as its element exists. Keep in sync with ads.js and bugreport.js. The
   [style] guard releases the reservation in ads.js capture mode. */
main:not(:has(> #ad-zone-a-mount[style])) > .container:has(> #results):not(:has(> .ad-zone-b))::before {
    content: "";
    display: block;
    height: 250px;
    margin: 16px 0;
}

main > .container:has(> #results):not(:has(> #bug-report))::after {
    content: "";
    display: block;
    height: 44px;
    margin: 18px 0;
}

@media (max-width: 768px) {
    main:not(:has(> #ad-zone-a-mount[style])) > .container:has(> #results):not(:has(> .ad-zone-b))::before {
        margin: 4px 0 8px;
    }
}

/* ==== viewer-landing.css ==== */
/* Tool landing page styles (hero, search, features, steps, FAQ).
   Shared by the Story / Post / Reel / Highlight viewer pages.
   Extracted from per-page inline <style> blocks (identical across pages). */

.hero-section {
    max-width: 680px;
    margin: 0 auto;
    padding: clamp(32px, 6vh, 60px) 20px 0;
    text-align: center;
}

.badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 20px;
}

.hero-title {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    /* Breathing room under the header now that Zone A isn't filling it. */
    margin-top: clamp(14px, 3vw, 28px);
    margin-bottom: 20px;
}

.hero-title .highlight {
    color: var(--accent-color);
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 28px;
    line-height: 1.6;
    max-width: 630px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 20px;
        line-height: 1.5;
    }
    .badge {
        margin-bottom: 14px;
    }
    .hero-title {
        margin-bottom: 14px;
    }
}

.hero-section .search-container {
    max-width: 540px;
    margin: 0 auto 18px;
}

.hero-section .search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    transition: all 0.2s ease;
}

.hero-section .search-box:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.08);
}

.hero-section .at-symbol {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-tertiary);
    user-select: none;
}

.hero-section .search-box input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.05rem;
    background: transparent;
    color: var(--text-primary);
    padding: 12px 0;
}

.hero-section .search-box input::placeholder {
    color: var(--text-tertiary);
}

.hero-section .search-btn {
    background: var(--search-btn-bg);
    color: var(--search-btn-color);
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-section .search-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.hero-section .search-btn svg {
    width: 20px;
    height: 20px;
}

.stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin-bottom 0.4s ease;
    opacity: 1;
    transform: translateY(0);
    max-height: 100px;
    overflow: hidden;
}

.stats.hidden {
    opacity: 0;
    transform: translateY(-20px);
    max-height: 0;
    margin-bottom: 0;
}

.hero-section .stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.hero-section .stat-icon {
    width: 18px;
    height: 18px;
    color: var(--accent-color);
    flex-shrink: 0;
}

.features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 900px;
    margin: 0 auto 36px;
    padding: 0 20px;
}

.feature {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 22px 18px;
    text-align: center;
    transition: all 0.2s ease;
}

.feature:hover {
    border-color: var(--accent-color);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.feature-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    color: var(--accent-color);
}

.feature-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.feature-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Lower sections - Hidden initially, shown when not searching */
.lower-sections {
    margin-top: 16px;
}

.lower-sections.pushed-down {
    display: none;
}

.steps {
    max-width: 900px;
    margin: 0 auto 44px;
    padding: 0 20px;
}

.steps-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 28px;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.step {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 22px 24px;
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--text-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.step-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.step-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.faq {
    max-width: 750px;
    margin: 44px auto;
    padding: 0 20px;
}

.faq-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 28px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.faq-item {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-light);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-q {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.faq-a {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.story-viewer-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}

.story-viewer-link:hover {
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .features {
        grid-template-columns: 1fr;
    }
    .stats {
        gap: 24px;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .features {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Follow Tracker gateway CTA (homepage funnel).
   Deliberately short copy — one bold label + arrow — so it reads as a button,
   not a paragraph. The full keyword phrase lives in title/aria-label.
   Translucent rather than a solid gradient slab: it should invite the click
   without competing with the hero. */
.recent-follows-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: -4px auto 30px;
    padding: 7px 16px;
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.15) 0%, rgba(var(--cta-warm-rgb), 0.2) 100%);
    border: 1px solid rgba(var(--cta-warm-rgb), 0.34);
    border-radius: 11px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 12px rgba(var(--accent-color-rgb), 0.12);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.recent-follows-cta:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--cta-warm-rgb), 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 4px 16px rgba(var(--accent-color-rgb), 0.2);
}

.recent-follows-cta:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.recent-follows-cta__icon {
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
}

.recent-follows-cta__label {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.recent-follows-cta__arrow {
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.recent-follows-cta:hover .recent-follows-cta__arrow {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .recent-follows-cta {
        gap: 7px;
        padding: 8px 16px;
        margin: 0 auto 24px;
    }
    .recent-follows-cta__label {
        font-size: 0.875rem;
    }
}

/* ── Homepage guide: text-first content below the tool ──────────────────────
   Plain readable copy in one left-aligned column: no cards, icon grids or
   emoji tiles. Namespaced (lp-*) so the other viewer pages that share this
   stylesheet are unaffected. */
.lp-guide {
    max-width: 720px;
    margin: 12px auto 0;
    padding: 0 20px 8px;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text-secondary);
    text-align: left;
    overflow-wrap: break-word;
}

.lp-guide h2 {
    font-size: 1.45rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.lp-guide h3 {
    font-size: 1.08rem;
    line-height: 1.4;
    font-weight: 650;
    color: var(--text-primary);
    margin: 22px 0 6px;
}

.lp-guide p { margin: 0 0 14px; }
.lp-guide p:last-child { margin-bottom: 0; }

.lp-guide strong {
    color: var(--text-primary);
    font-weight: 600;
}

.lp-guide a {
    color: var(--accent-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

[data-theme="light"] .lp-guide a { color: #c8005a; }

.lp-guide code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(127, 127, 127, 0.16);
    color: var(--text-primary);
}

.lp-sec {
    padding: 30px 0;
    border-top: 1px solid var(--border);
    scroll-margin-top: 64px;
    /* Below-the-fold copy: skip layout/paint until it nears the viewport. */
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

.lp-meta {
    font-size: 0.875rem;
    margin: 0 0 12px;
}

.lp-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 26px;
    font-size: 0.875rem;
    line-height: 1.2;
}

.lp-guide .lp-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-primary);
    text-decoration: none;
}

.lp-guide .lp-toc a:hover { border-color: var(--accent-color); }

.lp-list,
.lp-steps {
    margin: 0 0 14px;
    padding-left: 1.3em;
}

.lp-list li,
.lp-steps li {
    margin: 0 0 10px;
    padding-left: 4px;
}

.lp-steps li::marker {
    color: var(--accent-color);
    font-weight: 700;
}

.lp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 4px 0 18px;
}

.lp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
    line-height: 1.45;
}

.lp-table th,
.lp-table td {
    text-align: left;
    vertical-align: top;
    padding: 10px 10px 10px 0;
    border-bottom: 1px solid var(--border);
}

.lp-table thead th {
    color: var(--text-primary);
    font-weight: 650;
}

.lp-table tbody th {
    width: 42%;
    color: var(--text-primary);
    font-weight: 500;
}

.lp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.lp-disclaimer {
    font-size: 0.875rem;
    line-height: 1.6;
    padding: 24px 0 8px;
    border-top: 1px solid var(--border);
}

@media (max-width: 480px) {
    .lp-guide {
        padding: 0 16px 8px;
        line-height: 1.65;
    }
    .lp-guide h2 { font-size: 1.3rem; }
    .lp-sec { padding: 26px 0; }
    .lp-table { font-size: 0.875rem; }
    .lp-table th,
    .lp-table td { padding-right: 8px; }
}