/* ============================================================================
   YOUTUBE COACH - MAIN STYLES
   ============================================================================ */

/* AUDIT-ONLY MODE: Force-hide debug/loading/evidence artifacts */
.fetching-bar,
.loading-pill,
.progress-pill,
#fetchStatus,
#statusLine,
#debugLink,
#rawJsonLink,
#rawJson,
#auditStatus,
#toggleRawAudit,
#auditRaw,
#evidenceMount,
#evidenceSection,
#topPerformerEvidenceMount,
.evidence-section,
.response-line,
.debug-line {
    display: none !important;
}

/* --- BASE STYLES --- */
:root {
    --bg-dark: #0a0e16;
    --bg-card: #1e1e1e;
    --border-color: #333;
    --accent-color: #d32f2f;
    --text-main: #e0e0e0;
    --text-muted: #888;

    /* New Global Card Tokens (Analytics Style) */
    --card-bg: rgba(10, 14, 22, 0.6);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-radius: 16px;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --card-backdrop: blur(12px);
}

body {
    background-color: var(--bg-dark);
    color: #e5e7eb;
    font-family: 'Inter', sans-serif;
    margin: 0;
    overflow-x: hidden;
    line-height: 1.5;
}

/* Shared UI Card Class (Strict Normalization) */
.ui-card,
.glassCard,
.card,
.panel {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: none !important;
    /* Analytics style is flat/subtle */
    backdrop-filter: var(--card-backdrop) !important;
    -webkit-backdrop-filter: var(--card-backdrop) !important;
}

/* Header/Nav */
header {
    background-color: #000000;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-weight: 800;
    color: #ef4444;
    text-decoration: none;
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

nav {
    display: flex;
    align-items: center;
}

.nav-link {
    color: #999;
    text-decoration: none;
    margin-left: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-link:hover,
.nav-link.active {
    color: white;
}

/* Main Layout */
main {
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Generic Card (Legacy Support) */
/* Generic Card (Unified with Analytics Glass Style) */
.card {
    background: rgba(10, 14, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: none;
}

.card h1 {
    margin-top: 0;
    color: white;
    font-size: 2rem;
}

.card h2 {
    margin-top: 0;
    font-size: 1.2rem;
    color: white;
    margin-bottom: 10px;
}

.card h3 {
    margin-top: 0;
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 15px;
}

.card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* Standard Buttons */
.btn {
    display: inline-block;
    background: #333;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.btn:hover {
    background: #444;
    border-color: #555;
}

/* Modal & Utilities */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.hidden {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

/* --- Top Performer Evidence (Strict Grid) --- */
.tpeGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 14px;
}

@media (max-width: 1100px) {
    .tpeGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.tpeCard {
    display: block;
    /* Strict block (User Request) */
    text-decoration: none;
    border: 1px solid rgba(255, 40, 40, 0.65);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.tpeCard:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 40, 40, 0.95);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45);
}

.tpeThumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: #111;
}

.tpeBody {
    padding: 12px 14px 14px;
}

.tpeTitle {
    color: #fff;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.25;
    font-size: 0.95rem;
    /* Adjustable */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tpeTag {
    color: #37d67a;
    font-size: 12px;
    margin-bottom: 6px;
}

.tpeMeta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}

.modal-content {
    position: relative;
    z-index: 1001;
    background: var(--bg-card);
    padding: 30px;
    border-radius: 16px;
    width: 400px;
    max-width: 90%;
    border: 1px solid var(--border-color);
    text-align: center;
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #aaa;
    font-size: 0.85rem;
}

.input-group select {
    width: 100%;
    padding: 10px;
    background: #222;
    border: 1px solid #444;
    color: white;
    border-radius: 6px;
    outline: none;
}

.input-group select:focus {
    border-color: var(--accent-color);
}

/* --- HERO REDESIGN STYLES --- */

.hero-section {
    position: relative;
    width: 100%;
    margin-top: -30px;
    /* Pull up to remove header gap */
    min-height: 480px;
    /* Taller for cinematic feel */
    min-height: 480px;
    /* Taller for cinematic feel */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    border: 1px solid #333;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Complex gradient: Dark Vignette + Bottom Fade */
    /* Complex gradient: Dark Vignette + Bottom Fade */
    background: linear-gradient(rgba(0, 0, 0, .40), rgba(0, 0, 0, .40)), url("/assets/hero-bg.png?v=2");
    background-size: cover;
    background-position: center;
    z-index: 1;
    backdrop-filter: blur(1px);
    /* Subtle depth */
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 900px;
    padding: 20px;
}

.hero-content h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 2.7rem;
    /* Base +20% */
    line-height: 1.1;
    color: #e53935;
    /* Deep Red Primary */
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
    /* Stronger drop shadow for pop */
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8), 0 10px 40px rgba(0, 0, 0, 0.9);
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(30px);
}

.hero-highlight {
    display: block;
    /* Force new line logic visual behavior if br removed, but sizing key */
    font-size: 1.3em;
    /* 30% larger than base parent */
    margin-top: 10px;
    letter-spacing: -2px;
    /* Tighter for large text */
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content p {
    font-size: 1.25rem;
    color: #f5f5f5;
    font-weight: 500;
    letter-spacing: 0.5px;
    /* Stronger shadow for subtitle */
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.9), 0 4px 10px rgba(0, 0, 0, 0.8);
    opacity: 1;
    /* Increase opacity for readability */
    max-width: 600px;
    margin: 0 auto;
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
    opacity: 0;
    transform: translateY(30px);
}

/* Action Cards */
.action-cards-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 50px;
}

@media (max-width: 768px) {
    .action-cards-container {
        grid-template-columns: 1fr;
    }

    .hero-content h1 {
        font-size: 3rem;
    }
}

.action-card {
    background: rgba(20, 20, 20, 0.85);
    /* Charcoal */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.action-card:hover {
    transform: translateY(-8px);
    border-color: rgba(229, 57, 53, 0.3);
    /* Red Tint on Border */
    box-shadow: 0 20px 60px rgba(229, 57, 53, 0.15), 0 0 0 1px rgba(229, 57, 53, 0.1) inset;
    /* Subtle Red Glow */
}

.action-card h2 {
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.action-card p {
    color: #aaaaaa;
    font-size: 1.1rem;
    margin-bottom: 30px;
    line-height: 1.5;
}

.btn-hero-cta {
    display: inline-block;
    background: #d32f2f;
    color: white;
    padding: 16px 40px;
    border-radius: 8px;
    /* Rounded but solid */
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    border: none;
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.3);
    transition: all 0.3s ease;
}

.btn-hero-cta:hover {
    background: #c62828;
    box-shadow: 0 0 30px rgba(211, 47, 47, 0.8), 0 0 10px rgba(255, 255, 255, 0.2);
    /* Intense Glow */
    transform: scale(1.05);
}

/* --- DASHBOARD SPLIT LAYOUT (Responsive Grid) --- */
/* --- DASHBOARD BOTTOM ROW (Strict 2-Column Grid) --- */
/* --- DASHBOARD BOTTOM ROW (Strict 2-Column Grid) --- */
.dashboard-bottom-row {
    grid-column: 1 / -1;
    /* Critical: Span parent grid */
    display: grid;
    grid-template-columns: minmax(520px, 2fr) minmax(360px, 1fr);
    gap: 24px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

.analyze-channel-card {
    background: linear-gradient(135deg, #0b0b0f 0%, #14141a 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Left align text */
    padding: 30px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* --- PREMIUM SCRIPT GENERATOR --- */
.premium-topic-input {
    background: #080808;
    /* Near Black */
    color: white;
    font-size: 1.2rem;
    font-family: inherit;
    border: 1px solid rgba(229, 57, 53, 0.3);
    border-radius: 12px;
    padding: 0 1.2rem;
    /* Comfortable horizontal padding */
    width: 100%;
    height: 52px;
    /* Fixed height 52px */
    box-sizing: border-box;
    transition: all 0.3s ease;
    resize: none;
    /* No resize allowed */
}

/* Script Page Container Override */
.script-generator-container {
    padding: 30px;
    max-width: 1080px;
    /* ~10% narrower than standard 1200px */
    margin: 0 auto;
}

.premium-topic-input:focus {
    outline: none;
    border-color: #e53935;
    box-shadow: 0 0 15px rgba(229, 57, 53, 0.2);
    background: #350d0d;
}

.premium-topic-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.analyze-channel-card h3 {
    color: white;
    font-size: 1.4rem;
    margin-bottom: 12px;
    font-weight: 700;
}

.analyze-channel-card p {
    color: #aaa;
    font-size: 1rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .dashboard-bottom-row {
        grid-template-columns: 1fr;
    }
}

/* --- PREMIUM HOOK GRID SYSTEM --- */
.hooks-grid-3x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.premium-hook-card {
    background: #0f0f11;
    /* Dark Charcoal */
    border: 1.5px solid rgba(229, 57, 53, 0.4);
    /* Subtle Red Outline */
    border-radius: 16px;
    /* Smooth 2xl */
    padding: 15px;
    cursor: pointer;
    transition: all 0.2ms ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.premium-hook-card:hover {
    transform: translateY(-2px);
    border-color: rgba(229, 57, 53, 0.8);
    /* Brighter Red */
    background: #151518;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.premium-hook-card.selected {
    border-color: #e53935;
    /* Strong Red */
    background: #0f0f11;
    /* Keep Dark */
    box-shadow: 0 0 15px rgba(229, 57, 53, 0.2);
    /* Faint Glow */
}

.hook-type-tag {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.hook-text-body {
    font-size: 0.95rem;
    color: #eee;
    line-height: 1.4;
}

/* Responsive Grid */
@media (max-width: 900px) {
    .hooks-grid-3x3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .hooks-grid-3x3 {
        grid-template-columns: 1fr;
    }
}

/* --- POLISHED RESULTS STYLING --- */
/* 1. Red Section Headers */
.card-header-red {
    color: var(--accent-color, #d32f2f) !important;
    border-left: 4px solid var(--accent-color, #d32f2f);
    padding-left: 12px;
    margin-bottom: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1.1rem;
}

/* 2. Text Accents */
.text-accent-red {
    color: var(--accent-color, #d32f2f);
    font-weight: bold;
}

.text-accent-green {
    color: #4caf50;
    font-weight: bold;
}

.text-accent-blue {
    color: #2196f3;
    font-weight: bold;
}

/* 3. Thumbnail Polish */
.thumbnail-card {
    background: linear-gradient(180deg, #1e1e1e 0%, #171717 100%);
    border: 1px solid #333;
    border-left: 3px solid var(--accent-color, #d32f2f);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.thumbnail-card:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #252525 0%, #1e1e1e 100%);
    border-color: #555;
    border-left-color: #ff5252;
}

.thumbnail-visual {
    color: #ccc;
    font-style: italic;
    display: block;
    margin-top: 5px;
    font-size: 0.9rem;
    padding-left: 10px;
    border-left: 2px solid #444;
}

/* 4. Why This Works Polish */
.result-label {
    color: #4caf50;
    /* Green */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    background: rgba(76, 175, 80, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
}

.result-key-insight {
    border-left: 3px solid #4caf50;
    padding-left: 12px;
    color: #e0e0e0;
    margin: 10px 0;
    font-style: italic;
    background: rgba(76, 175, 80, 0.05);
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
}

/* --- ANALYTICS PAGE LAYOUT --- */
/* App layout safety: sidebar + main */
:root {
    --sidebar-w: 256px;
}

.app-shell {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.sidebar {
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 30;
}

.main-panel {
    flex: 1 1 auto;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background: radial-gradient(1200px 700px at 30% -10%, rgba(56, 189, 248, 0.12), transparent 55%),
        radial-gradient(900px 600px at 90% 10%, rgba(168, 85, 247, 0.10), transparent 60%),
        #070A10;
}

/* Analytics page wrapper */
.analytics-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 22px 28px;
    position: relative;
    z-index: 1;
}

/* Sticky header */
.analytics-sticky-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 14px 0 12px;
    background: rgba(7, 10, 16, 0.78);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    margin-bottom: 16px;
}

.analytics-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
}

.analytics-title {
    font-size: 18px;
    letter-spacing: 0.4px;
    color: rgba(241, 245, 249, 0.92);
    font-weight: 600;
}

/* Cards */
.analytics-card {
    margin-top: 16px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.62), rgba(2, 6, 23, 0.50));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    position: relative;
}

.analytics-card * {
    position: relative;
    z-index: 1;
}

.analytics-card-hd {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.analytics-card-title {
    color: rgba(226, 232, 240, 0.92);
    font-size: 14px;
    font-weight: 600;
}

.analytics-card-bd {
    padding: 14px 16px 16px;
}

/* Connect slot */
.connect-slot {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.connect-slot input {
    flex: 1 1 320px;
    min-width: 260px;
}

/* Empty state */
.analytics-empty {
    color: rgba(148, 163, 184, 0.8);
    font-size: 13px;
    padding: 14px 2px;
}

/* Kill stray absolute layers */
.analytics-page .absolute,
.analytics-page [data-overlay="true"] {
    pointer-events: none;
}

/* Hide debug panels */
#view-raw-json,
#raw-json,
.debug-panel,
.debug-lines {
    display: none !important;
}

/* Button loading states */
button[aria-busy="true"],
button.is-loading,
button[data-loading="true"] {
    opacity: 0.85;
    cursor: wait;
}

button:disabled {
    opacity: 0.85;
}

/* Legacy support for existing classes */
.main {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    background: #0a0e16;
}

.mainInner {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 24px 80px;
}

.analyticsHeader {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: rgba(10, 14, 22, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.headerLeft {
    display: flex;
    align-items: center;
    gap: 10px;
}

.headerTitle {
    font-size: 15px;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.92);
}

.headerRight {
    display: flex;
    align-items: center;
    gap: 10px;
}

.glassCard {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    margin-bottom: 20px;
}

.cardTitle {
    font-size: 13px;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 6px;
}

.cardSub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 12px;
}

.connectRow {
    display: flex;
    gap: 10px;
    align-items: center;
}

.darkInput {
    flex: 1;
    height: 40px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    padding: 0 12px;
    outline: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.darkInput::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.darkInput:focus {
    border-color: rgba(60, 200, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(60, 200, 255, 0.12);
}

.primaryBtn {
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(90deg, rgba(0, 180, 120, 1), rgba(0, 210, 140, 1));
    color: #07130f;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.primaryBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 210, 140, 0.3);
}

.iconBtn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 16px;
}

.iconBtn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
}

.trendsCard {
    min-height: 400px;
}

.analytics-chartWrap {
    width: 100%;
    height: 360px;
    position: relative;
    margin-top: 10px;
}

.analytics-chartWrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.analytics-emptyState {
    padding: 18px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 10px;
}

.analytics-emptyTitle {
    font-weight: 700;
    margin-bottom: 6px;
    color: #e0e0e0;
}

.analytics-emptySub {
    opacity: 0.75;
    font-size: 13px;
    line-height: 1.35;
    color: #aaa;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .main {
        margin-left: 0;
    }

    .mainInner {
        padding: 16px 16px 60px;
    }

    .analyticsHeader {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .headerRight {
        width: 100%;
        justify-content: flex-end;
    }

    .connectRow {
        flex-direction: column;
        align-items: stretch;
    }

    .darkInput {
        width: 100%;
    }

    .primaryBtn {
        width: 100%;
    }

    .analytics-chartWrap {
        height: 260px;
    }
}

/* --- SIDEBAR NAV FIX --- */
/* Force sidebar nav to stack vertically, not spread horizontally */
aside nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

aside nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    position: static !important;
    transform: none !important;
}

/* --- TOP NAVIGATION BAR --- */
:root {
    --topnav-h: 64px;
}

.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--topnav-h);
    background: rgba(10, 14, 22, 0.95);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.topnav-inner {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    align-items: center;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.topnav-logo {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #c1121f;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    justify-self: start;
    text-shadow:
        -1px -1px 0px rgba(255, 100, 100, 0.4),
        -1px -1px 1px rgba(255, 255, 255, 0.3),
        1px 1px 0px rgba(0, 0, 0, 0.5),
        2px 2px 0px rgba(0, 0, 0, 0.4),
        3px 3px 0px rgba(0, 0, 0, 0.3),
        4px 4px 0px rgba(0, 0, 0, 0.2),
        5px 5px 0px rgba(0, 0, 0, 0.1),
        0 0 30px rgba(193, 18, 31, 0.6),
        0 0 1px rgba(0, 0, 0, 0.8);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

.topnav-links {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-self: center;
}

.topnav-link {
    padding: 8px 16px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.topnav-link:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
}

.topnav-link.active {
    background: rgba(239, 68, 68, 0.15);
    color: rgba(248, 113, 113, 1);
    border: 1px solid rgba(239, 68, 68, 0.45);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.topnav-right {
    justify-self: end;
}

/* Hide sidebar nav links (moved to top nav) */
aside nav {
    display: none !important;
}

/* Hide sidebar "Content Studio" title to avoid duplication */
aside>div:first-child {
    display: none !important;
}

/* Adjust main content for top nav - SINGLE offset only */
body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

main,
.main,
.flex.h-screen {
    padding-top: var(--topnav-h) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .topnav-inner {
        padding: 0 8px 0 0;
    }

    .topnav-links {
        gap: 4px;
    }

    .topnav-link {
        padding: 6px 10px;
        font-size: 13px;
    }

    .topnav-logo {
        font-size: 22px;
    }
}




/* Floating User Card (Analytics) */
.user-floating-card {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 200px;
    padding: 12px;
    background: rgba(31, 41, 55, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(107, 114, 128, 0.2);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    z-index: 40;
    transition: all 0.2s ease;
}

.user-floating-card:hover {
    background: rgba(31, 41, 55, 0.8);
    border-color: rgba(107, 114, 128, 0.3);
}

@media (max-width: 768px) {
    .user-floating-card {
        width: 160px;
        padding: 10px;
        bottom: 16px;
        left: 16px;
    }
}

/* Analytics Page: Centered Content Container (Authoritative - Loads Last) */
/* Specific wrapper for analytics content to ensure perfect centering */
/* Multi-state coverage to prevent reversion after page load */

.analytics-center,
body.loaded .analytics-center,
body.page-ready .analytics-center,
.analytics-center[style] {
    width: 100% !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 24px 24px 80px !important;
    box-sizing: border-box !important;
    /* Force if parent is grid */
    grid-column: 1 / -1 !important;
}

/* Ensure main container doesn't interfere with centering - all states */
.main,
body.loaded .main,
body.page-ready .main,
.main[style] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    display: block !important;
    /* Override any grid template */
    grid-template-columns: none !important;
}

/* ==========================================================================
   GLOBAL STYLE NORMALIZATION (STRICT)
   Target: Match Analytics Page Card Style EXACTLY
   ========================================================================== */

:root {
    /* Source of Truth - Analytics Card Style */
    --mantis-card-bg: rgba(10, 14, 22, 0.75);
    --mantis-card-border: rgba(255, 255, 255, 0.08);
    --mantis-card-radius: 16px;
    --mantis-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --mantis-card-backdrop: blur(12px);
}

/* 
   .mantis-card
   Applicable to: Dashboard tiles, Market Trends, Script Panels, etc.
   Using !important to override Tailwind utilities and inline styles
*/
.mantis-card,
.card,
.trend-card,
.ui-card,
.glassCard,
.action-card,
.analyze-channel-card,
.analytics-card,
.analyticsHeader,
.trend-card,
.mantis-card {
    background: var(--mantis-card-bg) !important;
    border: 1px solid var(--mantis-card-border) !important;
    border-radius: var(--mantis-card-radius) !important;
    box-shadow: var(--mantis-card-shadow) !important;
    backdrop-filter: var(--mantis-card-backdrop) !important;
    -webkit-backdrop-filter: var(--mantis-card-backdrop) !important;
    color: #e0e0e0 !important;
}

/* Ensure headings inside cards pop correctly */
.mantis-card h1,
.mantis-card h2,
.mantis-card h3,
.card h1,
.card h2,
.card h3,
.card h3,
.action-card h2,
.analyze-channel-card h3,
.analytics-card h2,
.analytics-card h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 
   RESTORE HOVER GLOW 
   Re-enable interactive states that were suppressed by strict overrides.
   Applies to interactive cards like Action Cards, Trend Cards.
*/
.mantis-card:hover,
.action-card:hover,
.glassCard:hover,
.premium-hook-card:hover,
.analyze-channel-card:hover,
.analytics-card:hover,
.trend-card:hover,
.analyticsHeader:hover {
    transform: translateY(-2px);
    border-color: rgba(229, 57, 53, 0.6) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(229, 57, 53, 0.5) !important;
    /* RED GLOW */
    /* The "Glow" */
    background: linear-gradient(145deg, rgba(20, 25, 35, 0.7), rgba(10, 14, 22, 0.8)) !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
}

/* --- Red Glass Theme Inputs (Script Generator & General) --- */
.premium-input,
.premium-select,
.premium-topic-input {
    background: rgba(0, 0, 0, 0.6) !important;
    /* Black/Dark Glass by default */
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* Subtle border */
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1rem;
    width: 100%;
    transition: all 0.3s ease;
    appearance: none;
}

/* Fix for Select Arrow */
.premium-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

/* Force dropdown list to be solid black */
.premium-select option,
.premium-select optgroup {
    background-color: #000000 !important;
    color: white !important;
}

/* Widen specific dropdowns for long text (Niches) */
#nicheSelect,
#trend-niche {
    width: auto !important;
    min-width: 260px;
    /* Safe minimum */
    flex-shrink: 0;
    /* Prevent collapsing in flex containers */
}

#trend-platform {
    width: auto !important;
    min-width: 110px;
    flex-shrink: 0;
}

/* Hover & Focus State - Turns Red */
.premium-input:hover,
.premium-select:hover,
.premium-topic-input:hover,
.premium-input:focus,
.premium-select:focus,
.premium-topic-input:focus {
    outline: none;
    border-color: rgba(239, 68, 68, 0.8) !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
    background: rgba(60, 10, 10, 0.9) !important;
    /* Red Glass on interaction */
}

.premium-input::placeholder,
.premium-topic-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}