/* =========================================================
   VIRALMINT AI — TREND INTELLIGENCE MOBILE
   Dedicated mobile override layer
   Load AFTER dashboard.css + trend-intelligence.css
   Target: compact, premium, low-scroll mobile UX
========================================================= */

@media (max-width: 920px) {

    html {
        scroll-behavior: smooth;
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
    }

    .trend-layout {
        width: 100%;
        min-width: 0;
    }

    .trend-main {
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        padding: 14px 12px 44px !important;
    }

    .trend-main > * {
        max-width: 100%;
        min-width: 0;
    }

    /* Compact mobile sidebar */
    .trend-sidebar {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 10px 10px 9px !important;
        overflow: visible !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.065) !important;
    }

    .trend-sidebar .sidebar-brand,
    .trend-sidebar .sidebar-logo,
    .trend-sidebar-logo {
        margin: 0 0 9px !important;
        min-height: 32px !important;
    }

    .trend-sidebar .sidebar-brand-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
    }

    .trend-sidebar .sidebar-brand-icon svg,
    .trend-sidebar .sidebar-brand-icon i {
        width: 16px !important;
        height: 16px !important;
    }

    .trend-sidebar .sidebar-brand-text {
        font-size: 0.88rem !important;
    }

    .trend-sidebar-menu,
    .trend-sidebar .sidebar-menu {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 5px !important;
    }

    .trend-sidebar .sidebar-link,
    .trend-sidebar .sidebar-menu a {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 35px !important;
        height: 35px !important;
        padding: 0 9px !important;
        gap: 7px !important;
        border-radius: 10px !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        white-space: nowrap;
        overflow: hidden;
    }

    .trend-sidebar .sidebar-link span,
    .trend-sidebar .sidebar-menu a span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .trend-sidebar .sidebar-link svg,
    .trend-sidebar .sidebar-link i,
    .trend-sidebar .sidebar-menu a svg,
    .trend-sidebar .sidebar-menu a i {
        width: 14px !important;
        height: 14px !important;
        flex: 0 0 14px;
    }

    .trend-sidebar .sidebar-bottom,
    .trend-sidebar .sidebar-pro-card,
    .trend-sidebar-pro-card {
        display: none !important;
    }

    /* Compact page intro */
    .trend-topbar {
        display: block !important;
        margin-bottom: 10px !important;
    }

    .trend-kicker-row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin-bottom: 8px !important;
    }

    .trend-kicker-row .dashboard-label,
    .trend-kicker-row .trend-beta-pill {
        font-size: 0.54rem !important;
        line-height: 1 !important;
    }

    .trend-kicker-row .trend-beta-pill {
        min-height: 21px !important;
        padding: 0 7px !important;
    }

    .trend-page-title {
        max-width: 100% !important;
        margin: 0 !important;
        font-size: 1.72rem !important;
        line-height: 1.04 !important;
        letter-spacing: -0.055em !important;
    }

    .trend-page-subtitle {
        max-width: 100% !important;
        margin: 7px 0 0 !important;
        font-size: 0.72rem !important;
        line-height: 1.38 !important;
    }

    .trend-top-actions {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
        gap: 6px !important;
        margin-top: 9px !important;
    }

    .trend-date-box,
    .trend-top-proof-pill {
        width: 100% !important;
        min-height: 31px !important;
        padding: 0 8px !important;
        border-radius: 9px !important;
        font-size: 0.60rem !important;
        justify-content: center !important;
    }

    .trend-date-box svg,
    .trend-date-box i,
    .trend-top-proof-pill svg,
    .trend-top-proof-pill i {
        width: 12px !important;
        height: 12px !important;
    }

    /* Hero: keep message, remove oversized visual mockup */
    .trend-hero-command {
        display: block !important;
        margin-bottom: 10px !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .trend-command-badge {
        min-height: 25px !important;
        padding: 0 8px !important;
        border-radius: 999px !important;
        font-size: 0.58rem !important;
    }

    .trend-command-badge svg,
    .trend-command-badge i {
        width: 13px !important;
        height: 13px !important;
    }

    .trend-command-left h2 {
        margin: 8px 0 6px !important;
        font-size: 1.22rem !important;
        line-height: 1.08 !important;
        letter-spacing: -0.045em !important;
    }

    .trend-command-left > p {
        margin: 0 !important;
        max-width: 100% !important;
        font-size: 0.70rem !important;
        line-height: 1.42 !important;
    }

    .trend-command-points {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 5px !important;
        margin-top: 9px !important;
    }

    .trend-command-points > div {
        min-width: 0 !important;
        min-height: 29px !important;
        padding: 5px 7px !important;
        gap: 5px !important;
        border-radius: 8px !important;
        font-size: 0.55rem !important;
        line-height: 1.15 !important;
    }

    .trend-command-points svg,
    .trend-command-points i {
        width: 12px !important;
        height: 12px !important;
        flex: 0 0 12px;
    }

    .trend-command-visual {
        display: none !important;
    }

    /* Research mode */
    .trend-mode-panel {
        margin-bottom: 10px !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .trend-panel-head.compact {
        margin-bottom: 9px !important;
    }

    .trend-mode-panel .trend-panel-title {
        margin: 0 !important;
        font-size: 1.18rem !important;
        line-height: 1.08 !important;
        letter-spacing: -0.04em !important;
    }

    .trend-mode-panel .trend-panel-subtitle {
        margin-top: 5px !important;
        font-size: 0.69rem !important;
        line-height: 1.38 !important;
    }

    .trend-mode-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .trend-mode-card {
        display: grid !important;
        grid-template-columns: 31px minmax(0,1fr) !important;
        gap: 8px !important;
        min-height: 0 !important;
        padding: 9px !important;
        border-radius: 12px !important;
    }

    .mode-card-icon {
        width: 31px !important;
        height: 31px !important;
        border-radius: 9px !important;
    }

    .mode-card-icon svg,
    .mode-card-icon i {
        width: 15px !important;
        height: 15px !important;
    }

    .mode-card-title-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        margin-bottom: 3px !important;
    }

    .mode-card-title-row h3 {
        font-size: 0.78rem !important;
        line-height: 1 !important;
    }

    .mode-card-title-row span {
        min-height: 18px !important;
        padding: 0 6px !important;
        font-size: 0.49rem !important;
    }

    .mode-card-content p {
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        font-size: 0.61rem !important;
        line-height: 1.32 !important;
    }

    .mode-card-content ul {
        display: none !important;
    }

    .mode-time {
        margin-top: 5px !important;
        min-height: 19px !important;
        padding: 0 6px !important;
        font-size: 0.51rem !important;
    }

    .trend-mode-notice {
        margin-top: 6px !important;
        padding: 8px !important;
        border-radius: 10px !important;
        gap: 6px !important;
    }

    .trend-mode-notice svg,
    .trend-mode-notice i {
        width: 13px !important;
        height: 13px !important;
    }

    .trend-mode-notice p {
        font-size: 0.61rem !important;
        line-height: 1.35 !important;
    }

    /* Creator context */
    .trend-input-panel {
        margin-bottom: 10px !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .trend-panel-head {
        gap: 7px !important;
        margin-bottom: 10px !important;
    }

    .trend-input-panel .trend-panel-title {
        margin: 0 !important;
        font-size: 1.18rem !important;
        line-height: 1.08 !important;
        letter-spacing: -0.04em !important;
    }

    .trend-input-panel .trend-panel-subtitle {
        margin-top: 5px !important;
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
    }

    .trend-pro-badge {
        min-height: 24px !important;
        width: auto !important;
        padding: 0 8px !important;
        border-radius: 999px !important;
        font-size: 0.55rem !important;
    }

    .trend-pro-badge svg,
    .trend-pro-badge i {
        width: 12px !important;
        height: 12px !important;
    }

    .trend-form-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
    }

    .trend-field {
        min-width: 0 !important;
    }

    .trend-field-full {
        grid-column: 1 / -1 !important;
    }

    .trend-field label {
        margin-bottom: 4px !important;
        font-size: 0.60rem !important;
        line-height: 1.15 !important;
    }

    .trend-field label span {
        font-size: 0.45rem !important;
    }

    .trend-field input,
    .trend-field select {
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 9px !important;
        border-radius: 9px !important;
        font-size: 0.62rem !important;
        line-height: 1 !important;
    }

    .trend-field textarea {
        min-height: 74px !important;
        height: 74px !important;
        padding: 8px 9px !important;
        border-radius: 9px !important;
        font-size: 0.62rem !important;
        line-height: 1.35 !important;
    }

    #trendNiche,
    #trendSubNiche,
    #trendGoal,
    #trendContentGoal,
    #trendAudience,
    #trendTargetAudience,
    #trendProblem,
    #trendCurrentProblem {
        grid-column: 1 / -1 !important;
    }

    .trend-advanced-toggle,
    .trend-advanced-summary {
        min-height: 48px !important;
        margin: 8px 0 !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
    }

    .trend-advanced-summary h3,
    .trend-advanced-toggle span {
        margin-bottom: 2px !important;
        font-size: 0.70rem !important;
    }

    .trend-advanced-summary p,
    .trend-advanced-toggle small {
        font-size: 0.58rem !important;
        line-height: 1.28 !important;
    }

    .trend-expand-icon,
    .trend-advanced-toggle strong {
        width: 25px !important;
        height: 25px !important;
        font-size: 0.78rem !important;
    }

    .trend-advanced-grid,
    .trend-advanced-panel {
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
        padding: 9px !important;
        margin-bottom: 8px !important;
        border-radius: 10px !important;
    }

    .trend-quality-strip {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 5px !important;
        margin-top: 8px !important;
    }

    .trend-helper-card {
        min-height: 54px !important;
        padding: 7px !important;
        gap: 5px !important;
        border-radius: 9px !important;
    }

    .trend-helper-card svg,
    .trend-helper-card i {
        width: 11px !important;
        height: 11px !important;
    }

    .trend-helper-card p {
        margin: 0 !important;
        font-size: 0.51rem !important;
        line-height: 1.28 !important;
    }

    .trend-action-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        margin-top: 8px !important;
    }

    .trend-run-summary {
        min-height: 45px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 4px !important;
        padding: 5px !important;
        border-radius: 10px !important;
    }

    .trend-run-summary div {
        padding: 5px 6px !important;
        border-radius: 7px !important;
    }

    .trend-run-summary span {
        margin-bottom: 3px !important;
        font-size: 0.44rem !important;
    }

    .trend-run-summary strong {
        font-size: 0.58rem !important;
    }

    .trend-primary-btn,
    .trend-analyze-btn,
    #trendResearchBtn {
        width: 100% !important;
        min-width: 0 !important;
        height: 45px !important;
        min-height: 45px !important;
        padding: 0 12px !important;
        border-radius: 11px !important;
        font-size: 0.67rem !important;
    }

    .trend-loading-panel {
        min-height: 50px !important;
        padding: 8px !important;
        gap: 7px !important;
        border-radius: 10px !important;
    }

    .trend-loading-panel > div:nth-child(2) {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .trend-loading-panel strong {
        font-size: 0.64rem !important;
    }

    .trend-loading-panel p {
        margin-top: 2px !important;
        font-size: 0.55rem !important;
        line-height: 1.3 !important;
    }

    .trend-loading-steps {
        width: 100% !important;
        margin-left: 0 !important;
        gap: 4px !important;
    }

    .trend-loading-steps span,
    .trend-loading-step {
        min-height: 20px !important;
        padding: 0 6px !important;
        font-size: 0.47rem !important;
    }

    /* History: bounded scroll region */
    #trendHistorySection,
    .trend-history-section {
        margin: 10px 0 !important;
        padding: 12px !important;
        border-radius: 15px !important;
    }

    .trend-history-head,
    .trend-history-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-bottom: 7px !important;
    }

    .trend-history-head h3,
    .trend-history-header h3,
    .trend-history-title {
        font-size: 0.88rem !important;
        line-height: 1.1 !important;
    }

    .trend-history-head p,
    .trend-history-header p,
    #trendHistoryStatusText {
        margin-top: 3px !important;
        font-size: 0.55rem !important;
        line-height: 1.28 !important;
    }

    .trend-history-actions {
        flex-shrink: 0 !important;
        gap: 4px !important;
    }

    #trendHistoryCountText,
    .trend-history-count {
        min-height: 22px !important;
        padding: 0 6px !important;
        font-size: 0.49rem !important;
    }

    #refreshTrendHistoryBtn,
    .trend-history-refresh-btn {
        min-height: 24px !important;
        padding: 0 7px !important;
        gap: 4px !important;
        font-size: 0.51rem !important;
    }

    .trend-history-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 5px !important;
        max-height: 245px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 4px !important;
        scrollbar-width: thin;
    }

    .trend-history-card {
        min-height: 0 !important;
        padding: 8px !important;
        border-radius: 10px !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .trend-history-card-left {
        display: flex !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .trend-history-icon {
        width: 27px !important;
        height: 27px !important;
        border-radius: 8px !important;
    }

    .trend-history-copy h4 {
        margin-bottom: 2px !important;
        font-size: 0.60rem !important;
        line-height: 1.18 !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .trend-history-copy p {
        font-size: 0.49rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .trend-history-date {
        margin-top: 3px !important;
        min-height: 18px !important;
        padding: 0 5px !important;
        font-size: 0.45rem !important;
    }

    .trend-history-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .trend-history-open-btn {
        width: 100% !important;
        min-height: 25px !important;
        padding: 0 6px !important;
        gap: 4px !important;
        font-size: 0.50rem !important;
    }

    #trendHistoryEmpty,
    .trend-history-empty {
        min-height: 70px !important;
        padding: 10px !important;
        border-radius: 10px !important;
    }

    /* Stats: 2 x 2 instead of 4 tall cards */
    .trend-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .trend-stat-card {
        min-height: 78px !important;
        padding: 9px !important;
        gap: 7px !important;
        border-radius: 11px !important;
    }

    .trend-stat-icon {
        width: 27px !important;
        height: 27px !important;
        min-width: 27px !important;
        border-radius: 8px !important;
    }

    .trend-stat-label {
        margin-bottom: 2px !important;
        font-size: 0.49rem !important;
    }

    .trend-stat-card h3 {
        margin: 0 !important;
        font-size: 0.75rem !important;
        line-height: 1 !important;
    }

    .trend-stat-subtext {
        margin-top: 3px !important;
        font-size: 0.49rem !important;
        line-height: 1.2 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Collapsed analyzed context */
    .trend-collapsed-context {
        margin-bottom: 9px !important;
        padding: 9px !important;
        border-radius: 11px !important;
        gap: 7px !important;
    }

    .trend-collapsed-actions {
        width: auto !important;
        flex-shrink: 0 !important;
    }

    .trend-secondary-btn,
    .trend-edit-inputs-btn {
        min-height: 27px !important;
        width: auto !important;
        padding: 0 8px !important;
        border-radius: 8px !important;
        font-size: 0.52rem !important;
    }

    /* Results */
    #trendResults {
        min-width: 0 !important;
        width: 100% !important;
    }

    #trendResults .trend-card,
    #trendResults .trend-report-head,
    #trendResults .trend-proof-dashboard,
    #trendResults .trend-proof-section,
    #trendResults .audience-demand-section,
    #trendResults .trend-insight-grid,
    #trendResults .format-playbook-section,
    #trendResults .trend-intel-strip,
    #trendResults .expandable-report {
        margin-bottom: 9px !important;
    }

    .trend-report-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .trend-report-head-left h2 {
        margin: 4px 0 5px !important;
        font-size: 1.08rem !important;
        line-height: 1.08 !important;
    }

    .trend-report-summary {
        margin: 0 !important;
        font-size: 0.63rem !important;
        line-height: 1.36 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .trend-report-meta-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin-top: 6px !important;
    }

    .trend-niche-pill {
        min-height: 21px !important;
        padding: 0 6px !important;
        font-size: 0.47rem !important;
    }

    .trend-report-head-right {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
    }

    .trend-signal-badge,
    .trend-proof-badge-card {
        min-height: 49px !important;
        padding: 7px !important;
        border-radius: 9px !important;
    }

    .trend-signal-badge p,
    .trend-proof-badge-card p {
        margin-bottom: 2px !important;
        font-size: 0.45rem !important;
    }

    .trend-signal-badge strong,
    .trend-proof-badge-card strong {
        font-size: 0.61rem !important;
    }

    .trend-proof-badge-card span {
        margin-top: 2px !important;
        font-size: 0.48rem !important;
        line-height: 1.2 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Quick win */
    .trend-quick-win {
        display: grid !important;
        grid-template-columns: 28px minmax(0,1fr) !important;
        gap: 7px !important;
        padding: 11px !important;
        border-radius: 13px !important;
    }

    .quick-win-icon {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
    }

    .quick-win-block h3 {
        margin: 3px 0 4px !important;
        font-size: 0.79rem !important;
        line-height: 1.18 !important;
    }

    .quick-win-block > p:not(.trend-mini-label) {
        margin: 0 !important;
        font-size: 0.59rem !important;
        line-height: 1.34 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .quick-win-side {
        grid-column: 2 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
    }

    .mini-output-card {
        min-height: 46px !important;
        padding: 7px !important;
        border-radius: 8px !important;
    }

    .mini-output-card p {
        font-size: 0.53rem !important;
        line-height: 1.25 !important;
    }

    /* Proof/source cards */
    .trend-proof-dashboard {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .trend-proof-dashboard > * {
        min-width: 0 !important;
    }

    .trend-proof-section {
        padding: 9px !important;
        border-radius: 11px !important;
    }

    .trend-source-grid,
    .trend-source-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 6px !important;
    }

    .trend-source-card {
        min-width: 0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .trend-source-media {
        min-height: 105px !important;
        height: 105px !important;
    }

    .trend-source-body {
        padding: 7px !important;
    }

    .trend-source-caption {
        font-size: 0.53rem !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .trend-source-footer {
        gap: 4px !important;
        margin-top: 5px !important;
    }

    .trend-source-link {
        min-height: 23px !important;
        padding: 0 6px !important;
        font-size: 0.48rem !important;
    }

    .trend-source-score-pill,
    .trend-source-format,
    .trend-source-tag {
        font-size: 0.46rem !important;
    }

    /* Scoreboard + graph */
    .scoreboard-row {
        grid-template-columns: 25px minmax(0,1fr) 40px !important;
        gap: 5px !important;
        padding: 7px !important;
        min-height: 43px !important;
        border-radius: 8px !important;
    }

    .scoreboard-row h4 {
        font-size: 0.57rem !important;
    }

    .scoreboard-row p,
    .scoreboard-mini-metrics {
        font-size: 0.46rem !important;
    }

    .scoreboard-score {
        font-size: 0.59rem !important;
    }

    .trend-graph,
    .trend-graph-container {
        min-height: 150px !important;
        height: 150px !important;
    }

    /* Audience demand */
    .audience-demand-section {
        padding: 11px !important;
        border-radius: 13px !important;
    }

    .audience-demand-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 5px !important;
    }

    .audience-demand-card {
        padding: 7px !important;
        border-radius: 9px !important;
    }

    .demand-card-head {
        gap: 4px !important;
        margin-bottom: 5px !important;
    }

    .demand-card-head svg,
    .demand-card-head i {
        width: 12px !important;
        height: 12px !important;
    }

    .demand-card-head h4 {
        font-size: 0.56rem !important;
    }

    .audience-demand-card li,
    .audience-demand-card p {
        font-size: 0.50rem !important;
        line-height: 1.3 !important;
    }

    /* Insight / opportunity / hook cards */
    .trend-insight-grid,
    .trend-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 6px !important;
        margin-bottom: 9px !important;
    }

    .trend-insight-grid .compact-card:nth-child(3) {
        grid-column: 1 / -1 !important;
    }

    .compact-card {
        min-width: 0 !important;
        padding: 10px !important;
        border-radius: 11px !important;
    }

    .compact-card h3,
    .compact-card h4 {
        font-size: 0.69rem !important;
        line-height: 1.15 !important;
    }

    .compact-card p,
    .compact-card li {
        font-size: 0.54rem !important;
        line-height: 1.34 !important;
    }

    .stack-list,
    .trend-opportunity-list,
    .hook-lab-list,
    .trend-mini-card-list {
        gap: 5px !important;
    }

    .trend-opportunity-item,
    .trend-opportunity-card {
        grid-template-columns: minmax(0,1fr) auto !important;
        gap: 7px !important;
        padding: 8px !important;
        border-radius: 10px !important;
    }

    .trend-opportunity-copy h4,
    .trend-opportunity-card h4 {
        margin-bottom: 3px !important;
        font-size: 0.61rem !important;
        line-height: 1.22 !important;
    }

    .trend-opportunity-copy p,
    .trend-opportunity-why,
    .trend-opportunity-idea {
        font-size: 0.52rem !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .trend-opportunity-hook {
        margin-top: 5px !important;
        padding: 6px !important;
        border-radius: 7px !important;
    }

    .trend-opportunity-hook span {
        font-size: 0.43rem !important;
    }

    .trend-opportunity-hook strong {
        font-size: 0.51rem !important;
        line-height: 1.28 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .trend-opportunity-meta {
        gap: 3px !important;
        margin-top: 5px !important;
    }

    .trend-opportunity-meta span {
        min-height: 18px !important;
        padding: 0 5px !important;
        font-size: 0.43rem !important;
    }

    .trend-opportunity-score,
    .trend-viral-score {
        width: 34px !important;
        height: 27px !important;
        font-size: 0.56rem !important;
    }

    .trend-hook-row,
    .trend-mini-card {
        grid-template-columns: minmax(0,1fr) 27px !important;
        gap: 6px !important;
        padding: 8px !important;
        border-radius: 10px !important;
    }

    .trend-hook-copy p,
    .trend-mini-card p,
    .trend-mini-card h4 {
        font-size: 0.57rem !important;
        line-height: 1.32 !important;
    }

    .trend-hook-copy small,
    .trend-mini-card small {
        margin-top: 3px !important;
        font-size: 0.48rem !important;
        line-height: 1.25 !important;
    }

    .trend-copy-btn {
        width: 27px !important;
        height: 27px !important;
        border-radius: 8px !important;
    }

    /* 7-day plan: 2 columns, bounded card heights */
    .seven-day-plan-grid,
    .trend-plan-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 5px !important;
    }

    .trend-day-tile,
    .trend-plan-item {
        min-width: 0 !important;
        min-height: 126px !important;
        height: 126px !important;
        padding: 9px !important;
        border-radius: 10px !important;
    }

    .trend-day-label,
    .trend-plan-day {
        margin-bottom: 6px !important;
        font-size: 0.45rem !important;
    }

    .trend-day-icon {
        width: 18px !important;
        height: 18px !important;
        margin-bottom: 6px !important;
    }

    .trend-day-tile h4,
    .trend-plan-item h4 {
        margin-bottom: 3px !important;
        font-size: 0.59rem !important;
        line-height: 1.16 !important;
    }

    .trend-day-tile p,
    .trend-plan-item p {
        font-size: 0.49rem !important;
        line-height: 1.28 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .trend-day-hook {
        margin-top: auto !important;
        padding-top: 5px !important;
        gap: 2px !important;
    }

    .trend-day-hook span {
        font-size: 0.43rem !important;
    }

    .trend-day-hook strong {
        font-size: 0.48rem !important;
        line-height: 1.22 !important;
        -webkit-line-clamp: 2 !important;
    }

    .seven-day-plan-grid.calendar-preview-active {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .seven-day-plan-grid.calendar-preview-active .trend-day-tile {
        min-height: 145px !important;
        height: 145px !important;
        padding: 9px !important;
    }

    .seven-day-plan-grid.calendar-preview-active .trend-day-tile p {
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .seven-day-plan-grid.calendar-preview-active .trend-day-hook strong {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Format playbook */
    .format-playbook-section {
        padding: 11px !important;
        border-radius: 13px !important;
    }

    .format-playbook-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 5px !important;
    }

    .format-playbook-card {
        padding: 8px !important;
        border-radius: 9px !important;
    }

    .format-playbook-head {
        gap: 5px !important;
        margin-bottom: 5px !important;
    }

    .format-playbook-head svg,
    .format-playbook-head i {
        width: 13px !important;
        height: 13px !important;
    }

    .format-playbook-head h4 {
        font-size: 0.59rem !important;
        line-height: 1.12 !important;
    }

    .format-playbook-line {
        padding-top: 5px !important;
        margin-top: 5px !important;
    }

    .format-playbook-line span {
        margin-bottom: 2px !important;
        font-size: 0.42rem !important;
    }

    .format-playbook-line p {
        font-size: 0.50rem !important;
        line-height: 1.28 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Intelligence strip */
    .trend-intel-strip {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 0 !important;
        border-radius: 13px !important;
    }

    .intel-strip-item {
        min-height: 55px !important;
        padding: 8px !important;
        gap: 6px !important;
    }

    .intel-strip-item:nth-child(2n) {
        border-right: none !important;
    }

    .intel-strip-item:nth-last-child(-n+2) {
        border-bottom: none !important;
    }

    .intel-strip-icon {
        width: 27px !important;
        height: 27px !important;
        border-radius: 8px !important;
    }

    .intel-strip-icon svg,
    .intel-strip-icon i {
        width: 13px !important;
        height: 13px !important;
    }

    .intel-strip-title {
        margin-bottom: 2px !important;
        font-size: 0.56rem !important;
    }

    .intel-strip-subtitle {
        font-size: 0.47rem !important;
        line-height: 1.25 !important;
        -webkit-line-clamp: 2 !important;
    }

    /* Expandable details */
    .expandable-head {
        min-height: 48px !important;
        padding: 9px 11px !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .expandable-head h3 {
        font-size: 0.70rem !important;
        line-height: 1.1 !important;
    }

    .expandable-trigger {
        min-height: 26px !important;
        padding: 0 7px !important;
        gap: 4px !important;
        font-size: 0.50rem !important;
    }

    .expandable-content {
        padding: 0 10px 10px !important;
    }

    .trend-detail-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 5px !important;
        padding-top: 8px !important;
    }

    .trend-detail-card {
        min-height: 100px !important;
        padding: 8px !important;
        border-radius: 9px !important;
    }

    .detail-card-head {
        margin-bottom: 6px !important;
        gap: 5px !important;
    }

    .detail-card-head h4 {
        font-size: 0.60rem !important;
    }

    .detail-list li,
    .trend-detail-text {
        padding: 4px 0 !important;
        font-size: 0.50rem !important;
        line-height: 1.3 !important;
    }

    /* Tags / empty states */
    .trend-list-item,
    .trend-list li,
    .detail-list li,
    .trend-card li {
        padding: 5px 0 !important;
        font-size: 0.53rem !important;
        line-height: 1.3 !important;
    }

    .trend-list-number,
    .trend-item-number {
        width: 20px !important;
        height: 20px !important;
        margin-right: 4px !important;
        font-size: 0.48rem !important;
    }

    .tag-cloud,
    .pill-list,
    .hashtag-list {
        gap: 4px !important;
    }

    .trend-tag,
    .pill-list li,
    .hashtag-list li {
        min-height: 21px !important;
        padding: 0 6px !important;
        font-size: 0.48rem !important;
    }

    .hashtag-cluster-wrap {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 5px !important;
    }

    .hashtag-cluster-block,
    .hashtag-cluster-group {
        padding: 7px !important;
        border-radius: 8px !important;
    }

    .trend-empty-state {
        min-height: 62px !important;
        padding: 9px !important;
        gap: 5px !important;
        border-radius: 9px !important;
        font-size: 0.53rem !important;
    }

    .empty-graph-state {
        min-height: 130px !important;
        padding: 9px !important;
        gap: 5px !important;
        border-radius: 9px !important;
        font-size: 0.53rem !important;
    }

    /* Export */
    .trend-export-bar {
        margin-bottom: 9px !important;
        padding: 10px !important;
        border-radius: 12px !important;
        gap: 7px !important;
    }

    .trend-export-bar h3 {
        font-size: 0.72rem !important;
    }

    .trend-export-actions {
        width: 100% !important;
        gap: 4px !important;
    }

    .trend-export-actions .text-action-btn {
        min-height: 27px !important;
        padding: 0 7px !important;
        font-size: 0.50rem !important;
    }

    /* Results reveal */
    #trendResults .trend-card,
    #trendResults .trend-report-head,
    #trendResults .trend-proof-dashboard,
    #trendResults .trend-proof-section,
    #trendResults .audience-demand-section,
    #trendResults .trend-insight-grid,
    #trendResults .format-playbook-section,
    #trendResults .trend-intel-strip,
    #trendResults .expandable-report,
    #trendResults .trend-results-header {
        transition:
            opacity 0.24s ease,
            transform 0.24s ease !important;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 520px) {

    .trend-main {
        padding: 10px 9px 36px !important;
    }

    .trend-sidebar {
        padding: 8px 8px 7px !important;
    }

    .trend-sidebar .sidebar-brand {
        margin-bottom: 7px !important;
    }

    .trend-sidebar .sidebar-link,
    .trend-sidebar .sidebar-menu a {
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 7px !important;
        font-size: 0.61rem !important;
        border-radius: 8px !important;
    }

    .trend-sidebar .sidebar-link svg,
    .trend-sidebar .sidebar-link i,
    .trend-sidebar .sidebar-menu a svg,
    .trend-sidebar .sidebar-menu a i {
        width: 13px !important;
        height: 13px !important;
        flex-basis: 13px;
    }

    .trend-page-title {
        font-size: 1.52rem !important;
        line-height: 1.02 !important;
    }

    .trend-page-subtitle {
        font-size: 0.66rem !important;
        line-height: 1.34 !important;
    }

    .trend-hero-command,
    .trend-mode-panel,
    .trend-input-panel {
        padding: 11px !important;
        border-radius: 13px !important;
    }

    .trend-command-left h2 {
        font-size: 1.08rem !important;
    }

    .trend-command-left > p {
        font-size: 0.64rem !important;
    }

    .trend-command-points > div {
        min-height: 27px !important;
        padding: 4px 5px !important;
        font-size: 0.50rem !important;
    }

    .trend-mode-panel .trend-panel-title,
    .trend-input-panel .trend-panel-title {
        font-size: 1.05rem !important;
    }

    .trend-mode-panel .trend-panel-subtitle,
    .trend-input-panel .trend-panel-subtitle {
        font-size: 0.62rem !important;
    }

    .trend-mode-card {
        grid-template-columns: 28px minmax(0,1fr) !important;
        padding: 7px !important;
        gap: 6px !important;
    }

    .mode-card-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .mode-card-title-row h3 {
        font-size: 0.72rem !important;
    }

    .mode-card-content p {
        font-size: 0.57rem !important;
    }

    .mode-time {
        font-size: 0.47rem !important;
    }

    .trend-form-grid {
        gap: 6px !important;
    }

    .trend-field label {
        font-size: 0.56rem !important;
    }

    .trend-field input,
    .trend-field select {
        min-height: 35px !important;
        height: 35px !important;
        font-size: 0.58rem !important;
    }

    .trend-field textarea {
        min-height: 68px !important;
        height: 68px !important;
        font-size: 0.58rem !important;
    }

    .trend-quality-strip {
        gap: 4px !important;
    }

    .trend-helper-card {
        min-height: 48px !important;
        padding: 6px !important;
    }

    .trend-helper-card p {
        font-size: 0.47rem !important;
    }

    .trend-run-summary {
        min-height: 41px !important;
    }

    .trend-run-summary div {
        padding: 4px 5px !important;
    }

    .trend-run-summary span {
        font-size: 0.41rem !important;
    }

    .trend-run-summary strong {
        font-size: 0.53rem !important;
    }

    .trend-primary-btn,
    .trend-analyze-btn,
    #trendResearchBtn {
        height: 42px !important;
        min-height: 42px !important;
        font-size: 0.63rem !important;
    }

    #trendHistorySection,
    .trend-history-section {
        padding: 10px !important;
    }

    .trend-history-list {
        max-height: 220px !important;
        gap: 4px !important;
    }

    .trend-history-card {
        padding: 7px !important;
        border-radius: 9px !important;
    }

    .trend-history-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .trend-history-copy h4 {
        font-size: 0.56rem !important;
    }

    .trend-history-copy p {
        font-size: 0.46rem !important;
    }

    .trend-history-open-btn {
        min-height: 23px !important;
        font-size: 0.47rem !important;
    }

    .trend-stat-card {
        min-height: 70px !important;
        padding: 8px !important;
    }

    .trend-stat-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
    }

    .trend-stat-card h3 {
        font-size: 0.70rem !important;
    }

    .trend-stat-subtext {
        font-size: 0.45rem !important;
    }

    .trend-report-head {
        padding: 10px !important;
    }

    .trend-report-head-left h2 {
        font-size: 0.98rem !important;
    }

    .trend-report-summary {
        font-size: 0.58rem !important;
    }

    .trend-source-media {
        min-height: 90px !important;
        height: 90px !important;
    }

    .trend-day-tile,
    .trend-plan-item {
        min-height: 116px !important;
        height: 116px !important;
        padding: 8px !important;
    }

    .seven-day-plan-grid.calendar-preview-active .trend-day-tile {
        min-height: 132px !important;
        height: 132px !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .trend-main {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .trend-page-title {
        font-size: 1.42rem !important;
    }

    .trend-form-grid {
        grid-template-columns: 1fr !important;
    }

    .trend-field-full,
    #trendNiche,
    #trendSubNiche,
    #trendGoal,
    #trendContentGoal,
    #trendAudience,
    #trendTargetAudience,
    #trendProblem,
    #trendCurrentProblem {
        grid-column: 1 !important;
    }

    .trend-quality-strip {
        grid-template-columns: 1fr !important;
    }

    .trend-helper-card {
        min-height: 34px !important;
    }

    .trend-report-head-right {
        grid-template-columns: 1fr !important;
    }

    .trend-proof-dashboard,
    .trend-source-grid,
    .trend-source-list,
    .format-playbook-grid,
    .audience-demand-grid {
        grid-template-columns: 1fr !important;
    }

    .seven-day-plan-grid,
    .trend-plan-list {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .trend-day-tile,
    .trend-plan-item {
        min-height: 110px !important;
        height: 110px !important;
    }

    .trend-history-list {
        grid-template-columns: 1fr !important;
        max-height: 240px !important;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

/* =========================================================
   VIRALMINT AI — TREND INTELLIGENCE MOBILE V2
   Load AFTER trend-intelligence-mobile.css
   Fixes:
   - smaller hero heading
   - Fast / Deep side-by-side
   - professional history UI
   - fixes history header/button collision
   - compact status + form spacing
   - mobile sidebar/nav alignment
========================================================= */

@media (max-width: 850px) {

    /* ---------------------------------------------------------
       1. MOBILE APP SHELL
    --------------------------------------------------------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .dashboard-layout.trend-layout {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .trend-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 10px 10px 32px !important;
        box-sizing: border-box !important;
    }

    /* ---------------------------------------------------------
       2. MOBILE NAV — THIS PAGE USES SIDEBAR MARKUP

       Important: trend-intelligence-pro.html does NOT contain
       .vm-global-nav / .vm-mobile-toggle / .vm-mobile-menu.
       It contains .sidebar + .sidebar-menu instead.

       Therefore the global mobile-nav.css cannot create its
       mobile navbar here. We style the existing sidebar instead.
    --------------------------------------------------------- */

    .trend-sidebar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 9px 8px !important;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.055) !important;
        box-shadow: 0 7px 24px rgba(0,0,0,.14) !important;
        box-sizing: border-box !important;
    }

    .trend-sidebar .sidebar-top {
        width: 100% !important;
    }

    .trend-sidebar .sidebar-brand {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        margin: 0 0 7px !important;
        min-height: 31px !important;
    }

    .trend-sidebar .sidebar-brand-icon {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        border-radius: 9px !important;
    }

    .trend-sidebar .sidebar-brand-icon svg,
    .trend-sidebar .sidebar-brand-icon i {
        width: 15px !important;
        height: 15px !important;
    }

    .trend-sidebar .sidebar-brand-text {
        font-size: .82rem !important;
        line-height: 1 !important;
    }

    .trend-sidebar .trend-sidebar-menu {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .trend-sidebar .trend-sidebar-menu .sidebar-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 6px !important;
        gap: 5px !important;
        border-radius: 8px !important;
        font-size: .57rem !important;
        line-height: 1 !important;
        font-weight: 650 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .trend-sidebar .trend-sidebar-menu .sidebar-link svg {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        flex: 0 0 12px !important;
        opacity: .82 !important;
    }

    .trend-sidebar .trend-sidebar-menu .sidebar-link span {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .trend-sidebar .trend-sidebar-menu .active-link {
        box-shadow: 0 0 0 1px rgba(236,72,153,.14) inset !important;
    }

    .trend-sidebar .trend-sidebar-menu .active-link svg {
        color: #ff35b5 !important;
        opacity: 1 !important;
    }

    .trend-sidebar .sidebar-bottom {
        display: none !important;
    }

    /* ---------------------------------------------------------
       3. TOP HEADING — MUCH SMALLER
    --------------------------------------------------------- */

    .trend-topbar {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
    }

    .trend-kicker-row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin: 0 0 5px !important;
    }

    .trend-kicker-row .dashboard-label {
        margin: 0 !important;
        font-size: .48rem !important;
        line-height: 1 !important;
        letter-spacing: .8px !important;
    }

    .trend-kicker-row .trend-beta-pill {
        min-height: 17px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        font-size: .43rem !important;
        line-height: 1 !important;
    }

    .trend-page-title {
        max-width: 100% !important;
        margin: 0 !important;
        font-size: 1.18rem !important;
        line-height: 1.03 !important;
        letter-spacing: -.045em !important;
        font-weight: 900 !important;
    }

    .trend-page-subtitle {
        max-width: 100% !important;
        margin: 5px 0 0 !important;
        font-size: .56rem !important;
        line-height: 1.30 !important;
    }

    .trend-top-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
        margin-top: 6px !important;
    }

    .trend-date-box,
    .trend-top-proof-pill {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 27px !important;
        height: 27px !important;
        padding: 0 6px !important;
        border-radius: 8px !important;
        font-size: .49rem !important;
    }

    .trend-date-box svg,
    .trend-top-proof-pill svg {
        width: 10px !important;
        height: 10px !important;
    }

    /* ---------------------------------------------------------
       4. HERO COMMAND
    --------------------------------------------------------- */

    .trend-hero-command {
        padding: 10px !important;
        margin: 0 0 8px !important;
        border-radius: 13px !important;
    }

    .trend-command-badge {
        min-height: 21px !important;
        height: 21px !important;
        padding: 0 7px !important;
        font-size: .48rem !important;
    }

    .trend-command-badge svg {
        width: 11px !important;
        height: 11px !important;
    }

    .trend-command-left h2 {
        margin: 6px 0 4px !important;
        font-size: .94rem !important;
        line-height: 1.05 !important;
        letter-spacing: -.035em !important;
    }

    .trend-command-left > p {
        margin: 0 !important;
        font-size: .54rem !important;
        line-height: 1.30 !important;
    }

    .trend-command-points {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 4px !important;
        margin-top: 6px !important;
    }

    .trend-command-points > div {
        min-height: 24px !important;
        padding: 3px 5px !important;
        border-radius: 7px !important;
        gap: 4px !important;
        font-size: .44rem !important;
        line-height: 1.08 !important;
    }

    .trend-command-points svg {
        width: 10px !important;
        height: 10px !important;
    }

    .trend-command-visual {
        display: none !important;
    }

    /* ---------------------------------------------------------
       5. RESEARCH MODE — TWO COLUMNS, ALWAYS
    --------------------------------------------------------- */

    .trend-mode-panel {
        padding: 10px !important;
        margin: 0 0 8px !important;
        border-radius: 13px !important;
    }

    .trend-mode-panel .trend-panel-head.compact {
        display: block !important;
        margin: 0 0 7px !important;
    }

    .trend-mode-panel .trend-panel-title {
        margin: 2px 0 3px !important;
        font-size: .92rem !important;
        line-height: 1.05 !important;
        letter-spacing: -.035em !important;
    }

    .trend-mode-panel .trend-panel-subtitle {
        margin: 0 !important;
        max-width: 100% !important;
        font-size: .52rem !important;
        line-height: 1.28 !important;
    }

    .trend-mode-panel .trend-pro-badge {
        display: inline-flex !important;
        min-height: 19px !important;
        height: 19px !important;
        margin-top: 5px !important;
        padding: 0 6px !important;
        font-size: .44rem !important;
    }

    .trend-mode-panel .trend-pro-badge svg {
        width: 10px !important;
        height: 10px !important;
    }

    .trend-mode-grid {
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
    }

    .trend-mode-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 122px !important;
        padding: 7px !important;
        gap: 4px !important;
        border-radius: 10px !important;
    }

    .mode-card-icon {
        width: 25px !important;
        height: 25px !important;
        min-width: 25px !important;
        border-radius: 7px !important;
        flex: 0 0 25px !important;
    }

    .mode-card-icon svg {
        width: 12px !important;
        height: 12px !important;
    }

    .mode-card-title-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
        margin: 0 !important;
    }

    .mode-card-title-row h3 {
        margin: 0 !important;
        font-size: .66rem !important;
        line-height: 1 !important;
    }

    .mode-card-title-row span {
        min-height: 15px !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
        font-size: .39rem !important;
    }

    .mode-card-content p {
        margin: 0 !important;
        font-size: .45rem !important;
        line-height: 1.22 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .mode-card-content ul {
        display: none !important;
    }

    .mode-time {
        margin-top: auto !important;
        align-self: flex-start !important;
        min-height: 16px !important;
        padding: 0 5px !important;
        font-size: .40rem !important;
    }

    .trend-mode-notice {
        min-height: 0 !important;
        margin: 5px 0 0 !important;
        padding: 7px !important;
        border-radius: 8px !important;
        gap: 5px !important;
    }

    .trend-mode-notice svg {
        width: 11px !important;
        height: 11px !important;
        flex: 0 0 11px !important;
    }

    .trend-mode-notice p {
        margin: 0 !important;
        font-size: .48rem !important;
        line-height: 1.25 !important;
    }

    /* ---------------------------------------------------------
       6. CREATOR CONTEXT
    --------------------------------------------------------- */

    .trend-input-panel {
        padding: 10px !important;
        margin: 0 0 8px !important;
        border-radius: 13px !important;
    }

    .trend-input-panel .trend-panel-head {
        display: block !important;
        margin: 0 0 7px !important;
    }

    .trend-input-panel .trend-panel-title {
        margin: 2px 0 3px !important;
        font-size: .92rem !important;
        line-height: 1.05 !important;
    }

    .trend-input-panel .trend-panel-subtitle {
        margin: 0 !important;
        font-size: .50rem !important;
        line-height: 1.25 !important;
    }

    .trend-input-panel .trend-pro-badge {
        margin-top: 5px !important;
        min-height: 19px !important;
        height: 19px !important;
        padding: 0 6px !important;
        font-size: .43rem !important;
    }

    .trend-form-grid {
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 5px !important;
    }

    .trend-field {
        min-width: 0 !important;
    }

    .trend-field-full,
    .trend-field:has(textarea) {
        grid-column: 1 / -1 !important;
    }

    .trend-field label {
        display: flex !important;
        justify-content: space-between !important;
        gap: 3px !important;
        margin: 0 0 3px !important;
        font-size: .48rem !important;
        line-height: 1 !important;
    }

    .trend-field label span {
        font-size: .37rem !important;
    }

    .trend-field input,
    .trend-field select {
        width: 100% !important;
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 7px !important;
        border-radius: 7px !important;
        font-size: .49rem !important;
        box-sizing: border-box !important;
    }

    .trend-field textarea {
        width: 100% !important;
        min-height: 60px !important;
        height: 60px !important;
        padding: 7px !important;
        border-radius: 7px !important;
        font-size: .49rem !important;
        line-height: 1.28 !important;
        box-sizing: border-box !important;
    }

    .trend-advanced-toggle,
    .trend-advanced-summary {
        min-height: 42px !important;
        margin: 6px 0 !important;
        padding: 7px 8px !important;
        border-radius: 8px !important;
    }

    .trend-advanced-summary h3,
    .trend-advanced-toggle span {
        font-size: .56rem !important;
    }

    .trend-advanced-summary p,
    .trend-advanced-toggle small {
        font-size: .44rem !important;
        line-height: 1.20 !important;
    }

    .trend-advanced-grid,
    .trend-advanced-panel {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 5px !important;
        padding: 7px !important;
        border-radius: 8px !important;
    }

    .trend-quality-strip {
        display: grid !important;
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        gap: 4px !important;
        margin-top: 6px !important;
    }

    .trend-helper-card {
        min-height: 46px !important;
        padding: 5px !important;
        gap: 4px !important;
        border-radius: 7px !important;
    }

    .trend-helper-card svg {
        width: 9px !important;
        height: 9px !important;
    }

    .trend-helper-card p {
        margin: 0 !important;
        font-size: .39rem !important;
        line-height: 1.18 !important;
    }

    .trend-action-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        margin-top: 6px !important;
    }

    .trend-run-summary {
        display: grid !important;
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        gap: 3px !important;
        padding: 4px !important;
        border-radius: 8px !important;
    }

    .trend-run-summary > div {
        min-width: 0 !important;
        padding: 4px !important;
        border-radius: 6px !important;
    }

    .trend-run-summary span {
        font-size: .34rem !important;
        line-height: 1 !important;
    }

    .trend-run-summary strong {
        display: block !important;
        margin-top: 2px !important;
        font-size: .46rem !important;
        line-height: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .trend-primary-btn,
    #trendResearchBtn {
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 9px !important;
        font-size: .57rem !important;
    }

    /* ---------------------------------------------------------
       7. STATUS CARDS
    --------------------------------------------------------- */

    .trend-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 5px !important;
        margin: 0 0 8px !important;
    }

    .trend-stat-card {
        min-width: 0 !important;
        min-height: 67px !important;
        height: 67px !important;
        padding: 7px !important;
        gap: 6px !important;
        border-radius: 9px !important;
    }

    .trend-stat-icon {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        border-radius: 7px !important;
    }

    .trend-stat-icon svg {
        width: 11px !important;
        height: 11px !important;
    }

    .trend-stat-label {
        margin: 0 0 2px !important;
        font-size: .38rem !important;
        line-height: 1 !important;
        letter-spacing: .4px !important;
    }

    .trend-stat-card h3 {
        margin: 0 !important;
        font-size: .62rem !important;
        line-height: 1 !important;
    }

    .trend-stat-subtext {
        margin: 3px 0 0 !important;
        font-size: .40rem !important;
        line-height: 1.15 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .trend-score-bar {
        height: 4px !important;
        margin-top: 4px !important;
    }

    /* ---------------------------------------------------------
       8. HISTORY — REBUILD THE MOBILE LAYOUT

       The previous patch accidentally made .trend-history-actions
       width:100%, which caused the Saved/Refresh controls to
       collide with the heading. This explicitly resets it.
    --------------------------------------------------------- */

    #trendHistorySection,
    .trend-history-section {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 8px !important;
        padding: 10px !important;
        border-radius: 13px !important;
        box-sizing: border-box !important;
    }

    .trend-history-head,
    .trend-history-header {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) auto !important;
        align-items: start !important;
        gap: 7px !important;
        margin: 0 0 6px !important;
    }

    .trend-history-head > div:first-child,
    .trend-history-header > div:first-child {
        min-width: 0 !important;
    }

    .trend-history-head .trend-mini-label {
        margin: 0 0 3px !important;
        font-size: .40rem !important;
        letter-spacing: .65px !important;
    }

    .trend-history-head h3,
    .trend-history-header h3,
    .trend-history-title {
        margin: 0 !important;
        font-size: .72rem !important;
        line-height: 1.05 !important;
        letter-spacing: -.025em !important;
    }

    .trend-history-head .section-subtitle,
    .trend-history-header .section-subtitle {
        margin: 3px 0 0 !important;
        max-width: 190px !important;
        font-size: .42rem !important;
        line-height: 1.22 !important;
    }

    .trend-history-actions {
        width: auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #trendHistoryCountText,
    .trend-history-count {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 20px !important;
        height: 20px !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
        font-size: .39rem !important;
        white-space: nowrap !important;
    }

    #refreshTrendHistoryBtn,
    .trend-history-refresh-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 25px !important;
        min-width: 25px !important;
        height: 20px !important;
        min-height: 20px !important;
        padding: 0 !important;
        border-radius: 6px !important;
        font-size: 0 !important;
    }

    #refreshTrendHistoryBtn svg,
    .trend-history-refresh-btn svg {
        width: 10px !important;
        height: 10px !important;
        margin: 0 !important;
    }

    #trendHistoryStatusText,
    .trend-history-status {
        margin: 0 0 5px !important;
        padding: 0 !important;
        font-size: .40rem !important;
        line-height: 1.20 !important;
    }

    .trend-history-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        width: 100% !important;
        max-height: 190px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 3px 0 0 !important;
        scrollbar-width: thin !important;
    }

    /* Any JS-injected history item becomes a compact premium row. */
    .trend-history-list > * {
        display: grid !important;
        grid-template-columns: 26px minmax(0,1fr) auto !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 45px !important;
        padding: 6px !important;
        margin: 0 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .trend-history-list > * > * {
        min-width: 0 !important;
    }

    .trend-history-list .trend-history-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        border-radius: 7px !important;
    }

    .trend-history-list .trend-history-copy {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .trend-history-list .trend-history-copy h4 {
        margin: 0 0 2px !important;
        font-size: .48rem !important;
        line-height: 1.12 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .trend-history-list .trend-history-copy p {
        margin: 0 !important;
        font-size: .39rem !important;
        line-height: 1.15 !important;
        color: rgba(255,255,255,.48) !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .trend-history-list .trend-history-date {
        margin: 2px 0 0 !important;
        font-size: .35rem !important;
    }

    .trend-history-list .trend-history-actions {
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 3px !important;
    }

    .trend-history-list .trend-history-open-btn,
    .trend-history-list button,
    .trend-history-list a {
        min-width: 25px !important;
        width: auto !important;
        min-height: 23px !important;
        height: 23px !important;
        padding: 0 6px !important;
        border-radius: 6px !important;
        font-size: .38rem !important;
        white-space: nowrap !important;
    }

    .trend-history-list .trend-history-open-btn svg,
    .trend-history-list button svg,
    .trend-history-list a svg {
        width: 9px !important;
        height: 9px !important;
    }

    #trendHistoryEmpty,
    .trend-history-empty {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        min-height: 74px !important;
        margin: 0 !important;
        padding: 9px !important;
        border-radius: 9px !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    #trendHistoryEmpty > svg,
    #trendHistoryEmpty > i,
    .trend-history-empty > svg,
    .trend-history-empty > i {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
    }

    #trendHistoryEmpty strong,
    .trend-history-empty strong {
        display: block !important;
        margin: 0 0 2px !important;
        font-size: .54rem !important;
        line-height: 1.1 !important;
    }

    #trendHistoryEmpty p,
    .trend-history-empty p {
        margin: 0 !important;
        font-size: .43rem !important;
        line-height: 1.22 !important;
    }

    /* ---------------------------------------------------------
       9. RESULTS — COMPACT WITHOUT DESTROYING DESKTOP
    --------------------------------------------------------- */

    #trendResults {
        width: 100% !important;
        min-width: 0 !important;
    }

    #trendResults .trend-card,
    #trendResults .trend-report-head,
    #trendResults .trend-proof-dashboard,
    #trendResults .trend-proof-section,
    #trendResults .audience-demand-section,
    #trendResults .trend-insight-grid,
    #trendResults .format-playbook-section,
    #trendResults .trend-intel-strip,
    #trendResults .expandable-report {
        margin-bottom: 7px !important;
    }

    .trend-report-head {
        padding: 9px !important;
        border-radius: 11px !important;
    }

    .trend-report-head-left h2 {
        margin: 3px 0 !important;
        font-size: .84rem !important;
        line-height: 1.05 !important;
    }

    .trend-report-summary {
        margin: 0 !important;
        font-size: .48rem !important;
        line-height: 1.25 !important;
        -webkit-line-clamp: 3 !important;
    }

    .trend-report-head-right {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 4px !important;
    }

    .trend-signal-badge,
    .trend-proof-badge-card {
        min-height: 42px !important;
        padding: 6px !important;
        border-radius: 7px !important;
    }

    /* ---------------------------------------------------------
       10. SMALL PHONES
    --------------------------------------------------------- */

    @media (max-width: 420px) {

        .trend-main {
            padding-left: 8px !important;
            padding-right: 8px !important;
        }

        .trend-page-title {
            font-size: 1.08rem !important;
        }

        .trend-page-subtitle {
            font-size: .52rem !important;
        }

        .trend-mode-card {
            height: 116px !important;
            padding: 6px !important;
        }

        .mode-card-content p {
            -webkit-line-clamp: 2 !important;
        }

        .trend-history-list {
            max-height: 175px !important;
        }

        .trend-history-list > * {
            grid-template-columns: 24px minmax(0,1fr) auto !important;
            min-height: 42px !important;
            padding: 5px !important;
        }

        .trend-history-list .trend-history-icon {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
        }
    }

    @media (max-width: 380px) {

        .trend-page-title {
            font-size: 1rem !important;
        }

        .trend-mode-card {
            height: 108px !important;
        }

        .trend-mode-panel .trend-panel-subtitle {
            font-size: .47rem !important;
        }

        .trend-history-head {
            grid-template-columns: 1fr !important;
        }

        .trend-history-actions {
            justify-content: flex-start !important;
        }

        .trend-history-head .section-subtitle,
        .trend-history-header .section-subtitle {
            max-width: 100% !important;
        }
    }
}


/* =========================================================
   VM MOBILE V3 — FINAL COMPACT MOBILE POLISH
   Paste AFTER all existing trend-intelligence-mobile.css
========================================================= */

@media (max-width: 720px) {

    /* -----------------------------------------------------
       1. MOBILE NAV — MATCH ACCOUNT-STYLE NAV
       Brand on top, icon-only navigation on ONE ROW.
    ----------------------------------------------------- */

    .trend-sidebar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 9px 10px 8px !important;
        margin: 0 !important;
        overflow: visible !important;

        background: rgba(5, 6, 9, 0.96) !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.055) !important;
        box-shadow: none !important;
    }

    .trend-sidebar .sidebar-brand,
    .trend-sidebar .sidebar-logo,
    .trend-sidebar-logo {
        display: flex !important;
        align-items: center !important;
        margin: 0 0 7px !important;
        min-height: 30px !important;
        height: 30px !important;
    }

    .trend-sidebar .sidebar-brand-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 9px !important;
    }

    .trend-sidebar .sidebar-brand-icon svg,
    .trend-sidebar .sidebar-brand-icon i {
        width: 15px !important;
        height: 15px !important;
    }

    .trend-sidebar .sidebar-brand-text {
        font-size: 0.82rem !important;
        line-height: 1 !important;
        font-weight: 800 !important;
    }

    .trend-sidebar-menu,
    .trend-sidebar .sidebar-menu {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .trend-sidebar-menu a,
    .trend-sidebar .sidebar-menu a,
    .trend-sidebar .sidebar-link {
        position: relative !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        margin: 0 !important;

        display: grid !important;
        place-items: center !important;

        border-radius: 10px !important;
        border: 1px solid transparent !important;

        background: rgba(255,255,255,0.025) !important;
        color: rgba(248,250,252,0.58) !important;

        font-size: 0 !important;
        line-height: 0 !important;
        gap: 0 !important;
    }

    .trend-sidebar-menu a span,
    .trend-sidebar .sidebar-menu a span,
    .trend-sidebar .sidebar-link span,
    .trend-sidebar-menu a .sidebar-link-text,
    .trend-sidebar-menu a .nav-label {
        display: none !important;
    }

    .trend-sidebar-menu a svg,
    .trend-sidebar-menu a i,
    .trend-sidebar .sidebar-menu a svg,
    .trend-sidebar .sidebar-menu a i,
    .trend-sidebar .sidebar-link svg,
    .trend-sidebar .sidebar-link i {
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
        margin: 0 !important;
        color: inherit !important;
        stroke-width: 1.8 !important;
    }

    .trend-sidebar-menu a:hover,
    .trend-sidebar .sidebar-menu a:hover {
        background: rgba(255,255,255,0.045) !important;
        color: #ffffff !important;
        transform: none !important;
    }

    .trend-sidebar-menu a.active,
    .trend-sidebar-menu a.is-active,
    .trend-sidebar .sidebar-menu a.active,
    .trend-sidebar .sidebar-menu a.is-active,
    .trend-sidebar .sidebar-link.active,
    .trend-sidebar .sidebar-link.is-active {
        color: #ffffff !important;
        background:
            linear-gradient(
                135deg,
                rgba(236,72,153,0.22),
                rgba(139,92,246,0.10)
            ) !important;
        border-color: rgba(236,72,153,0.34) !important;
        box-shadow:
            0 8px 20px rgba(236,72,153,0.10),
            inset 0 1px 0 rgba(255,255,255,0.04) !important;
    }

    /* Keep the Trend active accent clean */
    .trend-sidebar-menu a.active::after,
    .trend-sidebar-menu a.is-active::after {
        content: "" !important;
        position: absolute !important;
        right: -1px !important;
        top: 7px !important;
        width: 2px !important;
        height: 20px !important;
        border-radius: 999px !important;
        background: var(--vm-pink-soft) !important;
    }

    .trend-sidebar .sidebar-bottom,
    .trend-sidebar .sidebar-pro-card,
    .trend-sidebar .trend-sidebar-pro-card {
        display: none !important;
    }


    /* -----------------------------------------------------
       2. HERO — MUCH SMALLER MOBILE TYPOGRAPHY
    ----------------------------------------------------- */

    .trend-hero-command {
        padding: 12px !important;
        border-radius: 15px !important;
        margin-bottom: 10px !important;
    }

    .trend-kicker-row {
        gap: 5px !important;
        margin-bottom: 7px !important;
    }

    .trend-kicker-row .trend-mini-label {
        font-size: 0.50rem !important;
        letter-spacing: 0.075em !important;
    }

    .trend-kicker-row .trend-beta-pill {
        min-height: 18px !important;
        padding: 0 6px !important;
        font-size: 0.46rem !important;
    }

    .trend-page-title {
        max-width: 330px !important;
        margin: 0 !important;

        /* Main heading: intentionally compact */
        font-size: 1.24rem !important;
        line-height: 1.04 !important;
        letter-spacing: -0.047em !important;
        font-weight: 850 !important;
    }

    .trend-page-subtitle {
        max-width: 345px !important;
        margin-top: 6px !important;

        font-size: 0.57rem !important;
        line-height: 1.38 !important;
        color: rgba(248,250,252,0.58) !important;
    }

    .trend-hero-command .trend-action-row {
        margin-top: 8px !important;
        gap: 6px !important;
    }

    .trend-hero-command .trend-secondary-btn,
    .trend-hero-command .trend-primary-btn {
        min-height: 30px !important;
        height: 30px !important;
        padding: 0 9px !important;
        border-radius: 9px !important;
        font-size: 0.53rem !important;
    }


    /* -----------------------------------------------------
       3. HERO PROOF CARD
    ----------------------------------------------------- */

    .trend-hero-command .trend-command-visual {
        min-height: 145px !important;
        margin-top: 8px !important;
    }

    .trend-visual-card.primary {
        padding: 10px !important;
        border-radius: 14px !important;
    }

    .visual-card-body {
        gap: 8px !important;
    }

    .visual-score-ring {
        width: 76px !important;
        height: 76px !important;
    }


    /* -----------------------------------------------------
       4. GENERAL SECTION HEADINGS
    ----------------------------------------------------- */

    .trend-panel-title,
    .trend-mode-panel .trend-panel-title,
    .trend-input-panel .trend-panel-title {
        margin: 0 !important;
        font-size: 0.92rem !important;
        line-height: 1.08 !important;
        letter-spacing: -0.028em !important;
        font-weight: 800 !important;
    }

    .trend-panel-subtitle,
    .trend-mode-panel .trend-panel-subtitle,
    .trend-input-panel .trend-panel-subtitle {
        margin-top: 4px !important;
        font-size: 0.56rem !important;
        line-height: 1.36 !important;
        color: rgba(248,250,252,0.54) !important;
    }

    .trend-section-title,
    .section-head h3,
    .compact-card h3 {
        font-size: 0.82rem !important;
        line-height: 1.12 !important;
    }


    /* -----------------------------------------------------
       5. RESEARCH MODE — TWO COLUMNS ALWAYS
    ----------------------------------------------------- */

    .trend-mode-panel {
        padding: 12px !important;
        margin-bottom: 10px !important;
        border-radius: 15px !important;
    }

    .trend-mode-panel .trend-panel-head {
        margin-bottom: 7px !important;
    }

    .trend-mode-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 6px !important;
    }

    .trend-mode-card {
        display: block !important;
        min-width: 0 !important;
        min-height: 108px !important;
        padding: 8px !important;
        border-radius: 11px !important;
    }

    .mode-card-icon {
        width: 25px !important;
        height: 25px !important;
        margin-bottom: 5px !important;
        border-radius: 8px !important;
    }

    .mode-card-icon svg,
    .mode-card-icon i {
        width: 13px !important;
        height: 13px !important;
    }

    .mode-card-title-row {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 3px !important;
        margin-bottom: 3px !important;
    }

    .mode-card-title-row h3 {
        font-size: 0.62rem !important;
        line-height: 1.05 !important;
        letter-spacing: -0.015em !important;
        font-weight: 800 !important;
    }

    .mode-card-title-row span {
        min-height: 14px !important;
        padding: 0 4px !important;
        font-size: 0.40rem !important;
        line-height: 1 !important;
    }

    .mode-card-content p {
        margin: 0 0 5px !important;
        font-size: 0.47rem !important;
        line-height: 1.30 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .mode-card-content ul {
        gap: 2px !important;
        margin: 0 0 5px !important;
    }

    .mode-card-content li {
        padding-left: 7px !important;
        font-size: 0.43rem !important;
        line-height: 1.22 !important;
    }

    .mode-card-content li::before {
        width: 2px !important;
        height: 2px !important;
        top: 0.55em !important;
    }

    .mode-time {
        min-height: 15px !important;
        padding: 0 5px !important;
        font-size: 0.41rem !important;
    }

    .trend-mode-notice {
        margin-top: 6px !important;
        padding: 8px !important;
        border-radius: 10px !important;
    }

    .trend-mode-notice svg,
    .trend-mode-notice i {
        width: 13px !important;
        height: 13px !important;
    }

    .trend-mode-notice p {
        font-size: 0.58rem !important;
        line-height: 1.40 !important;
    }


    /* -----------------------------------------------------
       6. CREATOR CONTEXT / MARKET TARGETING
    ----------------------------------------------------- */

    .trend-input-panel {
        padding: 12px !important;
        border-radius: 15px !important;
        margin-bottom: 10px !important;
    }

    .trend-input-panel .trend-panel-head {
        margin-bottom: 7px !important;
    }

    .trend-input-panel .trend-mini-label,
    .trend-input-panel .trend-section-kicker {
        font-size: 0.48rem !important;
    }

    .trend-input-panel .trend-form-grid {
        gap: 6px !important;
    }

    .trend-field label {
        font-size: 0.45rem !important;
        line-height: 1 !important;
        margin-bottom: 3px !important;
    }

    .trend-field input,
    .trend-field select,
    .trend-field textarea {
        min-height: 31px !important;
        height: 31px !important;
        padding: 0 8px !important;
        border-radius: 8px !important;
        font-size: 0.49rem !important;
    }

    .trend-field textarea {
        height: 55px !important;
        min-height: 55px !important;
        padding-top: 7px !important;
        line-height: 1.25 !important;
    }

    .trend-field-full,
    #trendProblem,
    #trendCurrentProblem {
        min-height: 55px !important;
    }

    .trend-input-panel h4,
    .trend-market-heading,
    .trend-advanced-title {
        font-size: 0.72rem !important;
        line-height: 1.1 !important;
    }

    .trend-market-section,
    .market-grid {
        margin-top: 9px !important;
    }

    .trend-advanced-panel,
    .trend-advanced-toggle {
        min-height: 40px !important;
        padding: 7px 8px !important;
        border-radius: 10px !important;
    }

    .trend-advanced-panel p,
    .trend-advanced-toggle p {
        font-size: 0.47rem !important;
        line-height: 1.25 !important;
    }


    /* -----------------------------------------------------
       7. FORM INFO STRIPS / RUN SUMMARY
    ----------------------------------------------------- */

    .trend-quality-strip {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 4px !important;
        margin-top: 6px !important;
    }

    .trend-quality-strip > * {
        min-width: 0 !important;
        padding: 6px !important;
        border-radius: 7px !important;
    }

    .trend-quality-strip span,
    .trend-quality-strip p,
    .trend-quality-strip strong {
        font-size: 0.42rem !important;
        line-height: 1.2 !important;
    }

    .trend-run-summary {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 4px !important;
        padding: 5px !important;
    }

    .trend-run-summary div {
        padding: 5px !important;
        border-radius: 7px !important;
    }

    .trend-run-summary span {
        font-size: 0.38rem !important;
    }

    .trend-run-summary strong {
        font-size: 0.47rem !important;
    }

    .trend-primary-btn,
    .trend-analyze-btn,
    #trendResearchBtn {
        height: 36px !important;
        min-height: 36px !important;
        border-radius: 10px !important;
        font-size: 0.55rem !important;
    }


    /* -----------------------------------------------------
       8. STATUS CARDS — COMPACT 2 x 2
    ----------------------------------------------------- */

    .trend-stats-grid,
    .trend-preview-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 5px !important;
        margin-bottom: 10px !important;
    }

    .trend-stat-card {
        min-height: 74px !important;
        padding: 8px !important;
        border-radius: 11px !important;
    }

    .trend-stat-icon {
        width: 23px !important;
        height: 23px !important;
        min-width: 23px !important;
        border-radius: 7px !important;
    }

    .trend-stat-icon svg,
    .trend-stat-icon i {
        width: 12px !important;
        height: 12px !important;
    }

    .trend-stat-card h3 {
        font-size: 0.62rem !important;
        line-height: 1.05 !important;
    }

    .trend-stat-card p,
    .trend-stat-subtext {
        font-size: 0.40rem !important;
        line-height: 1.25 !important;
    }


    /* -----------------------------------------------------
       9. HISTORY — CLEAN, PROFESSIONAL, BOUNDED
    ----------------------------------------------------- */

    #trendHistorySection,
    .trend-history-section {
        margin: 10px 0 14px !important;
        padding: 11px !important;
        border-radius: 14px !important;
    }

    .trend-history-head,
    .trend-history-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 7px !important;
        margin-bottom: 7px !important;
    }

    .trend-history-head-left,
    .trend-history-title-wrap {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .trend-history-head h3,
    .trend-history-header h3,
    .trend-history-title {
        font-size: 0.76rem !important;
        line-height: 1.05 !important;
        letter-spacing: -0.02em !important;
    }

    .trend-history-head p,
    .trend-history-header p,
    #trendHistoryStatusText {
        margin-top: 2px !important;
        font-size: 0.43rem !important;
        line-height: 1.25 !important;
    }

    .trend-history-actions-top,
    .trend-history-top-actions {
        width: auto !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    #trendHistoryCountText,
    .trend-history-count {
        min-height: 18px !important;
        height: 18px !important;
        padding: 0 5px !important;
        font-size: 0.39rem !important;
    }

    #refreshTrendHistoryBtn,
    .trend-history-refresh-btn {
        width: 21px !important;
        min-width: 21px !important;
        height: 21px !important;
        min-height: 21px !important;
        padding: 0 !important;
        border-radius: 7px !important;
        font-size: 0 !important;
    }

    #refreshTrendHistoryBtn svg,
    #refreshTrendHistoryBtn i,
    .trend-history-refresh-btn svg,
    .trend-history-refresh-btn i {
        width: 11px !important;
        height: 11px !important;
    }

    #trendHistoryList,
    .trend-history-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;

        max-height: 220px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;

        padding-right: 3px !important;
    }

    .trend-history-card {
        min-height: 55px !important;
        padding: 7px !important;
        border-radius: 9px !important;
        grid-template-columns: minmax(0,1fr) auto !important;
        gap: 7px !important;
    }

    .trend-history-card-left {
        gap: 7px !important;
        align-items: center !important;
    }

    .trend-history-icon {
        width: 25px !important;
        height: 25px !important;
        min-width: 25px !important;
        border-radius: 7px !important;
    }

    .trend-history-icon svg,
    .trend-history-icon i {
        width: 12px !important;
        height: 12px !important;
    }

    .trend-history-copy h4 {
        margin-bottom: 2px !important;
        font-size: 0.51rem !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .trend-history-copy p {
        font-size: 0.39rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .trend-history-date {
        margin-top: 3px !important;
        min-height: 14px !important;
        padding: 0 4px !important;
        font-size: 0.35rem !important;
    }

    .trend-history-actions {
        width: auto !important;
        justify-content: flex-end !important;
    }

    .trend-history-open-btn {
        min-height: 22px !important;
        height: 22px !important;
        padding: 0 6px !important;
        border-radius: 7px !important;
        font-size: 0.39rem !important;
        gap: 3px !important;
    }

    .trend-history-open-btn svg,
    .trend-history-open-btn i {
        width: 9px !important;
        height: 9px !important;
    }

    #trendHistoryEmpty,
    .trend-history-empty {
        min-height: 74px !important;
        padding: 10px !important;
        border-radius: 9px !important;
        gap: 4px !important;
    }

    #trendHistoryEmpty svg,
    #trendHistoryEmpty i,
    .trend-history-empty svg,
    .trend-history-empty i {
        width: 17px !important;
        height: 17px !important;
    }

    #trendHistoryEmpty h4,
    .trend-history-empty h4 {
        font-size: 0.53rem !important;
        line-height: 1.1 !important;
    }

    #trendHistoryEmpty p,
    .trend-history-empty p {
        max-width: 260px !important;
        font-size: 0.41rem !important;
        line-height: 1.25 !important;
    }


    /* -----------------------------------------------------
       10. RESULTS — COMPACT ONCE THEY APPEAR
    ----------------------------------------------------- */

    #trendResults .trend-report-head,
    #trendResults .trend-results-header,
    #trendResults .trend-card,
    #trendResults .compact-card,
    #trendResults .trend-proof-section,
    #trendResults .audience-demand-section,
    #trendResults .format-playbook-section,
    #trendResults .expandable-report,
    #trendResults .trend-intel-strip {
        border-radius: 13px !important;
        padding: 11px !important;
        margin-bottom: 8px !important;
    }

    #trendResults .trend-report-head-left h2,
    #trendResults .trend-results-header h2 {
        font-size: 0.88rem !important;
        line-height: 1.08 !important;
    }

    #trendResults .trend-report-summary,
    #trendResults .section-subtitle {
        font-size: 0.49rem !important;
        line-height: 1.35 !important;
    }

    #trendResults .trend-opportunity-item,
    #trendResults .trend-opportunity-card,
    #trendResults .trend-hook-row,
    #trendResults .trend-mini-card,
    #trendResults .trend-detail-card {
        padding: 8px !important;
        border-radius: 9px !important;
    }

    #trendResults .trend-opportunity-copy h4,
    #trendResults .trend-opportunity-card h4 {
        font-size: 0.56rem !important;
    }

    #trendResults .trend-opportunity-copy p,
    #trendResults .trend-opportunity-why,
    #trendResults .trend-opportunity-idea,
    #trendResults .trend-hook-copy p,
    #trendResults .trend-mini-card p {
        font-size: 0.45rem !important;
        line-height: 1.3 !important;
    }

    #trendResults .trend-tag,
    #trendResults .pill-list li,
    #trendResults .hashtag-list li {
        min-height: 18px !important;
        padding: 0 6px !important;
        font-size: 0.42rem !important;
    }
}


/* ---------------------------------------------------------
   VERY SMALL PHONES — EXTRA HERO/NAV COMPRESSION
--------------------------------------------------------- */

@media (max-width: 380px) {

    .trend-sidebar-menu a,
    .trend-sidebar .sidebar-menu a,
    .trend-sidebar .sidebar-link {
        width: 35px !important;
        min-width: 35px !important;
        max-width: 35px !important;
        height: 32px !important;
        min-height: 32px !important;
    }

    .trend-sidebar-menu a svg,
    .trend-sidebar-menu a i,
    .trend-sidebar .sidebar-menu a svg,
    .trend-sidebar .sidebar-menu a i {
        width: 14px !important;
        height: 14px !important;
    }

    .trend-page-title {
        max-width: 300px !important;
        font-size: 1.12rem !important;
        line-height: 1.03 !important;
    }

    .trend-page-subtitle {
        font-size: 0.52rem !important;
    }

    .trend-mode-card {
        min-height: 103px !important;
        padding: 7px !important;
    }

    .mode-card-title-row h3 {
        font-size: 0.58rem !important;
    }

    .mode-card-content p {
        font-size: 0.44rem !important;
    }
}

/* =========================================================
   VIRALMINT AI — TREND INTELLIGENCE MOBILE V4
   Paste AFTER trend-intelligence-mobile.css + V3

   V4 fixes:
   - exact Account-style active navigation label
   - correct active-link class used by Trend HTML
   - much smaller 2-line hero heading
   - tighter mobile hero hierarchy
   - keeps icon-only navigation on one row
========================================================= */

@media (max-width: 720px) {

    /* =====================================================
       1. ACCOUNT-STYLE MOBILE NAV
       Trend HTML uses .sidebar-link.active-link, not .active.
       The previous V3 therefore could not show the active
       state/label correctly.
    ===================================================== */

    .trend-sidebar-menu a.active-link,
    .trend-sidebar .sidebar-menu a.active-link,
    .trend-sidebar .sidebar-link.active-link {
        color: #ffffff !important;
        background:
            linear-gradient(
                135deg,
                rgba(236, 72, 153, 0.20),
                rgba(139, 92, 246, 0.10)
            ) !important;
        border-color: rgba(236, 72, 153, 0.34) !important;
        box-shadow:
            0 8px 20px rgba(236, 72, 153, 0.10),
            inset 0 1px 0 rgba(255,255,255,0.04) !important;
        overflow: visible !important;
        z-index: 20 !important;
    }

    .trend-sidebar-menu a.active-link svg,
    .trend-sidebar-menu a.active-link i,
    .trend-sidebar .sidebar-link.active-link svg,
    .trend-sidebar .sidebar-link.active-link i {
        color: var(--vm-pink-light) !important;
        opacity: 1 !important;
    }

    /* Remove the desktop left-side active bar on mobile. */
    .trend-sidebar-menu a.active-link::before,
    .trend-sidebar .sidebar-menu a.active-link::before {
        display: none !important;
    }

    /* Do not use the old V3 right-side accent. */
    .trend-sidebar-menu a.active-link::after,
    .trend-sidebar-menu a.is-active::after {
        content: none !important;
    }

    /*
       Account-style active page label.
       This reproduces the small dark label visible under the
       active Account icon in the reference screenshot.
    */
    .trend-sidebar-menu a.active-link[href="trend-intelligence.html"]::after {
        content: "Trend Intelligence" !important;
        position: absolute !important;
        left: 50% !important;
        top: calc(100% + 5px) !important;
        transform: translateX(-50%) !important;

        width: max-content !important;
        max-width: 112px !important;
        min-height: 20px !important;
        padding: 4px 7px !important;
        box-sizing: border-box !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 6px !important;
        border: 1px solid rgba(255,255,255,0.075) !important;

        background: rgba(14, 12, 18, 0.96) !important;
        box-shadow: 0 7px 18px rgba(0,0,0,0.30) !important;

        color: rgba(255,255,255,0.82) !important;
        font-size: 0.50rem !important;
        line-height: 1 !important;
        font-weight: 760 !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        z-index: 100 !important;
    }

    /* Make sure the nav has enough room for the label. */
    .trend-sidebar-menu {
        margin-bottom: 8px !important;
    }

    /* =====================================================
       2. HERO — TRUE MOBILE SIZE
       The previous 1.24rem was still visually too large.
       This is intentionally around 1rem and balanced.
    ===================================================== */

    .trend-hero-command {
        padding: 11px !important;
        margin-bottom: 9px !important;
        border-radius: 14px !important;
    }

    .trend-page-intro {
        width: 100% !important;
        min-width: 0 !important;
    }

    .trend-kicker-row {
        gap: 4px !important;
        margin-bottom: 6px !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }

    .trend-kicker-row .trend-mini-label {
        flex-shrink: 0 !important;
        font-size: 0.46rem !important;
        letter-spacing: 0.065em !important;
    }

    .trend-kicker-row .trend-beta-pill {
        flex-shrink: 0 !important;
        min-height: 17px !important;
        padding: 0 6px !important;
        font-size: 0.42rem !important;
    }

    .trend-page-title {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        /* Designed to fit as a compact 2-line mobile headline. */
        font-size: 0.98rem !important;
        line-height: 1.05 !important;
        letter-spacing: -0.043em !important;
        font-weight: 850 !important;
        text-wrap: balance !important;
        overflow-wrap: normal !important;
    }

    .trend-page-subtitle {
        width: 100% !important;
        max-width: 100% !important;
        margin: 5px 0 0 !important;

        font-size: 0.54rem !important;
        line-height: 1.35 !important;
        letter-spacing: -0.005em !important;
        color: rgba(248,250,252,0.57) !important;
    }

    .trend-hero-command .trend-action-row {
        margin-top: 7px !important;
        gap: 5px !important;
    }

    .trend-hero-command .trend-secondary-btn,
    .trend-hero-command .trend-primary-btn,
    .trend-hero-command .trend-date-box,
    .trend-hero-command .trend-top-proof-pill {
        min-height: 29px !important;
        height: 29px !important;
        padding: 0 8px !important;
        border-radius: 8px !important;
        font-size: 0.49rem !important;
    }

    /* =====================================================
       3. RESEARCH MODE TYPOGRAPHY
       Keep Fast / Deep side-by-side but make hierarchy cleaner.
    ===================================================== */

    .trend-mode-panel {
        padding: 12px !important;
        border-radius: 14px !important;
        margin-bottom: 10px !important;
    }

    .trend-mode-panel .trend-panel-head.compact {
        margin-bottom: 8px !important;
    }

    .trend-mode-panel .trend-panel-title {
        font-size: 0.84rem !important;
        line-height: 1.08 !important;
        letter-spacing: -0.032em !important;
    }

    .trend-mode-panel .trend-panel-subtitle {
        margin-top: 4px !important;
        font-size: 0.49rem !important;
        line-height: 1.30 !important;
    }

    .trend-mode-notice {
        margin-top: 7px !important;
        padding: 8px !important;
        border-radius: 9px !important;
    }

    .trend-mode-notice p {
        font-size: 0.56rem !important;
        line-height: 1.34 !important;
    }

    .trend-mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .trend-mode-card {
        grid-template-columns: 28px minmax(0, 1fr) !important;
        min-height: 104px !important;
        padding: 8px !important;
        gap: 7px !important;
        border-radius: 11px !important;
    }

    .mode-card-icon {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
    }

    .mode-card-icon svg,
    .mode-card-icon i {
        width: 14px !important;
        height: 14px !important;
    }

    .mode-card-title-row {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 3px !important;
        margin-bottom: 4px !important;
    }

    .mode-card-title-row h3 {
        font-size: 0.62rem !important;
        line-height: 1.05 !important;
        letter-spacing: -0.018em !important;
    }

    .mode-card-title-row span {
        min-height: 16px !important;
        padding: 0 5px !important;
        font-size: 0.38rem !important;
    }

    .mode-card-content p {
        margin-bottom: 5px !important;
        font-size: 0.44rem !important;
        line-height: 1.28 !important;
    }

    .mode-card-content ul {
        gap: 3px !important;
        margin-bottom: 5px !important;
    }

    .mode-card-content li {
        padding-left: 9px !important;
        font-size: 0.39rem !important;
        line-height: 1.18 !important;
    }

    .mode-card-content li::before {
        width: 3px !important;
        height: 3px !important;
    }

    .mode-time {
        min-height: 17px !important;
        padding: 0 5px !important;
        font-size: 0.38rem !important;
    }

    /* =====================================================
       4. CREATOR CONTEXT / SECTION HEADINGS
    ===================================================== */

    .trend-input-panel,
    .trend-search-card,
    .trend-report-head,
    .trend-results-header,
    .trend-proof-section,
    .compact-card,
    .audience-demand-section,
    .format-playbook-section {
        border-radius: 14px !important;
    }

    .trend-input-panel,
    .trend-search-card,
    .trend-report-head,
    .trend-results-header,
    .trend-proof-section,
    .compact-card,
    .audience-demand-section,
    .format-playbook-section {
        padding: 12px !important;
    }

    .trend-panel-head h2,
    .trend-search-card h2,
    .trend-report-head-left h2,
    .trend-results-header h2,
    .section-head h3,
    .compact-card h3 {
        font-size: 0.82rem !important;
        line-height: 1.10 !important;
        letter-spacing: -0.028em !important;
    }

    .trend-panel-head p,
    .trend-search-card p,
    .trend-report-summary,
    .section-subtitle {
        font-size: 0.49rem !important;
        line-height: 1.32 !important;
    }

    /* Creator Context label itself */
    .trend-input-panel .trend-panel-title {
        font-size: 0.84rem !important;
    }

    /* =====================================================
       5. KEEP THE NAV LABEL FROM CLIPPING ON SMALL PHONES
    ===================================================== */

    .trend-sidebar {
        padding-bottom: 9px !important;
    }
}


@media (max-width: 380px) {

    .trend-page-title {
        font-size: 0.91rem !important;
        line-height: 1.04 !important;
        letter-spacing: -0.041em !important;
    }

    .trend-page-subtitle {
        font-size: 0.50rem !important;
    }

    .trend-sidebar-menu a.active-link[href="trend-intelligence.html"]::after {
        font-size: 0.46rem !important;
        min-height: 18px !important;
        padding: 3px 6px !important;
    }
}

/* =========================================================
   FINAL MOBILE TREND HERO HEADING
========================================================= */

@media (max-width: 720px) {

    main.trend-main .trend-topbar .trend-page-intro > h1.trend-page-title {
        display: block !important;

        width: 100% !important;
        max-width: 340px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 24px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.045em !important;
        font-weight: 820 !important;

        text-wrap: balance !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
}

@media (max-width: 520px) {

    main.trend-main .trend-topbar .trend-page-intro > h1.trend-page-title {
        font-size: 22px !important;
        line-height: 1.06 !important;
        max-width: 340px !important;
    }
}

@media (max-width: 380px) {

    main.trend-main .trend-topbar .trend-page-intro > h1.trend-page-title {
        font-size: 20px !important;
        line-height: 1.06 !important;
        max-width: 330px !important;
    }
}


/* ============================================================
   V6 — RESEARCH MODE MOBILE POLISH
   - Smaller selected-mode summary paragraph
   - Prevent Fast Scan / Deep Research timing pills from clipping
   - Keep both cards balanced in the two-column mobile layout
============================================================ */

@media (max-width: 720px) {

    /* Keep the two research cards compact but tall enough for all content */
    .trend-mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .trend-mode-card {
        min-height: 178px !important;
        height: auto !important;

        padding: 11px !important;
        border-radius: 16px !important;

        align-items: start !important;
        overflow: visible !important;
    }

    .trend-mode-card .mode-card-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 11px !important;
        margin-bottom: 0 !important;
    }

    .trend-mode-card .mode-card-icon svg,
    .trend-mode-card .mode-card-icon i {
        width: 16px !important;
        height: 16px !important;
    }

    .mode-card-content {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    .mode-card-title-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        margin-bottom: 6px !important;
    }

    .mode-card-title-row h3 {
        font-size: 0.82rem !important;
        line-height: 1.12 !important;
        letter-spacing: -0.02em !important;
    }

    .mode-card-title-row span {
        min-height: 19px !important;
        padding: 0 6px !important;
        font-size: 0.50rem !important;
    }

    /* Main description inside each Fast/Deep card */
    .mode-card-content > p {
        margin: 0 0 7px !important;

        color: rgba(248, 250, 252, 0.54) !important;

        font-size: 0.60rem !important;
        line-height: 1.34 !important;
        font-weight: 500 !important;
    }

    .mode-card-content ul {
        gap: 3px !important;
        margin: 0 0 7px !important;
    }

    .mode-card-content li {
        padding-left: 9px !important;

        font-size: 0.54rem !important;
        line-height: 1.22 !important;
    }

    .mode-card-content li::before {
        width: 3px !important;
        height: 3px !important;
        top: 0.48em !important;
    }

    /* Timing pill: keep it completely inside the card */
    .mode-time {
        align-self: flex-start !important;

        min-height: 20px !important;
        height: auto !important;

        margin-top: auto !important;
        padding: 0 7px !important;

        font-size: 0.52rem !important;
        line-height: 1 !important;

        white-space: nowrap !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 2 !important;
    }

    /* Selected-mode explanation below the two cards */
    .trend-mode-notice {
        margin-top: 8px !important;
        padding: 10px 11px !important;
        border-radius: 13px !important;
        gap: 0 !important;
    }

    .trend-mode-notice svg,
    .trend-mode-notice i {
        display: none !important;
    }

    .trend-mode-notice p {
        margin: 0 !important;

        color: rgba(248, 250, 252, 0.68) !important;

        font-size: 0.73rem !important;
        line-height: 1.42 !important;
        font-weight: 500 !important;
    }
}

@media (max-width: 520px) {

    .trend-mode-card {
        min-height: 172px !important;
        padding: 10px !important;
    }

    .trend-mode-card .mode-card-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .mode-card-title-row h3 {
        font-size: 0.78rem !important;
    }

    .mode-card-content > p {
        font-size: 0.56rem !important;
        line-height: 1.32 !important;
    }

    .mode-card-content li {
        font-size: 0.50rem !important;
    }

    .mode-time {
        min-height: 19px !important;
        padding: 0 6px !important;
        font-size: 0.49rem !important;
    }

    .trend-mode-notice p {
        font-size: 0.70rem !important;
        line-height: 1.42 !important;
    }
}

/* Smaller selected research mode message */
@media (max-width: 720px) {
    .trend-mode-notice p {
        font-size: 0.62rem !important;
        line-height: 1.38 !important;
        font-weight: 500 !important;
    }

    .trend-mode-notice {
        padding: 8px 10px !important;
        margin-top: 7px !important;
        border-radius: 12px !important;
    }
}

@media (max-width: 520px) {
    .trend-mode-notice p {
        font-size: 0.58rem !important;
        line-height: 1.35 !important;
    }

    .trend-mode-notice {
        padding: 8px 9px !important;
    }
}

/* =========================================================
   MOBILE — HIDE REDUNDANT RESEARCH MODE NOTICE
   Desktop remains unchanged.
========================================================= */

@media screen and (max-width: 720px) {
    #trendResearchModeNotice,
    .trend-mode-notice {
        display: none !important;
    }
}

/* =========================================================
   VIRALMINT AI — MOBILE RESULTS V5
   FINAL RESULT LAYOUT
   ---------------------------------------------------------
   Goal:
   - clean mobile hierarchy
   - no clipped text
   - no fixed-height result cards
   - readable typography
   - less visual congestion
   - preserve desktop completely
========================================================= */

@media screen and (max-width: 720px) {

    /* =====================================================
       1. RESULT SHELL
    ===================================================== */

    #trendResults {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #trendResults *,
    #trendResults *::before,
    #trendResults *::after {
        box-sizing: border-box !important;
    }

    #trendResults .trend-card,
    #trendResults .compact-card,
    #trendResults .trend-proof-section,
    #trendResults .audience-demand-section,
    #trendResults .format-playbook-section,
    #trendResults .expandable-report,
    #trendResults .trend-intel-strip,
    #trendResults .trend-report-head {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;

        overflow: visible !important;

        margin-bottom: 10px !important;
        padding: 12px !important;

        border-radius: 14px !important;
    }


    /* =====================================================
       2. RESULT TYPOGRAPHY
    ===================================================== */

    #trendResults .trend-mini-label {
        margin: 0 0 4px !important;

        font-size: 0.52rem !important;
        line-height: 1 !important;

        letter-spacing: 0.08em !important;
    }

    #trendResults .section-head h3,
    #trendResults .trend-card > .section-head h3,
    #trendResults .compact-card h3 {
        margin: 0 !important;

        font-size: 0.78rem !important;
        line-height: 1.12 !important;

        letter-spacing: -0.015em !important;

        overflow-wrap: anywhere !important;
    }

    #trendResults .section-subtitle {
        margin: 5px 0 0 !important;

        font-size: 0.53rem !important;
        line-height: 1.38 !important;

        color: rgba(248,250,252,0.50) !important;
    }


    /* =====================================================
       3. REPORT HEADER
    ===================================================== */

    #trendResults .trend-report-head {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 8px !important;

        padding: 12px !important;
    }

    #trendResults .trend-report-head-left h2 {
        margin: 3px 0 5px !important;

        font-size: 0.96rem !important;
        line-height: 1.08 !important;

        letter-spacing: -0.025em !important;
    }

    #trendResults .trend-report-summary {
        margin: 0 !important;

        font-size: 0.54rem !important;
        line-height: 1.38 !important;

        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    #trendResults .trend-report-head-right {
        display: grid !important;

        grid-template-columns: repeat(2, minmax(0,1fr)) !important;

        gap: 6px !important;
    }

    #trendResults .trend-signal-badge,
    #trendResults .trend-proof-badge-card {
        min-width: 0 !important;
        min-height: 48px !important;

        padding: 8px !important;

        border-radius: 10px !important;
    }

    #trendResults .trend-signal-badge p,
    #trendResults .trend-proof-badge-card p {
        margin: 0 0 3px !important;

        font-size: 0.45rem !important;
    }

    #trendResults .trend-signal-badge strong,
    #trendResults .trend-proof-badge-card strong {
        font-size: 0.63rem !important;
        line-height: 1.1 !important;
    }

    #trendResults .trend-proof-badge-card span {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;

        margin-top: 3px !important;

        font-size: 0.43rem !important;
        line-height: 1.25 !important;
    }


    /* =====================================================
       4. CONTEXT ANALYZED
    ===================================================== */

    #trendResults .trend-collapsed-context {
        width: 100% !important;

        min-height: 0 !important;

        padding: 9px !important;

        margin-bottom: 9px !important;

        border-radius: 11px !important;

        gap: 6px !important;
    }

    #trendResults .trend-collapsed-context h4 {
        font-size: 0.70rem !important;
        line-height: 1.12 !important;
    }

    #trendResults .trend-collapsed-context p {
        font-size: 0.48rem !important;
        line-height: 1.30 !important;
    }


    /* =====================================================
       5. QUICK WIN
    ===================================================== */

    #trendResults .trend-quick-win {
        display: grid !important;

        grid-template-columns: 28px minmax(0,1fr) !important;

        gap: 8px !important;

        padding: 11px !important;

        min-height: 0 !important;
    }

    #trendResults .quick-win-icon-wrap {
        width: 28px !important;
    }

    #trendResults .quick-win-icon {
        width: 28px !important;
        height: 28px !important;

        border-radius: 8px !important;
    }

    #trendResults .quick-win-block h3 {
        margin: 2px 0 4px !important;

        font-size: 0.72rem !important;
        line-height: 1.18 !important;
    }

    #trendResults .quick-win-block > p {
        margin: 0 !important;

        font-size: 0.49rem !important;
        line-height: 1.32 !important;
    }

    #trendResults .quick-win-side {
        grid-column: 1 / -1 !important;

        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;

        gap: 6px !important;
    }

    #trendResults .mini-output-card {
        min-width: 0 !important;

        padding: 7px !important;

        border-radius: 9px !important;
    }

    #trendResults .mini-output-card p {
        font-size: 0.46rem !important;
        line-height: 1.28 !important;
    }


    /* =====================================================
       6. PROOF SCOREBOARD + GRAPH
       -----------------------------------------------------
       IMPORTANT:
       Never keep these two large sections side-by-side
       on a narrow phone.
    ===================================================== */

    #trendResults .trend-proof-dashboard {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 9px !important;

        align-items: start !important;
    }

    #trendResults .proof-score-panel,
    #trendResults .trend-graph-panel {
        width: 100% !important;

        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
    }


    /* Scoreboard rows */
    #trendResults .post-scoreboard-list,
    #trendResults .post-scoreboard-list,
    #trendResults .scoreboard-list {
        width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 5px !important;

        margin-top: 7px !important;
    }

    #trendResults .scoreboard-row {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 0 !important;
        height: auto !important;

        display: grid !important;

        grid-template-columns: 25px minmax(0,1fr) auto !important;

        gap: 6px !important;

        align-items: start !important;

        padding: 7px !important;

        border-radius: 9px !important;
    }

    #trendResults .scoreboard-rank {
        width: 25px !important;
        height: 25px !important;

        min-width: 25px !important;

        display: grid !important;
        place-items: center !important;

        border-radius: 50% !important;

        font-size: 0.46rem !important;
    }

    #trendResults .scoreboard-content {
        min-width: 0 !important;
    }

    #trendResults .scoreboard-content strong {
        display: block !important;

        max-width: 100% !important;

        font-size: 0.57rem !important;
        line-height: 1.12 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #trendResults .scoreboard-content span {
        display: -webkit-box !important;

        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;

        overflow: hidden !important;

        margin-top: 2px !important;

        font-size: 0.43rem !important;
        line-height: 1.22 !important;
    }

    #trendResults .scoreboard-mini-metrics {
        grid-column: 2 / 3 !important;

        display: flex !important;

        flex-wrap: wrap !important;

        gap: 3px !important;

        margin-top: 2px !important;
    }

    #trendResults .scoreboard-mini-metrics span {
        min-height: 17px !important;

        padding: 0 5px !important;

        border-radius: 999px !important;

        font-size: 0.38rem !important;
    }

    #trendResults .scoreboard-score {
        min-width: 32px !important;

        text-align: right !important;
    }

    #trendResults .scoreboard-score strong {
        display: block !important;

        font-size: 0.72rem !important;
        line-height: 1 !important;
    }

    #trendResults .scoreboard-score span {
        font-size: 0.36rem !important;
        line-height: 1 !important;
    }


    /* Graph */
    #trendResults .trend-graph-wrap {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 0 !important;

        margin-top: 7px !important;
    }

    #trendResults .trend-bar-graph {
        display: grid !important;

        gap: 8px !important;
    }

    #trendResults .trend-bar-row {
        min-width: 0 !important;

        display: grid !important;

        grid-template-columns: minmax(0,1fr) 30px !important;

        gap: 4px !important;
    }

    #trendResults .trend-bar-label {
        grid-column: 1 / -1 !important;

        min-width: 0 !important;
    }

    #trendResults .trend-bar-label strong {
        display: block !important;

        font-size: 0.52rem !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #trendResults .trend-bar-label span {
        display: block !important;

        margin-top: 1px !important;

        font-size: 0.40rem !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #trendResults .trend-bar-track {
        grid-column: 1 !important;
        grid-row: 2 !important;

        height: 5px !important;

        min-width: 0 !important;
    }

    #trendResults .trend-bar-value {
        grid-column: 2 !important;
        grid-row: 2 !important;

        font-size: 0.48rem !important;
    }


    /* =====================================================
       7. LIVE TREND PROOF
    ===================================================== */

    #trendResults .trend-proof-section {
        padding: 11px !important;
    }

    #trendResults .trend-proof-section > .section-head {
        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;
        justify-content: space-between !important;

        gap: 6px !important;
    }

    #trendResults .trend-proof-section .section-head-left {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    #trendResults .trend-proof-section .section-head-left h3 {
        font-size: 0.70rem !important;
    }

    #trendResults #viewAllSourcesBtn {
        flex-shrink: 0 !important;

        min-height: 25px !important;

        padding: 0 7px !important;

        border-radius: 7px !important;

        font-size: 0.42rem !important;
    }

    #trendResults .trend-proof-grid {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 7px !important;

        margin-top: 8px !important;
    }

    /* Source card */
    #trendResults .trend-source-card {
        width: 100% !important;

        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: hidden !important;

        border-radius: 11px !important;
    }

    #trendResults .trend-source-media {
        width: 100% !important;

        height: 105px !important;
        min-height: 105px !important;

        overflow: hidden !important;
    }

    #trendResults .trend-source-media img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
    }

    #trendResults .trend-source-body {
        min-width: 0 !important;

        padding: 9px !important;
    }

    #trendResults .trend-source-topline {
        min-width: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        gap: 5px !important;
    }

    #trendResults .trend-source-creator {
        min-width: 0 !important;

        font-size: 0.63rem !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #trendResults .trend-source-pattern {
        flex-shrink: 0 !important;

        max-width: 42% !important;

        font-size: 0.39rem !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #trendResults .trend-source-caption {
        margin: 5px 0 0 !important;

        font-size: 0.55rem !important;
        line-height: 1.35 !important;

        display: -webkit-box !important;

        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;

        overflow: hidden !important;
    }

    #trendResults .trend-source-metrics {
        display: flex !important;

        flex-wrap: wrap !important;

        gap: 4px !important;

        margin-top: 6px !important;
    }

    #trendResults .trend-source-metrics span {
        min-height: 19px !important;

        padding: 0 6px !important;

        border-radius: 999px !important;

        font-size: 0.40rem !important;
    }

    #trendResults .trend-source-tags {
        display: flex !important;

        flex-wrap: wrap !important;

        gap: 3px !important;

        margin-top: 5px !important;
    }

    #trendResults .trend-source-tag {
        min-height: 17px !important;

        padding: 0 5px !important;

        font-size: 0.38rem !important;
    }

    #trendResults .trend-source-reason {
        margin: 6px 0 0 !important;

        font-size: 0.49rem !important;
        line-height: 1.30 !important;

        display: -webkit-box !important;

        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;

        overflow: hidden !important;
    }

    #trendResults .trend-source-footer {
        display: flex !important;

        gap: 5px !important;

        margin-top: 7px !important;
    }

    #trendResults .trend-source-link {
        min-height: 25px !important;

        flex: 1 1 auto !important;

        justify-content: center !important;

        padding: 0 7px !important;

        border-radius: 7px !important;

        font-size: 0.42rem !important;
    }


    /* =====================================================
       8. AUDIENCE DEMAND
       Two columns = readable without becoming extremely tall.
    ===================================================== */

    #trendResults .audience-demand-section {
        padding: 11px !important;
    }

    #trendResults .audience-demand-section > .section-head {
        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 6px !important;
    }

    #trendResults .audience-demand-grid {
        display: grid !important;

        grid-template-columns: repeat(2,minmax(0,1fr)) !important;

        gap: 6px !important;

        margin-top: 7px !important;
    }

    #trendResults .audience-demand-card {
        width: 100% !important;

        min-width: 0 !important;

        padding: 8px !important;

        border-radius: 9px !important;
    }

    #trendResults .demand-card-head {
        gap: 4px !important;

        margin-bottom: 5px !important;
    }

    #trendResults .demand-card-head svg,
    #trendResults .demand-card-head i {
        width: 12px !important;
        height: 12px !important;
    }

    #trendResults .demand-card-head h4 {
        font-size: 0.52rem !important;
        line-height: 1.1 !important;
    }

    #trendResults .detail-list {
        display: grid !important;

        gap: 0 !important;
    }

    #trendResults .detail-list li {
        min-width: 0 !important;

        padding: 5px 0 !important;

        font-size: 0.45rem !important;
        line-height: 1.30 !important;
    }

    #trendResults .detail-list li::before {
        width: 3px !important;
        height: 3px !important;

        min-width: 3px !important;

        margin-top: 5px !important;
    }


    /* =====================================================
       9. OPPORTUNITIES + HOOK LAB
    ===================================================== */

    #trendResults .trend-insight-grid {
        display: grid !important;

        grid-template-columns: repeat(2,minmax(0,1fr)) !important;

        gap: 7px !important;

        align-items: start !important;
    }

    #trendResults .trend-insight-grid > .compact-card {
        width: 100% !important;

        min-width: 0 !important;

        align-self: start !important;

        height: auto !important;
        min-height: 0 !important;
    }

    #trendResults .stack-list,
    #trendResults .hook-lab-list,
    #trendResults .trend-mini-card-list {
        display: flex !important;

        flex-direction: column !important;

        gap: 6px !important;

        margin-top: 7px !important;
    }

    #trendResults .trend-opportunity-item,
    #trendResults .trend-opportunity-card,
    #trendResults .trend-hook-row,
    #trendResults .trend-mini-card {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 0 !important;

        height: auto !important;

        padding: 8px !important;

        border-radius: 9px !important;
    }

    #trendResults .trend-opportunity-copy h4,
    #trendResults .trend-opportunity-card h4 {
        font-size: 0.52rem !important;
        line-height: 1.18 !important;
    }

    #trendResults .trend-opportunity-copy p,
    #trendResults .trend-opportunity-why,
    #trendResults .trend-opportunity-idea,
    #trendResults .trend-hook-copy p,
    #trendResults .trend-mini-card p {
        font-size: 0.44rem !important;

        line-height: 1.30 !important;
    }

    #trendResults .trend-opportunity-hook {
        margin-top: 5px !important;

        padding: 6px !important;

        border-radius: 7px !important;
    }

    #trendResults .trend-opportunity-hook strong {
        font-size: 0.43rem !important;
        line-height: 1.25 !important;
    }

    #trendResults .trend-opportunity-meta {
        gap: 3px !important;
        margin-top: 5px !important;
    }

    #trendResults .trend-opportunity-meta span {
        min-height: 17px !important;

        padding: 0 5px !important;

        font-size: 0.37rem !important;
    }

    #trendResults .trend-viral-score,
    #trendResults .trend-opportunity-score {
        width: 29px !important;
        height: 24px !important;

        font-size: 0.44rem !important;
    }


    /* =====================================================
       10. 7-DAY PLAN
       -----------------------------------------------------
       IMPORTANT:
       Remove the old fixed height that was cutting text.
    ===================================================== */

    #trendResults .seven-day-plan-grid,
    #trendResults .trend-plan-list {
        display: grid !important;

        grid-template-columns: repeat(2,minmax(0,1fr)) !important;

        gap: 6px !important;

        align-items: start !important;
    }

    #trendResults .trend-day-tile,
    #trendResults .trend-plan-item {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 116px !important;

        height: auto !important;

        padding: 9px !important;

        border-radius: 10px !important;

        overflow: visible !important;
    }

    #trendResults .trend-day-label,
    #trendResults .trend-plan-day {
        margin-bottom: 6px !important;

        font-size: 0.41rem !important;
    }

    #trendResults .trend-day-icon {
        width: 17px !important;
        height: 17px !important;

        margin-bottom: 5px !important;
    }

    #trendResults .trend-day-tile h4,
    #trendResults .trend-plan-item h4 {
        margin: 0 0 4px !important;

        font-size: 0.54rem !important;

        line-height: 1.16 !important;
    }

    #trendResults .trend-day-tile p,
    #trendResults .trend-plan-item p {
        margin: 0 !important;

        font-size: 0.43rem !important;

        line-height: 1.28 !important;

        display: -webkit-box !important;

        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;

        overflow: hidden !important;
    }

    #trendResults .trend-day-hook {
        width: 100% !important;

        margin-top: 7px !important;

        padding-top: 6px !important;
    }

    #trendResults .trend-day-hook span {
        font-size: 0.38rem !important;
    }

    #trendResults .trend-day-hook strong {
        font-size: 0.42rem !important;

        line-height: 1.22 !important;

        display: -webkit-box !important;

        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;

        overflow: hidden !important;
    }

    /* Calendar preview should also grow naturally. */
    #trendResults .seven-day-plan-grid.calendar-preview-active {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    #trendResults .seven-day-plan-grid.calendar-preview-active .trend-day-tile {
        height: auto !important;

        min-height: 125px !important;
    }


    /* =====================================================
       11. FORMAT PLAYBOOK
    ===================================================== */

    #trendResults .format-playbook-grid {
        display: grid !important;

        grid-template-columns: repeat(2,minmax(0,1fr)) !important;

        gap: 6px !important;

        align-items: start !important;
    }

    #trendResults .format-playbook-card {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 0 !important;
        height: auto !important;

        padding: 8px !important;

        border-radius: 9px !important;
    }

    #trendResults .format-playbook-head {
        gap: 5px !important;

        margin-bottom: 5px !important;
    }

    #trendResults .format-playbook-head svg,
    #trendResults .format-playbook-head i {
        width: 12px !important;
        height: 12px !important;
    }

    #trendResults .format-playbook-head h4 {
        min-width: 0 !important;

        font-size: 0.52rem !important;
        line-height: 1.14 !important;
    }

    #trendResults .format-playbook-line {
        margin-top: 5px !important;
        padding-top: 5px !important;
    }

    #trendResults .format-playbook-line span {
        margin-bottom: 3px !important;

        font-size: 0.37rem !important;
    }

    #trendResults .format-playbook-line p {
        font-size: 0.43rem !important;
        line-height: 1.28 !important;
    }


    /* =====================================================
       12. ADVANCED INTELLIGENCE
    ===================================================== */

    #trendResults .trend-intel-strip {
        display: grid !important;

        grid-template-columns: repeat(2,minmax(0,1fr)) !important;

        gap: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;
    }

    #trendResults .intel-strip-item {
        min-width: 0 !important;

        min-height: 68px !important;

        padding: 9px !important;

        border-right: 1px dashed rgba(255,255,255,0.07) !important;
        border-bottom: 1px dashed rgba(255,255,255,0.07) !important;
    }

    #trendResults .intel-strip-item:nth-child(2n) {
        border-right: none !important;
    }

    #trendResults .intel-strip-item:nth-last-child(-n+2) {
        border-bottom: none !important;
    }

    #trendResults .intel-strip-icon {
        width: 27px !important;
        height: 27px !important;

        min-width: 27px !important;

        border-radius: 8px !important;
    }

    #trendResults .intel-strip-icon svg,
    #trendResults .intel-strip-icon i {
        width: 13px !important;
        height: 13px !important;
    }

    #trendResults .intel-strip-title {
        margin: 0 0 3px !important;

        font-size: 0.51rem !important;
        line-height: 1.12 !important;
    }

    #trendResults .intel-strip-subtitle {
        font-size: 0.41rem !important;
        line-height: 1.28 !important;
    }


    /* =====================================================
       13. REPORT ACTIONS
    ===================================================== */

    #trendResults .trend-export-bar {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 7px !important;

        padding: 10px !important;
    }

    #trendResults .trend-export-bar h3 {
        font-size: 0.66rem !important;
        line-height: 1.18 !important;
    }

    #trendResults .trend-export-actions {
        display: grid !important;

        grid-template-columns: repeat(2,minmax(0,1fr)) !important;

        gap: 5px !important;
    }

    #trendResults .trend-export-actions .text-action-btn {
        min-height: 27px !important;

        padding: 0 6px !important;

        font-size: 0.41rem !important;
    }


    /* =====================================================
       14. EXPAND REPORT
    ===================================================== */

    #trendResults .expandable-head {
        min-height: 48px !important;

        padding: 9px !important;

        flex-direction: row !important;

        align-items: center !important;
        justify-content: space-between !important;

        gap: 6px !important;
    }

    #trendResults .expandable-head h3 {
        font-size: 0.68rem !important;
        line-height: 1.12 !important;
    }

    #trendResults .expandable-trigger {
        min-height: 25px !important;

        padding: 0 7px !important;

        font-size: 0.42rem !important;

        flex-shrink: 0 !important;
    }

    #trendResults .expandable-content {
        padding: 0 9px 9px !important;
    }

    #trendResults .trend-detail-grid {
        display: grid !important;

        grid-template-columns: repeat(2,minmax(0,1fr)) !important;

        gap: 6px !important;

        padding-top: 7px !important;

        align-items: start !important;
    }

    #trendResults .trend-detail-card {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 0 !important;
        height: auto !important;

        padding: 8px !important;

        border-radius: 9px !important;

        align-self: start !important;
    }

    #trendResults .detail-card-head {
        margin-bottom: 6px !important;

        gap: 4px !important;
    }

    #trendResults .detail-card-head h4 {
        min-width: 0 !important;

        font-size: 0.53rem !important;
        line-height: 1.15 !important;
    }

    #trendResults .detail-card-head span {
        font-size: 0.36rem !important;
    }

    #trendResults .trend-detail-card .detail-list li {
        font-size: 0.43rem !important;

        line-height: 1.28 !important;

        padding: 4px 0 !important;
    }

    #trendResults .video-brief-box {
        gap: 6px !important;
    }

    #trendResults .video-brief-section {
        padding: 7px !important;

        border-radius: 8px !important;
    }

    #trendResults .video-brief-section span {
        font-size: 0.38rem !important;
    }

    #trendResults .video-brief-section p {
        font-size: 0.46rem !important;

        line-height: 1.32 !important;
    }


    /* =====================================================
       15. HASHTAGS / TAGS
    ===================================================== */

    #trendResults .tag-cloud,
    #trendResults .pill-list,
    #trendResults .hashtag-list {
        gap: 3px !important;
    }

    #trendResults .trend-tag,
    #trendResults .pill-list li,
    #trendResults .hashtag-list li {
        min-height: 18px !important;

        padding: 0 5px !important;

        font-size: 0.38rem !important;
    }

    #trendResults .hashtag-cluster-wrap {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;

        gap: 6px !important;
    }

    #trendResults .hashtag-cluster-block,
    #trendResults .hashtag-cluster-group {
        min-width: 0 !important;

        padding: 7px !important;

        border-radius: 8px !important;
    }

    #trendResults .hashtag-cluster-block h5,
    #trendResults .hashtag-cluster-group h5 {
        margin-bottom: 5px !important;

        font-size: 0.50rem !important;
    }


    /* =====================================================
       16. REMOVE CLIPPING FROM ALL RESULT CONTENT
       This is the important "no text cut" layer.
    ===================================================== */

    #trendResults .trend-card,
    #trendResults .compact-card,
    #trendResults .trend-proof-dashboard,
    #trendResults .trend-proof-section,
    #trendResults .audience-demand-section,
    #trendResults .trend-insight-grid,
    #trendResults .format-playbook-section,
    #trendResults .trend-intel-strip,
    #trendResults .expandable-report,
    #trendResults .trend-detail-card,
    #trendResults .trend-day-tile,
    #trendResults .trend-plan-item,
    #trendResults .format-playbook-card,
    #trendResults .audience-demand-card {
        max-height: none !important;
    }

    #trendResults p,
    #trendResults h3,
    #trendResults h4,
    #trendResults strong,
    #trendResults span {
        overflow-wrap: anywhere !important;
    }
}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media screen and (max-width: 420px) {

    #trendResults .trend-main {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #trendResults .trend-proof-grid {
        grid-template-columns: 1fr !important;
    }

    #trendResults .audience-demand-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    #trendResults .trend-insight-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    #trendResults .trend-detail-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    #trendResults .trend-source-media {
        height: 95px !important;
        min-height: 95px !important;
    }

    #trendResults .trend-day-tile,
    #trendResults .trend-plan-item {
        min-height: 110px !important;
    }
}

/* =========================================================
   VIRALMINT AI — MOBILE FINAL FIX
   HISTORY ORDER + STATUS CARD HEIGHT
========================================================= */

@media (max-width: 720px) {

    /* =====================================================
       1. CORRECT MOBILE SECTION ORDER

       Desired mobile order:

       Input / Generator
          ↓
       Status cards
          ↓
       Generated Results
          ↓
       Report History
    ===================================================== */

    .dashboard-content-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }

    /*
       History is written earlier in the HTML,
       so explicitly move it to the end on mobile.
    */

    #trendHistorySection,
    .trend-history-section {
        order: 30 !important;
    }

    .trend-stats-grid {
        order: 10 !important;
    }

    #trendResults {
        order: 20 !important;
    }


    /* =====================================================
       2. FOUR STATUS CARDS
       Fix text being cut from the bottom.
    ===================================================== */

    .trend-stats-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 6px !important;

        margin: 0 0 8px !important;

        align-items: stretch !important;
    }


    .trend-stat-card {
        width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        min-height: 84px !important;

        max-height: none !important;

        padding: 8px !important;

        border-radius: 11px !important;

        overflow: visible !important;

        display: flex !important;

        align-items: flex-start !important;

        gap: 7px !important;

        box-sizing: border-box !important;
    }


    /* Icon */

    .trend-stat-icon {
        width: 22px !important;
        height: 22px !important;

        min-width: 22px !important;
        flex: 0 0 22px !important;

        border-radius: 7px !important;
    }

    .trend-stat-icon svg,
    .trend-stat-icon i {
        width: 11px !important;
        height: 11px !important;
    }


    /* Text container */

    .trend-stat-card > div:last-child {
        min-width: 0 !important;

        width: 100% !important;

        min-height: 0 !important;

        overflow: visible !important;
    }


    /* Label */

    .trend-stat-label {
        margin: 0 0 3px !important;

        font-size: 0.38rem !important;

        line-height: 1.05 !important;

        letter-spacing: 0.04em !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }


    /* Main value */

    .trend-stat-card h3 {
        margin: 0 !important;

        font-size: 0.64rem !important;

        line-height: 1.08 !important;

        white-space: nowrap !important;

        overflow: visible !important;
    }


    /* Description */

    .trend-stat-subtext,
    .trend-stat-card p:not(.trend-stat-label) {
        margin: 3px 0 0 !important;

        font-size: 0.39rem !important;

        line-height: 1.25 !important;

        display: -webkit-box !important;

        -webkit-box-orient: vertical !important;

        -webkit-line-clamp: 2 !important;

        overflow: hidden !important;

        white-space: normal !important;
    }


    /* Trend score */

    .trend-score-inline {
        display: flex !important;

        align-items: baseline !important;

        gap: 2px !important;
    }

    .trend-score-inline small {
        font-size: 0.36rem !important;
    }


    .trend-score-bar {
        width: 100% !important;

        height: 4px !important;

        margin-top: 5px !important;

        border-radius: 999px !important;

        overflow: hidden !important;
    }


    /* =====================================================
       3. HISTORY SECTION
    ===================================================== */

    #trendHistorySection,
    .trend-history-section {
        width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        margin: 8px 0 0 !important;

        padding: 10px !important;

        border-radius: 13px !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* History heading */

    .trend-history-head,
    .trend-history-header {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) auto !important;

        align-items: start !important;

        gap: 6px !important;

        margin: 0 0 6px !important;
    }


    .trend-history-head > div:first-child,
    .trend-history-header > div:first-child {
        min-width: 0 !important;
    }


    .trend-history-head .trend-mini-label {
        margin: 0 0 2px !important;

        font-size: 0.39rem !important;

        line-height: 1 !important;
    }


    .trend-history-head h3,
    .trend-history-header h3,
    .trend-history-title {
        margin: 0 !important;

        font-size: 0.72rem !important;

        line-height: 1.05 !important;

        letter-spacing: -0.02em !important;
    }


    .trend-history-head .section-subtitle,
    .trend-history-header .section-subtitle {
        margin: 3px 0 0 !important;

        max-width: 205px !important;

        font-size: 0.40rem !important;

        line-height: 1.25 !important;

        display: -webkit-box !important;

        -webkit-box-orient: vertical !important;

        -webkit-line-clamp: 2 !important;

        overflow: hidden !important;
    }


    /* History controls */

    .trend-history-actions {
        width: auto !important;

        min-width: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;

        gap: 3px !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    #trendHistoryCountText {
        min-height: 18px !important;

        height: 18px !important;

        padding: 0 5px !important;

        border-radius: 999px !important;

        font-size: 0.36rem !important;

        white-space: nowrap !important;
    }


    #refreshTrendHistoryBtn {
        width: 21px !important;

        min-width: 21px !important;

        height: 21px !important;

        min-height: 21px !important;

        padding: 0 !important;

        border-radius: 7px !important;

        font-size: 0 !important;
    }


    #refreshTrendHistoryBtn svg,
    #refreshTrendHistoryBtn i {
        width: 10px !important;

        height: 10px !important;
    }


    /* =====================================================
       4. SAVED HISTORY LIST
    ===================================================== */

    #trendHistoryStatusText {
        margin: 0 0 5px !important;

        font-size: 0.38rem !important;

        line-height: 1.2 !important;

        color: rgba(255,255,255,0.38) !important;
    }


    #trendHistoryList,
    .trend-history-list {
        width: 100% !important;

        min-width: 0 !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 5px !important;

        max-height: 230px !important;

        overflow-y: auto !important;

        overflow-x: hidden !important;

        padding: 0 3px 0 0 !important;

        scrollbar-width: thin !important;
    }


    /* Each saved report */

    .trend-history-card {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 53px !important;

        height: auto !important;

        padding: 7px !important;

        border-radius: 9px !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) auto !important;

        gap: 6px !important;

        align-items: center !important;

        overflow: visible !important;
    }


    .trend-history-card-left {
        min-width: 0 !important;

        display: flex !important;

        align-items: center !important;

        gap: 6px !important;
    }


    .trend-history-icon {
        width: 24px !important;

        height: 24px !important;

        min-width: 24px !important;

        flex: 0 0 24px !important;

        border-radius: 7px !important;
    }


    .trend-history-icon svg,
    .trend-history-icon i {
        width: 11px !important;

        height: 11px !important;
    }


    .trend-history-copy {
        min-width: 0 !important;

        overflow: hidden !important;
    }


    .trend-history-copy h4 {
        margin: 0 0 2px !important;

        font-size: 0.48rem !important;

        line-height: 1.12 !important;

        display: -webkit-box !important;

        -webkit-box-orient: vertical !important;

        -webkit-line-clamp: 2 !important;

        overflow: hidden !important;
    }


    .trend-history-copy p {
        margin: 0 !important;

        font-size: 0.37rem !important;

        line-height: 1.18 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        color: rgba(255,255,255,0.46) !important;
    }


    .trend-history-date {
        margin-top: 2px !important;

        min-height: 13px !important;

        padding: 0 4px !important;

        font-size: 0.34rem !important;
    }


    .trend-history-actions {
        width: auto !important;

        min-width: 0 !important;

        flex: 0 0 auto !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;

        gap: 3px !important;
    }


    .trend-history-open-btn,
    .trend-history-list button,
    .trend-history-list a {
        min-width: 25px !important;

        width: auto !important;

        height: 22px !important;

        min-height: 22px !important;

        padding: 0 6px !important;

        border-radius: 6px !important;

        font-size: 0.36rem !important;

        white-space: nowrap !important;
    }


    .trend-history-open-btn svg,
    .trend-history-open-btn i {
        width: 9px !important;

        height: 9px !important;
    }


    /* =====================================================
       5. IMPORTANT:
       If saved reports exist, remove the empty state.
       
       This fixes the screenshot where saved reports AND
       "No saved trend reports yet" appear together.
    ===================================================== */

    #trendHistorySection:has(#trendHistoryList > *) #trendHistoryEmpty,
    #trendHistorySection:has(.trend-history-list > *) .trend-history-empty {
        display: none !important;
    }


    /* Empty state only when there are actually no reports */

    #trendHistorySection:not(:has(#trendHistoryList > *)) #trendHistoryEmpty,
    #trendHistorySection:not(:has(.trend-history-list > *)) .trend-history-empty {
        display: flex !important;

        min-height: 72px !important;

        margin: 4px 0 0 !important;

        padding: 9px !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 6px !important;

        border-radius: 9px !important;
    }


    #trendHistoryEmpty strong,
    .trend-history-empty strong {
        font-size: 0.50rem !important;

        line-height: 1.1 !important;
    }


    #trendHistoryEmpty p,
    .trend-history-empty p {
        margin: 2px 0 0 !important;

        font-size: 0.39rem !important;

        line-height: 1.2 !important;
    }
}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    .trend-stat-card {
        min-height: 86px !important;

        padding: 8px 7px !important;
    }

    .trend-stat-card h3 {
        font-size: 0.62rem !important;
    }

    .trend-stat-subtext,
    .trend-stat-card p:not(.trend-stat-label) {
        font-size: 0.38rem !important;

        line-height: 1.22 !important;

        -webkit-line-clamp: 2 !important;
    }

    #trendHistoryList,
    .trend-history-list {
        max-height: 225px !important;
    }

    .trend-history-card {
        min-height: 51px !important;

        padding: 6px !important;
    }
}

/* =========================================================
   MOBILE — OPPORTUNITIES + HOOK LAB
   V6 PREMIUM CLEANUP
========================================================= */

@media (max-width: 720px) {

    /* -----------------------------------------------------
       MAIN TWO-COLUMN AREA
    ----------------------------------------------------- */

    .trend-insight-grid {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 7px !important;

        width: 100% !important;

        min-width: 0 !important;

        margin-bottom: 10px !important;

        align-items: start !important;
    }


    .trend-insight-grid > * {
        min-width: 0 !important;

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       THE TWO MAIN CARDS
    ----------------------------------------------------- */

    .trend-insight-grid .compact-card {
        min-width: 0 !important;

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        padding: 9px !important;

        border-radius: 11px !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       CARD HEADERS
    ----------------------------------------------------- */

    .trend-insight-grid .compact-card .section-head,
    .trend-insight-grid .compact-card .card-head {
        min-width: 0 !important;

        margin-bottom: 6px !important;

        gap: 4px !important;
    }


    .trend-insight-grid .compact-card h3,
    .trend-insight-grid .compact-card h4 {
        min-width: 0 !important;

        margin: 0 !important;

        font-size: 0.66rem !important;

        line-height: 1.12 !important;

        letter-spacing: -0.015em !important;
    }


    .trend-insight-grid .compact-card .section-kicker,
    .trend-insight-grid .compact-card .trend-mini-label {
        margin-bottom: 3px !important;

        font-size: 0.39rem !important;

        line-height: 1 !important;
    }


    /* -----------------------------------------------------
       VIEW ALL / GENERATE MORE
    ----------------------------------------------------- */

    .trend-insight-grid .compact-card > a,
    .trend-insight-grid .compact-card > button {
        max-width: 100% !important;

        margin: 2px 0 7px !important;

        font-size: 0.53rem !important;

        line-height: 1.1 !important;
    }


    /* =====================================================
       OPPORTUNITY LIST
    ===================================================== */

    .trend-opportunity-list,
    .stack-list {
        display: flex !important;

        flex-direction: column !important;

        gap: 5px !important;

        width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* Individual opportunity */

    .trend-opportunity-card,
    .trend-opportunity-item {
        display: block !important;

        position: relative !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        padding: 7px !important;

        border-radius: 8px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* Remove unnecessary desktop side grid */

    .trend-opportunity-card,
    .trend-opportunity-item {
        grid-template-columns: none !important;
    }


    .trend-opportunity-copy,
    .trend-opportunity-top {
        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        overflow: hidden !important;
    }


    .trend-opportunity-label {
        margin-bottom: 3px !important;

        font-size: 0.40rem !important;

        line-height: 1 !important;
    }


    .trend-opportunity-copy h4,
    .trend-opportunity-card h4 {
        margin: 0 0 3px !important;

        max-width: 100% !important;

        font-size: 0.52rem !important;

        line-height: 1.18 !important;

        letter-spacing: -0.01em !important;

        overflow-wrap: anywhere !important;
    }


    .trend-opportunity-copy p,
    .trend-opportunity-why,
    .trend-opportunity-idea {
        margin: 0 !important;

        max-width: 100% !important;

        font-size: 0.40rem !important;

        line-height: 1.28 !important;

        overflow-wrap: anywhere !important;
    }


    /* -----------------------------------------------------
       OPPORTUNITY SCORE
       Keep it inside instead of letting it push content.
    ----------------------------------------------------- */

    .trend-opportunity-score,
    .trend-viral-score {
        position: absolute !important;

        top: 7px !important;

        right: 7px !important;

        width: 24px !important;

        height: 21px !important;

        min-width: 24px !important;

        border-radius: 999px !important;

        font-size: 0.42rem !important;

        z-index: 3 !important;
    }


    .trend-opportunity-score svg,
    .trend-viral-score svg,
    .trend-opportunity-score i,
    .trend-viral-score i {
        width: 8px !important;

        height: 8px !important;
    }


    /* Give title a little room from score */

    .trend-opportunity-card h4,
    .trend-opportunity-item h4 {
        padding-right: 27px !important;
    }


    /* -----------------------------------------------------
       OPPORTUNITY HOOK
    ----------------------------------------------------- */

    .trend-opportunity-hook {
        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        margin-top: 5px !important;

        padding: 6px !important;

        display: block !important;

        border-radius: 7px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    .trend-opportunity-hook span {
        display: block !important;

        margin-bottom: 3px !important;

        font-size: 0.35rem !important;

        line-height: 1 !important;
    }


    .trend-opportunity-hook strong {
        display: block !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        color: rgba(255,255,255,0.82) !important;

        font-size: 0.40rem !important;

        line-height: 1.30 !important;

        font-weight: 650 !important;

        white-space: normal !important;

        overflow: visible !important;

        overflow-wrap: anywhere !important;

        word-break: normal !important;
    }


    /* -----------------------------------------------------
       OPPORTUNITY META
    ----------------------------------------------------- */

    .trend-opportunity-meta {
        display: flex !important;

        flex-wrap: wrap !important;

        width: 100% !important;

        min-width: 0 !important;

        gap: 3px !important;

        margin-top: 5px !important;
    }


    .trend-opportunity-meta span {
        min-width: 0 !important;

        min-height: 16px !important;

        max-width: 100% !important;

        padding: 0 5px !important;

        font-size: 0.34rem !important;

        line-height: 1 !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;
    }


    /* =====================================================
       HOOK LAB
    ===================================================== */

    .hook-lab-list,
    .trend-mini-card-list {
        display: flex !important;

        flex-direction: column !important;

        gap: 5px !important;

        width: 100% !important;

        min-width: 0 !important;

        padding: 0 !important;

        margin: 0 !important;
    }


    /* Individual hook */

    .trend-hook-row,
    .trend-mini-card {
        position: relative !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            25px !important;

        gap: 5px !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        min-height: 0 !important;

        height: auto !important;

        padding: 7px !important;

        border-radius: 8px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        align-items: start !important;
    }


    /* -----------------------------------------------------
       HOOK TEXT
    ----------------------------------------------------- */

    .trend-hook-copy {
        min-width: 0 !important;

        width: 100% !important;

        max-width: 100% !important;

        overflow: visible !important;
    }


    .trend-hook-copy span,
    .trend-hook-type {
        margin-bottom: 3px !important;

        font-size: 0.38rem !important;

        line-height: 1 !important;
    }


    .trend-hook-copy p,
    .trend-mini-card p,
    .trend-mini-card h4 {
        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        margin: 0 !important;

        font-size: 0.41rem !important;

        line-height: 1.32 !important;

        white-space: normal !important;

        overflow: visible !important;

        overflow-wrap: anywhere !important;

        word-break: normal !important;
    }


    .trend-hook-copy small,
    .trend-mini-card small {
        display: block !important;

        margin-top: 3px !important;

        font-size: 0.35rem !important;

        line-height: 1.25 !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;
    }


    /* =====================================================
       COPY BUTTON
       Keep it INSIDE the card.
    ===================================================== */

    .trend-copy-btn {
        position: relative !important;

        width: 25px !important;

        min-width: 25px !important;

        max-width: 25px !important;

        height: 25px !important;

        min-height: 25px !important;

        padding: 0 !important;

        margin: 0 !important;

        align-self: start !important;

        justify-self: end !important;

        border-radius: 7px !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    .trend-copy-btn svg,
    .trend-copy-btn i {
        width: 11px !important;

        height: 11px !important;
    }


    /* =====================================================
       COPY TOOLTIP
       Don't let "Copied" enlarge/overflow the card.
    ===================================================== */

    .trend-copy-btn.copied::after {
        right: 0 !important;

        top: -22px !important;

        padding: 3px 5px !important;

        font-size: 0.35rem !important;

        line-height: 1 !important;

        z-index: 20 !important;
    }


    /* =====================================================
       IMPORTANT:
       Prevent ANY child from creating horizontal overflow.
    ===================================================== */

    .trend-insight-grid *,
    .trend-opportunity-card *,
    .trend-opportunity-item *,
    .trend-hook-row *,
    .trend-mini-card * {
        max-width: 100% !important;

        box-sizing: border-box !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    .trend-insight-grid {
        gap: 6px !important;
    }

    .trend-insight-grid .compact-card {
        padding: 8px !important;
    }

    .trend-opportunity-card,
    .trend-opportunity-item,
    .trend-hook-row,
    .trend-mini-card {
        padding: 6px !important;
    }

    .trend-opportunity-copy h4,
    .trend-opportunity-card h4 {
        font-size: 0.50rem !important;
    }

    .trend-opportunity-copy p,
    .trend-opportunity-why,
    .trend-opportunity-idea,
    .trend-hook-copy p,
    .trend-mini-card p,
    .trend-mini-card h4 {
        font-size: 0.39rem !important;

        line-height: 1.28 !important;
    }

    .trend-opportunity-hook strong {
        font-size: 0.39rem !important;

        line-height: 1.28 !important;
    }
}

/* =========================================================
   MOBILE FIX — OPPORTUNITY SCORE ICON
   Prevent icon from overlapping opportunity title
========================================================= */

@media (max-width: 720px) {

    .trend-opportunity-card,
    .trend-opportunity-item {
        position: relative !important;
        overflow: hidden !important;
    }

    /* Smaller score/action icon */
    .trend-opportunity-card .trend-opportunity-score,
    .trend-opportunity-item .trend-opportunity-score,
    .trend-opportunity-card .trend-viral-score,
    .trend-opportunity-item .trend-viral-score {
        position: absolute !important;

        top: 7px !important;
        right: 7px !important;

        width: 19px !important;
        height: 19px !important;

        min-width: 19px !important;
        min-height: 19px !important;

        padding: 0 !important;

        border-radius: 50% !important;

        font-size: 0.34rem !important;

        z-index: 5 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .trend-opportunity-card .trend-opportunity-score svg,
    .trend-opportunity-card .trend-opportunity-score i,
    .trend-opportunity-item .trend-opportunity-score svg,
    .trend-opportunity-item .trend-opportunity-score i,
    .trend-opportunity-card .trend-viral-score svg,
    .trend-opportunity-card .trend-viral-score i,
    .trend-opportunity-item .trend-viral-score svg,
    .trend-opportunity-item .trend-viral-score i {
        width: 7px !important;
        height: 7px !important;
    }

    /* Protect the title from the icon */
    .trend-opportunity-card h4,
    .trend-opportunity-item h4 {
        width: 100% !important;

        max-width: 100% !important;

        padding-right: 25px !important;

        margin-right: 0 !important;

        box-sizing: border-box !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    /* Keep opportunity label/title text clean */
    .trend-opportunity-label {
        max-width: calc(100% - 23px) !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}


/* Extra-small phones */
@media (max-width: 420px) {

    .trend-opportunity-card .trend-opportunity-score,
    .trend-opportunity-item .trend-opportunity-score,
    .trend-opportunity-card .trend-viral-score,
    .trend-opportunity-item .trend-viral-score {
        width: 18px !important;
        height: 18px !important;

        min-width: 18px !important;
        min-height: 18px !important;

        top: 6px !important;
        right: 6px !important;
    }

    .trend-opportunity-card h4,
    .trend-opportunity-item h4 {
        padding-right: 23px !important;
    }
}

/* =========================================================
   MOBILE — SMALLER OPPORTUNITY ICON ONLY
========================================================= */

@media (max-width: 720px) {

    .trend-opportunity-card .trend-opportunity-score,
    .trend-opportunity-item .trend-opportunity-score,
    .trend-opportunity-card .trend-viral-score,
    .trend-opportunity-item .trend-viral-score {
        width: 12px !important;
        height: 12px !important;

        min-width: 12px !important;
        min-height: 12px !important;

        top: 7px !important;
        right: 7px !important;

        padding: 0 !important;

        border-radius: 50% !important;

        font-size: 0.28rem !important;
    }

    .trend-opportunity-card .trend-opportunity-score svg,
    .trend-opportunity-card .trend-opportunity-score i,
    .trend-opportunity-item .trend-opportunity-score svg,
    .trend-opportunity-item .trend-opportunity-score i,
    .trend-opportunity-card .trend-viral-score svg,
    .trend-opportunity-card .trend-viral-score i,
    .trend-opportunity-item .trend-viral-score svg,
    .trend-opportunity-item .trend-viral-score i {
        width: 6px !important;
        height: 6px !important;
    }
}