/* ============================================================================
   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;
    --accent: var(--accent-color);
    --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);
}

/* --- DASHBOARD GREETING (universal — all viewports) --- */

.dashboard-greeting {
    padding: 16px 0 0;
    margin-bottom: 24px;
}
.dashboard-greeting-title {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.dashboard-greeting-sub {
    font-size: 16px;
    color: rgba(229, 231, 235, 0.6);
    margin: 0;
}

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

/* Hero is marketing-only; hidden on the logged-in dashboard at all viewports. */
.hero-section { display: none !important; }

.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: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .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);
}

/* Inline "View all trends →" link under the 3-item dashboard preview */
.view-all-trends-inline {
    display: block;
    margin: 8px 4px 0;
    padding: 10px 4px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #fda4af;
    text-decoration: none;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    transition: color 0.15s ease;
}
.view-all-trends-inline:hover {
    color: #fff;
}

/* --- DASHBOARD SPLIT LAYOUT (Responsive Grid) --- */
.dashboard-split-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Market Trends nested grid (viz + scrolling list) */
.market-trends-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
    align-items: stretch;
    height: 580px;
    max-height: 580px;
    margin-bottom: 40px;
    overflow: hidden;
    position: relative;
}

/* --- 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;
}

/* Hamburger button (mobile only; hidden on desktop) */
.topnav-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}
.topnav-hamburger:hover,
.topnav-hamburger[aria-expanded="true"] {
    color: #fff;
}

/* Mobile dropdown menu (hidden unless .open applied by JS) */
.topnav-mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(10, 14, 22, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    padding: 8px 12px;
    z-index: 999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    flex-direction: column;
    gap: 4px;
}
.topnav-mobile-menu.open {
    display: flex;
}
.topnav-mobile-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.topnav-mobile-link:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}
.topnav-mobile-link.active {
    background: rgba(239, 68, 68, 0.15);
    color: rgba(248, 113, 113, 1);
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
}

/* 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);
}

/* ==========================================================================
   DASHBOARD MOBILE FIX (< 768px)
   Collapses the 2fr/1fr split + nested trends grids to a single column,
   makes hero and cards fill available width, prevents user card overlap,
   and allows the top nav to scroll horizontally instead of compressing.
   ========================================================================== */
@media (max-width: 768px) {
    /* Full-width main content wrapper */
    main,
    .main {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Hero fills the screen instead of sitting in a half-width column */
    .hero-section {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-height: 320px;
        box-sizing: border-box;
    }
    .hero-content {
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    /* Outer split grid (Trends + Bottom Row) → single column */
    .dashboard-split-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Nested Market Trends grid (viz + list) → stacked; drop fixed height.
       Chart viz hidden on mobile — too complex at this size; list only. */
    .market-trends-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
        max-height: none !important;
        gap: 16px !important;
    }
    .market-trends-grid > .ui-card {
        height: auto !important;
        min-height: 280px;
    }
    #trends-viz {
        display: none !important;
    }

    /* Market trends header: stack h2 above controls; controls wrap */
    .market-trends-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .market-trends-controls {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }
    .market-trends-controls select,
    .market-trends-controls button {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Usage tracker: override inline max-width:900px so it fills the viewport */
    #usage-tracker {
        max-width: 100% !important;
        margin: 16px auto 0 !important;
        padding: 0 12px !important;
        box-sizing: border-box;
    }

    /* Dashboard bottom row already has a 900px breakpoint; reinforce */
    .dashboard-bottom-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Action cards: single column, full width, centered */
    .action-cards-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 16px !important;
        margin-bottom: 32px !important;
    }
    .action-card {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 24px !important;
        box-sizing: border-box;
    }

    /* Generic cards: prevent horizontal overflow on mobile */
    .card,
    .mantis-card,
    .ui-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Top nav: swap horizontal links for hamburger + dropdown */
    .topnav-inner {
        grid-template-columns: auto 1fr auto !important;
        padding: 0 12px !important;
    }
    .topnav-links {
        display: none !important;
    }
    .topnav-hamburger {
        display: inline-flex !important;
    }

    /* Floating user card: drop fixed positioning so it sits at page end
       and can't overlap the action cards on narrow screens. */
    .user-floating-card {
        position: static !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 24px 16px !important;
        bottom: auto !important;
        left: auto !important;
        box-sizing: border-box;
    }
}


/* ==========================================================================
   GLOBAL MOBILE LAYOUT FIX (< 768px) — applies across every page
   Complements the dashboard-specific block above. Covers containers that
   only set max-width (no width:100% fallback), form fields, typography
   caps, and page-specific layouts audited in analyze / pricing / script /
   trends / settings / upgrade / channel_breakdown / analytics / index.
   ========================================================================== */
@media (max-width: 768px) {
    /* ---- Generic container wrappers ---- */
    .container,
    .wrapper,
    .content,
    .page-content,
    .inner,
    section,
    .section {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* ---- Forms and inputs: full width, 44px tap target ---- */
    form {
        width: 100%;
        box-sizing: border-box;
    }
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    textarea,
    select,
    .premium-input,
    .premium-topic-input,
    .premium-select,
    .darkInput,
    .settings-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-height: 44px;
    }

    /* Buttons: full width + 44px tap target, except icon-only utilities */
    .btn,
    .btn-hero-cta,
    .primaryBtn,
    .email-btn,
    button.btn,
    button[type="submit"] {
        width: 100% !important;
        min-height: 44px;
        box-sizing: border-box;
    }

    /* ---- Typography caps ---- */
    h1 { font-size: clamp(22px, 6vw, 28px) !important; line-height: 1.15; }
    h2 { font-size: clamp(18px, 5vw, 22px) !important; line-height: 1.2; }
    h3 { font-size: clamp(16px, 4.5vw, 18px) !important; line-height: 1.25; }
    body, p { font-size: 15px; }

    /* ---- Page-specific: analyze.html ---- */
    /* Main audit card uses inline max-width:800px; let it fill the viewport */
    .card.mantis-card[style*="max-width: 800px"],
    .card.mantis-card[style*="max-width:800px"] {
        max-width: 100% !important;
        margin: 24px 0 0 !important;
        padding: 24px !important;
    }

    /* ---- Page-specific: pricing.html / index.html ---- */
    .pricing-section {
        padding: 48px 16px !important;
        min-height: auto !important;
    }
    .pricing-cards {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        gap: 16px !important;
    }
    .pricing-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* index.html hero / steps */
    .hero-split-left,
    .hero-split-right {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .steps-container {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        gap: 16px !important;
    }

    /* index.html inline <nav> (separate from .topnav) — allow horizontal scroll */
    body > nav,
    nav:not(.topnav):not(.topnav-links) {
        padding: 0 16px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- Page-specific: channel_breakdown.html ---- */
    #resultsContainer {
        max-width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box;
    }

    /* ---- Page-specific: script.html ---- */
    .script-generator-container {
        padding: 16px !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    /* Hook options grid using minmax(280px, 1fr) — force single column */
    .script-generator-container [style*="minmax(280px"],
    .script-generator-container [style*="minmax(280px, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    .input-group {
        width: 100%;
    }

    /* ---- Page-specific: trends.html ---- */
    .trends-page {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        padding-top: 88px !important;
        box-sizing: border-box;
    }
    .trends-controls {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 8px !important;
    }
    .trends-controls > * {
        width: 100%;
    }
    .trend-card,
    .trends-grid,
    .trends-list {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    /* ---- Page-specific: analytics.html ---- */
    .analytics-chartWrap,
    .analyticsChart,
    .chart-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .stat-card,
    .analyticsStatCard {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ---- Page-specific: settings.html ---- */
    .settings-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px 0 !important;
        padding: 0 16px !important;
        box-sizing: border-box;
    }
    .settings-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px;
    }
    .settings-input {
        max-width: 100% !important;
    }
    .danger-zone .btn,
    .danger-zone button {
        width: 100% !important;
    }

    /* ---- Page-specific: upgrade.html ---- */
    /* Inline <main style="max-width:960px"> + .topnav-inner override */
    main[style*="max-width:960px"],
    main[style*="max-width: 960px"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 16px 60px !important;
        box-sizing: border-box;
    }
    .topnav-inner[style*="max-width:960px"],
    .topnav-inner[style*="max-width: 960px"] {
        max-width: 100% !important;
        padding: 12px 16px !important;
    }

    /* ---- Page-specific: auth_landing.html ---- */
    .auth-wrap {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        padding: 24px 16px !important;
        box-sizing: border-box;
    }
    .auth-form,
    .auth-input,
    .email-btn {
        width: 100% !important;
        box-sizing: border-box;
    }
}


/* ==========================================================================
   TOAST (audit share link, etc.)
   ========================================================================== */
.mantis-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #111827;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 2000;
}

.mantis-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   PRINT / PDF EXPORT
   Triggered by window.mantisDownloadAuditPDF() (adds .pdf-mode then print()).
   Also applies for native browser Print.
   ========================================================================== */
@page {
    margin: 1cm;
}

@media print {
    /* Reset colors: black on white */
    html, body, body.pdf-mode {
        background: #ffffff !important;
        color: #000000 !important;
    }

    /* Hide every non-audit / non-breakdown element */
    nav,
    header,
    aside,
    .topnav,
    .topnav-inner,
    .topnav-links,
    .topnav-right,
    .user-floating-card,
    #usage-tracker,
    #payment-banner,
    .payment-banner,
    .btn,
    .btn-hero-cta,
    .audit-actions,
    .breakdown-actions,
    .no-print,
    footer,
    /* Channel breakdown: hide the input form + loading + diagnostics */
    #loadingOverlay,
    #errorPanel,
    #diagnosticsPanel,
    #techDiagPanel,
    .channel-breakdown-form,
    .breakdown-input-section,
    #breakdownForm,
    #suggestedCompetitorsContainer,
    #compWarningBanner {
        display: none !important;
    }

    main,
    .main {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    /* Audit / breakdown result panel: full width, on white */
    .audit-result-panel,
    #auditReportMount,
    #actionPlanMount,
    .breakdown-result-panel,
    #breakdownResult,
    #breakdownMount,
    #resultsContainer {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #ffffff !important;
        color: #000000 !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Branded header via ::before on first audit block */
    #auditReportMount::before {
        content: "MANTIS · Video Audit Report";
        display: block;
        font-weight: 800;
        font-size: 14pt;
        letter-spacing: 1px;
        color: #000;
        border-bottom: 2px solid #000;
        padding-bottom: 6pt;
        margin-bottom: 14pt;
    }

    /* Branded header for channel breakdown PDF */
    #resultsContainer::before {
        content: "MANTIS · Channel Breakdown Report";
        display: block;
        font-weight: 800;
        font-size: 14pt;
        letter-spacing: 1px;
        color: #000;
        border-bottom: 2px solid #000;
        padding-bottom: 6pt;
        margin-bottom: 14pt;
    }

    /* Generic card/nested styling for print */
    .card,
    .mantis-card,
    .ui-card,
    .advice-card {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    h1, h2, h3, h4, p, li, span, strong, em {
        color: #000000 !important;
    }

    a {
        color: #000000 !important;
        text-decoration: underline;
    }

    .score-badge {
        color: #000000 !important;
    }

    /* Ensure rubric grid + action plan still render block-by-block */
    .rubric-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ==========================================================================
   MOBILE-FIRST REDESIGN v2 — < 768px
   Native-app feel: thumb targets, tight spacing, compact density.
   Placed last so its !important rules beat earlier mobile blocks where needed.
   ========================================================================== */
@media (max-width: 768px) {
    /* Shrink topnav variable so all padding-top offsets recalc */
    :root { --topnav-h: 52px; }

    /* --- TYPOGRAPHY --- */
    body { line-height: 1.4; font-size: 14px; }
    h1 { font-size: 22px !important; line-height: 1.25; }
    h2 { font-size: 17px !important; line-height: 1.3; }
    h3 { font-size: 15px !important; line-height: 1.3; }
    p { font-size: 14px; line-height: 1.4; }

    /* --- 1. NAVIGATION --- */
    .topnav {
        height: 52px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    /* Logo far-left, hamburger far-right; no grid/centering on mobile */
    .topnav-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 12px !important;
        grid-template-columns: none !important;
    }
    .logo, .topnav-logo {
        font-size: 20px !important;
    }
    .topnav-hamburger {
        width: 40px !important;
        height: 40px !important;
        font-size: 22px !important;
    }
    /* Full-screen overlay menu */
    .topnav-mobile-menu {
        position: fixed !important;
        top: 52px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 52px) !important;
        padding: 20px 16px !important;
        background: #0a0e16 !important;
        border: none !important;
        box-shadow: none !important;
        overflow-y: auto;
        gap: 6px !important;
        z-index: 9999 !important;
    }
    .topnav-mobile-link {
        font-size: 18px !important;
        min-height: 56px !important;
        padding: 14px 18px !important;
    }

    /* --- 2. DASHBOARD GREETING (mobile overrides) --- */
    .dashboard-greeting {
        padding: 8px 4px 16px;
        margin-bottom: 12px;
    }
    .dashboard-greeting-title {
        font-size: 22px;
        margin: 0 0 4px;
        line-height: 1.25;
        letter-spacing: -0.3px;
    }
    .dashboard-greeting-sub {
        font-size: 14px;
    }

    /* --- 3. FEATURE CARDS (2 compact tiles) --- */
    .action-cards-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }
    .action-card {
        padding: 16px !important;
        margin: 0 !important;
        min-height: 128px;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between;
    }
    .action-card h2 {
        font-size: 15px !important;
        font-weight: 700;
        margin: 0 0 12px !important;
    }
    .action-card p { display: none !important; }
    .action-card .btn-hero-cta {
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }

    /* --- 4. SECTIONS SPACING --- */
    main {
        padding: 12px !important;
        /* Account for the 52px fixed nav so content isn't hidden under it */
        padding-top: calc(var(--topnav-h) + 12px) !important;
    }
    .dashboard-split-grid { gap: 12px !important; }
    .card,
    .mantis-card,
    .ui-card,
    .analyze-channel-card {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }

    /* --- 5. MARKET TRENDS (list only, compact, scrollable) --- */
    #trends-list {
        max-height: 300px !important;
        overflow-y: auto !important;
        padding-right: 4px;
    }
    #trends-list > div,
    #trends-list .trend-card,
    #trends-list .glassCard {
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
        font-size: 13px;
    }
    #trends-container {
        padding: 12px !important;
    }
    .market-trends-header h2 {
        margin: 0;
    }

    /* --- 6. USER CARD (compact horizontal layout) --- */
    .user-floating-card {
        padding: 8px 12px !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
    }
    .user-floating-card .flex {
        width: 100%;
    }
    .user-floating-card #user-avatar,
    .user-floating-card .w-10.h-10 {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 13px !important;
    }
    .user-floating-card .ml-3 {
        margin-left: 10px !important;
        flex: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .user-floating-card #user-display {
        font-size: 13px !important;
        margin: 0;
    }
    .user-floating-card #user-plan {
        font-size: 11px !important;
        margin: 0;
    }
    .user-floating-card #dashboard-upgrade-link {
        margin-left: auto !important;
        margin-top: 0 !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    /* --- 8. BUTTONS --- */
    .btn,
    .btn-hero-cta,
    button[type="submit"],
    .btn-primary {
        min-height: 48px;
        font-size: 15px;
        border-radius: 10px;
    }
    /* 2-col feature tiles keep the tighter 44px CTA from rule 3 */
    .action-card .btn-hero-cta {
        min-height: 44px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    /* --- 9a. FORMS (all pages: thumb-friendly inputs) --- */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select,
    .premium-select,
    .premium-input,
    .settings-input {
        min-height: 48px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }
    label,
    .settings-label {
        font-size: 14px !important;
    }

    /* --- 9b. RESULTS PANELS (analyze / script / channel_breakdown / trends / settings) --- */
    #resultsContainer,
    .results-panel,
    .analysis-card,
    .script-result,
    .breakdown-card,
    .settings-card,
    .trend-detail-panel {
        padding: 16px !important;
        font-size: 14px !important;
    }
}