/* =========================================================================
   GuinRank V7 — YouTube Audience Question Miner & Idea Generator
   Standard: _agent/YOUTUBE.md (Sections 1.4, 1.9, 3.2, Standards 9-13)
   100% Theme Variables (:root) — Zero Hardcoded Hex Overrides
   ========================================================================= */

#question-miner-app {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 0 16px 80px;
    color: var(--text-main);
    box-sizing: border-box;
}

/* =========================================================================
   Standard 12: Wide Mode & Layout Expansion
   ========================================================================= */
#question-miner-app.is-wide-mode {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: clamp(16px, 2.5vw, 40px) !important;
    padding-right: clamp(16px, 2.5vw, 40px) !important;
}

#question-miner-app.is-wide-mode .results-dashboard {
    max-width: 100% !important;
    width: 100% !important;
}

#question-miner-app.is-wide-mode .audit-hub-container {
    max-width: 100% !important;
    width: 100% !important;
}

#question-miner-app.is-wide-mode .console-features {
    max-width: 100% !important;
}

#question-miner-app.is-wide-mode .unified-search-container {
    max-width: 100% !important;
}

#question-miner-app.is-wide-mode .table-responsive-container {
    max-width: 100% !important;
}

/* Global Lucide SVG alignment */
#question-miner-app svg.lucide {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

/* Ambient Glow & Initial Loading */
.hero-ambient-glow {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 350px;
    background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}

.tool-loading-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 380px;
}

.tool-content-state {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tool-content-state.show {
    opacity: 1;
}

/* =========================================================================
   Presentation Hero Section
   ========================================================================= */
.console-hero {
    text-align: center;
    max-width: 840px;
    margin: 20px auto 32px;
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--primary-light);
    border: 1px solid var(--primary-border-light);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 16px;
}

.hero-title {
    font-size: clamp(24px, 3.6vw, 38px);
    font-weight: 900;
    line-height: 1.25;
    margin: 0 0 16px;
    color: var(--text-main);
    letter-spacing: -0.02em;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary-color) 0%, color-mix(in srgb, var(--primary-color) 70%, #f59e0b) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 24px;
}

.hero-features-belt {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.belt-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
}

.belt-item i, .belt-item svg {
    color: var(--primary-color);
    font-size: 15px;
}

/* =========================================================================
   Compliance Micro-Pill (Section III.E.2)
   ========================================================================= */
.yt-compliance-micro-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 660px;
    margin: 0 auto 24px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--card-bg);
    border: 1px dashed var(--border-color);
    box-shadow: var(--shadow-sm);
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.cmp-icon {
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
}

.cmp-text {
    flex: 1;
}

.cmp-action-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

/* =========================================================================
   Unified Control & Search Bar
   ========================================================================= */
.unified-search-container {
    max-width: 1040px;
    margin: 0 auto 32px;
    position: relative;
    z-index: 40;
}

.unified-search-bar {
    display: flex;
    align-items: center;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    padding: 6px 10px;
    box-shadow: var(--shadow-md), 0 0 0 1px var(--primary-border-light);
    gap: 6px;
}

.search-segment {
    display: flex;
    align-items: center;
    position: relative;
}

.dropdown-segment {
    cursor: pointer;
}

.segment-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    transition: background 0.2s ease;
}

.segment-trigger:hover {
    background: var(--primary-light);
}

.channel-avatar-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid var(--primary-border-light);
    flex-shrink: 0;
    background: var(--bg-body, rgba(0, 0, 0, 0.05));
}

.channel-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.segment-label-group {
    display: flex;
    flex-direction: column;
    text-align: right;
    min-width: 90px;
    max-width: 150px;
}

[dir="ltr"] .segment-label-group, .ltr .segment-label-group {
    text-align: left;
}

.segment-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
}

.segment-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chevron-icon {
    font-size: 14px;
    color: var(--text-muted);
}

.range-icon {
    color: var(--primary-color);
    display: flex;
    align-items: center;
}

.search-divider {
    width: 1px;
    height: 30px;
    background: var(--border-color);
    margin: 0 4px;
    flex-shrink: 0;
}

.input-segment {
    flex: 1;
    min-width: 180px;
    padding: 0 8px;
    gap: 8px;
}

.input-icon {
    color: var(--text-muted);
    font-size: 16px;
    display: flex;
    align-items: center;
}

.search-input-field {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--text-main);
    padding: 8px 0;
    font-family: inherit;
}

.search-input-field::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.input-clear-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-clear-btn:hover {
    color: var(--text-main);
    background: var(--primary-light);
}

.sync-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-muted);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s ease;
    flex-shrink: 0;
}

.sync-btn:hover:not(:disabled) {
    color: var(--primary-color);
    border-color: var(--primary-border-light);
    background: var(--primary-light);
}

.round-search-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, color-mix(in srgb, var(--primary-color) 85%, #000) 100%);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 40%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.round-search-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-color) 50%, transparent);
}

.round-search-btn:active:not(:disabled) {
    transform: translateY(0);
}

.btn-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.credit-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 7px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
}

/* Glass Menus for Dropdowns */
.glass-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--primary-border-light);
    min-width: 250px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 1000;
    padding: 8px;
    backdrop-filter: blur(16px);
}

[dir="ltr"] .glass-menu, .ltr .glass-menu {
    right: auto;
    left: 0;
}

.dropdown-header {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.dropdown-item:hover {
    background: var(--primary-light);
}

.dropdown-item.is-selected {
    background: color-mix(in srgb, var(--primary-light) 75%, transparent);
    font-weight: 700;
}

.dropdown-empty {
    padding: 16px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.item-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.item-name {
    font-size: 13px;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-sub {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.check-icon {
    color: var(--primary-color);
    font-size: 14px;
}

.dropdown-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
}

.add-channel-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

.add-channel-link:hover {
    text-decoration: underline;
}

/* =========================================================================
   Progress Overlay State
   ========================================================================= */
.search-progress-container {
    max-width: 600px;
    margin: 20px auto 40px;
    position: relative;
    z-index: 10;
}

.progress-glass-card {
    background: var(--card-bg);
    border: 1.5px solid var(--primary-border-light);
    border-radius: 20px;
    padding: 36px 28px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.progress-pulse-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
    opacity: 0.6;
    pointer-events: none;
    filter: blur(40px);
}

.progress-body {
    position: relative;
    z-index: 2;
}

.progress-title {
    font-size: 18px;
    font-weight: 800;
    margin: 16px 0 8px;
    color: var(--text-main);
}

.progress-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 20px;
}

.progress-bar-track {
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color) 0%, #10b981 100%);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* =========================================================================
   Standard GuinRank Bento Features Cluster (6 Cards)
   ========================================================================= */
.console-features {
    max-width: 1040px;
    margin: 36px auto 0;
    position: relative;
    z-index: 1;
}

.bento-features-cluster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(140px, auto);
    gap: 16px;
}

.bento-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 22px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.bento-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-border-light);
    box-shadow: var(--shadow-md);
}

.bc-wide-top {
    grid-column: span 2;
}

.bc-wide-mid {
    grid-column: span 2;
}

.bc-tall {
    grid-row: span 2;
}

.dashed-ring-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1.5px dashed var(--primary-color);
    padding: 3px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.bc-icon-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.bc-icon-wrapper i, .bc-icon-wrapper svg {
    width: 20px;
    height: 20px;
}

.bc-content {
    position: relative;
    z-index: 2;
}

.bc-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--text-main);
}

.bc-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.bento-decor-icon {
    position: absolute;
    bottom: -10px;
    opacity: 0.08;
    color: var(--text-main);
    pointer-events: none;
    z-index: 1;
}

.bento-decor-icon i, .bento-decor-icon svg {
    width: 80px;
    height: 80px;
}

[dir="rtl"] .bento-decor-icon, html[dir="rtl"] .bento-decor-icon {
    left: 18px;
    right: auto;
}

[dir="ltr"] .bento-decor-icon, html[dir="ltr"] .bento-decor-icon {
    right: 18px;
    left: auto;
}

/* CSS Keyframe Animations */
.anim-spin { animation: bento-spin 3s linear infinite; }
.anim-pulse { animation: bento-pulse 2s ease-in-out infinite; }
.anim-float { animation: bento-float 3s ease-in-out infinite; }
.anim-glow { animation: bento-glow 2s alternate infinite; }
.anim-tilt { animation: bento-tilt 3s ease-in-out infinite; }
.anim-bounce { animation: bento-bounce 2s infinite; }

@keyframes bento-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bento-pulse { 0%, 100% { transform: scale(1); opacity: 0.08; } 50% { transform: scale(1.08); opacity: 0.16; } }
@keyframes bento-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes bento-glow { from { filter: drop-shadow(0 0 2px var(--primary-color)); } to { filter: drop-shadow(0 0 12px var(--primary-color)); } }
@keyframes bento-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(6deg); } }
@keyframes bento-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* =========================================================================
   Results Dashboard & Channel Summary
   ========================================================================= */
.results-dashboard {
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.audit-summary-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    padding: 18px 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
    gap: 16px;
}

.banner-channel-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.channel-avatar-ring {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    padding: 2px;
    background: var(--card-bg);
}

.banner-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.verified-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 2px solid var(--card-bg);
}

.banner-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.channel-heading {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: var(--text-main);
}

.subs-pill {
    background: var(--primary-light);
    color: var(--primary-color);
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
}

.banner-subtext {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

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

.banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    transition: 0.2s ease;
}

.banner-btn:hover {
    border-color: var(--primary-border-light);
    color: var(--primary-color);
    background: var(--primary-light);
}

/* =========================================================================
   4 Top KPI Cards Grid
   ========================================================================= */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.kpi-primary { border-top: 4px solid var(--primary-color); }
.kpi-info { border-top: 4px solid #3b82f6; }
.kpi-success { border-top: 4px solid #10b981; }
.kpi-warning { border-top: 4px solid #f59e0b; }

.kpi-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.kpi-icon {
    font-size: 18px;
    color: var(--text-muted);
}

.kpi-primary .kpi-icon { color: var(--primary-color); }
.kpi-info .kpi-icon { color: #3b82f6; }
.kpi-success .kpi-icon { color: #10b981; }
.kpi-warning .kpi-icon { color: #f59e0b; }

.kpi-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.kpi-value-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.kpi-value {
    font-size: 26px;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1;
}

.text-trending {
    font-size: 18px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-badge {
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
}

.badge-surge {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.badge-unanswered {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.kpi-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}

.kpi-subtext {
    font-size: 12px;
    color: var(--text-muted);
}

/* =========================================================================
   Dual Charts Analytics Grid
   ========================================================================= */
.charts-analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.chart-glass-panel {
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    min-height: 340px;
    display: flex;
    flex-direction: column;
}

.panel-header {
    margin-bottom: 16px;
}

.panel-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-icon {
    color: var(--primary-color);
    font-size: 18px;
    display: flex;
    align-items: center;
}

.panel-heading {
    font-size: 15px;
    font-weight: 800;
    margin: 0;
    color: var(--text-main);
}

.chart-body {
    flex: 1;
    position: relative;
    min-height: 270px;
}

.apexchart-wrapper {
    width: 100%;
    height: 100%;
}

/* =========================================================================
   AI Content Opportunity Strategic Banner
   ========================================================================= */
.ai-opportunity-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-light) 40%, var(--card-bg)) 0%, var(--card-bg) 100%);
    border: 1.5px solid var(--primary-border-light);
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    gap: 16px;
    flex-wrap: wrap;
}

.opp-ambient-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
    opacity: 0.6;
    pointer-events: none;
    filter: blur(30px);
}

.opp-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 40%, transparent);
}

.opp-content {
    flex: 1;
    min-width: 260px;
}

.opp-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 6px;
}

.opp-text {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    color: var(--text-main);
    font-weight: 600;
}

.opp-cta {
    flex-shrink: 0;
}

.opp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 40%, transparent);
    transition: transform 0.15s ease;
}

.opp-action-btn:hover {
    transform: translateY(-1px);
}

/* =========================================================================
   Master Studio Command Hub
   ========================================================================= */
.audit-hub-container {
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 24px;
}

.audit-hub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1.5px solid var(--border-color);
    gap: 12px;
    flex-wrap: wrap;
}

.hub-tabs-scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0;
}

.hub-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s ease;
    white-space: nowrap;
}

.hub-tab-btn:hover {
    color: var(--text-main);
    background: var(--primary-light);
}

.hub-tab-btn.active {
    background: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-border-light);
}

.tab-badge {
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 11px;
}

.hub-tab-btn.active .tab-badge {
    background: var(--primary-color);
    color: #fff;
}

.hub-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hub-search-box {
    display: flex;
    align-items: center;
    background: var(--bg-body, rgba(0, 0, 0, 0.03));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 10px;
    height: 36px;
    width: 190px;
    position: relative;
}

.hub-search-icon {
    color: var(--text-muted);
    font-size: 14px;
    margin-left: 6px;
}

[dir="ltr"] .hub-search-icon, .ltr .hub-search-icon {
    margin-left: 0;
    margin-right: 6px;
}

.hub-search-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-main);
    font-family: inherit;
}

.hub-clear-icon {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
}

.hub-sort-wrapper {
    position: relative;
}

.hub-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s ease;
}

.hub-btn:hover {
    border-color: var(--primary-border-light);
    color: var(--primary-color);
    background: var(--primary-light);
}

.sort-trigger-btn .chevron {
    font-size: 12px;
    color: var(--text-muted);
}

.hub-sort-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
}

[dir="ltr"] .hub-sort-menu, .ltr .hub-sort-menu {
    right: auto;
    left: 0;
}

.hub-view-switcher {
    display: flex;
    align-items: center;
    background: var(--bg-body, rgba(0, 0, 0, 0.03));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 2px;
}

.switcher-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 32px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.15s ease;
}

.switcher-btn.active {
    background: var(--card-bg);
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

/* =========================================================================
   Quantum Data Table View
   ========================================================================= */
.table-responsive-container {
    width: 100%;
    overflow-x: auto;
}

.quantum-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: right;
}

[dir="ltr"] .quantum-table, .ltr .quantum-table {
    text-align: left;
}

.quantum-table th {
    background: var(--bg-body, rgba(0, 0, 0, 0.02));
    padding: 12px 16px;
    font-weight: 800;
    color: var(--text-muted);
    border-bottom: 1.5px solid var(--border-color);
    white-space: nowrap;
}

.quantum-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.cluster-row:hover {
    background: var(--primary-light);
}

.td-index {
    width: 50px;
    text-align: center;
}

.idx-number {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.question-cell-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.question-main-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.question-bubble-icon {
    color: var(--primary-color);
    font-size: 15px;
    margin-top: 2px;
    flex-shrink: 0;
}

.question-text {
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.4;
}

.sample-quotes-container {
    padding-right: 24px;
}

[dir="ltr"] .sample-quotes-container, .ltr .sample-quotes-container {
    padding-right: 0;
    padding-left: 24px;
}

.toggle-quotes-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
}

.toggle-quotes-btn:hover {
    text-decoration: underline;
}

.quotes-count-badge {
    color: var(--text-muted);
    font-size: 11px;
}

.sample-quotes-chips {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.quote-chip {
    background: var(--bg-body, rgba(0, 0, 0, 0.02));
    border-right: 3px solid var(--primary-color);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.4;
}

[dir="ltr"] .quote-chip, .ltr .quote-chip {
    border-right: none;
    border-left: 3px solid var(--primary-color);
}

.quote-mark {
    color: var(--primary-color);
    font-weight: 900;
}

/* Category Badges */
.category-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.cat-technical { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.cat-pricing { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.cat-setup { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.cat-comparison { background: rgba(249, 115, 22, 0.12); color: #f97316; }
.cat-troubleshooting { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.cat-feature_request { background: rgba(236, 72, 153, 0.12); color: #ec4899; }

/* Volume Bar */
.volume-meter-wrapper {
    min-width: 100px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.volume-val-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.volume-number {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
}

.growth-indicator {
    font-size: 11px;
    font-weight: 800;
    color: #10b981;
}

.volume-bar-track {
    width: 100%;
    height: 6px;
    background: var(--border-color);
    border-radius: 999px;
    overflow: hidden;
}

.volume-bar-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 999px;
}

/* Unanswered Meter */
.unanswered-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.unans-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.unans-high { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.unans-high .unans-dot { background: #ef4444; }

.unans-moderate { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.unans-moderate .unans-dot { background: #f59e0b; }

.unans-low { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.unans-low .unans-dot { background: #10b981; }

.action-planner-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--primary-border-light);
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.15s ease;
    white-space: nowrap;
}

.action-planner-btn:hover {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

/* =========================================================================
   Quantum Cards Grid View
   ========================================================================= */
.quantum-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    padding: 18px;
}

.question-card-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.question-card-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary-border-light);
}

.qcard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.qcard-question {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 10px;
    line-height: 1.4;
}

.qcard-stats-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
}

.stat-value {
    font-size: 14px;
    font-weight: 800;
}

.qcard-sample-preview {
    background: var(--bg-body, rgba(0, 0, 0, 0.02));
    border-radius: 8px;
    padding: 8px 10px;
}

.preview-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
}

.preview-text {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    font-style: italic;
    line-height: 1.4;
}

.qcard-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

.qcard-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    background: var(--primary-light);
    border: 1px solid var(--primary-border-light);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.15s ease;
}

.qcard-action-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

/* =========================================================================
   Standard 7: Dropup Pagination Bar
   ========================================================================= */
.crd-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-top: 1.5px solid var(--border-color);
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
}

.crd-pagination-info {
    color: var(--text-muted);
    font-weight: 600;
}

.crd-pagination-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.crd-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s ease;
}

.crd-page-btn:hover:not(:disabled) {
    border-color: var(--primary-border-light);
    color: var(--primary-color);
}

.crd-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.crd-page-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
}

.crd-page-number {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s ease;
}

.crd-page-number.is-active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.crd-page-size-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-size-label {
    color: var(--text-muted);
}

.crd-page-size-wrapper {
    position: relative;
}

.crd-page-size-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.crd-dropup-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 4px;
    min-width: 80px;
    z-index: 1000;
}

[dir="ltr"] .crd-dropup-menu, .ltr .crd-dropup-menu {
    right: auto;
    left: 0;
}

.crd-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.crd-menu-item:hover {
    background: var(--primary-light);
}

.crd-menu-item.is-selected {
    background: var(--primary-light);
    color: var(--primary-color);
    font-weight: 700;
}

/* =========================================================================
   Standard 9: Zero-Scroll Trap Modal Architecture
   ========================================================================= */
html.modal-open,
body.modal-open {
    overflow: hidden !important;
    height: 100vh !important;
}

.custom-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.custom-modal-overlay {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    z-index: 1 !important;
}

.modal-card {
    background: var(--card-bg) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--primary-border-light) !important;
    width: 100% !important;
    max-width: 680px !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* الهيدر والفوتر ثابتان لا يتحركان أبداً */
    position: relative !important;
    z-index: 1000000 !important;
    margin: auto !important;
}

.modal-header,
.modal-footer {
    flex-shrink: 0 !important;
    background: var(--card-bg) !important;
}
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1.5px solid var(--border-color);
}

.modal-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.modal-title {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
    color: var(--text-main);
}

.modal-category-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover {
    background: var(--primary-light);
    color: var(--text-main);
}

.modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    max-height: calc(85vh - 135px) !important;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.modal-educational-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--primary-light);
    border: 1px solid var(--primary-border-light);
    border-radius: 12px;
    padding: 12px 14px;
}

.edu-icon {
    color: var(--primary-color);
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.edu-title {
    font-size: 13px;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--text-main);
}

.edu-desc {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
}

.modal-target-box {
    background: var(--bg-body, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px 16px;
}

.target-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 6px;
}

.target-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 10px;
    line-height: 1.4;
}

.target-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.target-pill {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

.pill-growth { color: #10b981; border-color: rgba(16, 185, 129, 0.3); }
.pill-unans { color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); }

.modal-action-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1.5px solid var(--border-color);
    padding-bottom: 8px;
}

.m-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s ease;
}

.m-tab-btn:hover {
    color: var(--text-main);
    background: var(--primary-light);
}

.m-tab-btn.active {
    background: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-border-light);
}

.modal-tab-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.blueprint-block {
    background: var(--bg-body, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
}

.block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.block-step {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-title {
    font-size: 13px;
    font-weight: 800;
    margin: 0;
    color: var(--text-main);
}

.script-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-main);
    margin: 0;
}

.faq-item-card {
    background: var(--bg-body, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
}

.faq-q-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.faq-badge {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.q-badge { background: var(--primary-color); color: #fff; }
.a-badge { background: #10b981; color: #fff; }

.faq-question {
    font-size: 14px;
    color: var(--text-main);
}

.faq-a-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.faq-answer {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-main);
    margin: 0;
}

.pinned-comment-box {
    background: var(--bg-body, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
}

.pinned-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.pin-icon {
    color: var(--primary-color);
}

.pinned-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
}

.pinned-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-main);
    margin: 0;
    white-space: pre-line;
}

.modal-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-top: 1.5px solid var(--border-color);
    background: var(--card-bg);
}

.modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.15s ease;
}

.outline-btn {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-main);
}

.outline-btn:hover {
    background: var(--primary-light);
    color: var(--primary-color);
}

.primary-btn {
    border: none;
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 40%, transparent);
}

.primary-btn:hover {
    transform: translateY(-1px);
}

/* Compliance Modal Text */
.compliance-statement-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cmp-p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

.cmp-p.highlight {
    color: var(--text-main);
    font-weight: 700;
    background: var(--primary-light);
    padding: 12px;
    border-radius: 10px;
    border-right: 3px solid var(--primary-color);
}

[dir="ltr"] .cmp-p.highlight, .ltr .cmp-p.highlight {
    border-right: none;
    border-left: 3px solid var(--primary-color);
}

/* Subtle Disclaimer Footer */
.tool-compliance-footer {
    text-align: center;
    padding: 24px 16px 0;
    max-width: 800px;
    margin: 0 auto;
}

.footer-disclaimer-text {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
    opacity: 0.75;
    margin: 0;
}

/* =========================================================================
   Standard 13: Quantum Glass Tooltip for ApexCharts
   ========================================================================= */
.aqm-tooltip-quantum {
    position: relative;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--card-bg, #ffffff) 96%, transparent) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, var(--border-color)) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 26px -6px rgba(0, 0, 0, 0.25), 0 0 0 1px color-mix(in srgb, var(--primary-color) 12%, transparent) !important;
    min-width: 190px;
    max-width: 250px;
    font-family: inherit;
    text-align: right;
    pointer-events: none !important;
    user-select: none;
    box-sizing: border-box;
}

[dir="ltr"] .aqm-tooltip-quantum,
.ltr .aqm-tooltip-quantum {
    text-align: left;
}

.aqm-tt-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.aqm-tt-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    flex-shrink: 0;
}

.aqm-tt-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aqm-tt-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aqm-tt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.aqm-tt-label {
    color: var(--text-muted);
}

.aqm-tt-val {
    font-weight: 800;
    color: var(--text-main);
}

.aqm-tt-footer {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed color-mix(in srgb, var(--border-color) 60%, transparent);
}

.aqm-tt-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
}

.tt-badge-high { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.tt-badge-avg { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

/* =========================================================================
   Audience Question Studio & Inbox (Purpose-Driven Functional Layout)
   ========================================================================= */

/* Unanswered Radar Filter Tab */
.hub-tab-btn.tab-unanswered {
    border-color: rgba(239, 68, 68, 0.35);
}

.hub-tab-btn.tab-unanswered.active {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

.unans-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    display: inline-block;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.tab-badge.badge-unans {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
}

.hub-tab-btn.tab-unanswered.active .tab-badge.badge-unans {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Question Studio Cards Grid */
.question-studio-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.studio-question-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
    box-sizing: border-box;
}

.studio-question-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.12);
    border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color));
}

.studio-question-card.is-unanswered {
    border-inline-start: 4px solid #ef4444;
}

/* Card Header */
.sq-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.sq-author-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sq-author-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-light);
    border: 1px solid var(--primary-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.sq-author-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sq-author-avatar .avatar-letter {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary-color);
}

.sq-author-meta {
    display: flex;
    flex-direction: column;
}

.sq-author-meta .author-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
}

.sq-author-meta .publish-date {
    font-size: 11px;
    color: var(--text-muted);
}

.sq-badges-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Unanswered / Answered Status Badge */
.sq-unans-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.sq-unans-badge .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.sq-unans-badge.badge-unanswered-hot {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.sq-unans-badge.badge-unanswered-hot .status-dot {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
}

.sq-unans-badge.badge-answered {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.sq-unans-badge.badge-answered .status-dot {
    background: #10b981;
}

/* Card Body */
.sq-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.sq-question-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.sq-q-mark {
    color: var(--primary-color);
    flex-shrink: 0;
    margin-top: 3px;
}

.sq-original-quote {
    background: color-mix(in srgb, var(--card-bg) 85%, var(--primary-light));
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px dashed var(--border-color);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.sq-original-quote .quote-icon {
    color: var(--text-muted);
    opacity: 0.6;
    flex-shrink: 0;
    margin-top: 2px;
}

.sq-original-quote .quote-text {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
    margin: 0;
}

.sq-video-source {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
}

.sq-video-source .vid-label {
    color: #ff0000;
}

.sq-video-source .vid-link {
    color: var(--text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s ease;
}

.sq-video-source .vid-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.sq-video-source .vid-title-text {
    font-weight: 600;
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sq-video-source .vid-ext-icon {
    opacity: 0.7;
    font-size: 11px;
}

/* AI Quick Draft Reply Drawer */
.sq-ai-reply-drawer {
    background: color-mix(in srgb, var(--card-bg) 92%, var(--primary-color) 8%);
    border: 1px solid color-mix(in srgb, var(--primary-color) 28%, var(--border-color));
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 4px;
}

.reply-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.drawer-title-group {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
}

.drawer-label {
    font-size: 12px;
    font-weight: 800;
}

.copy-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-reply-btn:hover {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

.reply-draft-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-main);
    margin: 0;
}

/* Card Footer */
.sq-card-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sq-engagement-stats {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--card-bg) 70%, var(--border-color));
    padding: 4px 10px;
    border-radius: 8px;
}

.stat-pill strong {
    color: var(--text-main);
    font-weight: 700;
}

.sq-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sq-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-outline-maker {
    background: var(--primary-color);
    color: #ffffff;
}

.btn-outline-maker:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-secondary-icon {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-main);
    padding: 8px 10px;
}

.btn-secondary-icon:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Table View Adjustments */
.question-table-row:hover td {
    background: color-mix(in srgb, var(--card-bg) 95%, var(--primary-light));
}

.table-author-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.author-avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-light);
    border: 1px solid var(--primary-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.author-avatar-sm .avatar-img-sm {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-avatar-sm .avatar-letter-sm {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary-color);
}

.author-text-meta {
    display: flex;
    flex-direction: column;
}

.author-name-cell {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.author-date-cell {
    font-size: 11px;
    color: var(--text-muted);
}

.table-question-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 380px;
}

.t-question-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.4;
}

.t-quote-sub {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-video-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 12px;
    max-width: 180px;
}

.table-video-link:hover {
    color: var(--primary-color);
}

.video-icon {
    color: #ff0000;
    flex-shrink: 0;
}

.video-title-clamp {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-actions-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tbl-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    transition: all 0.2s ease;
}

.tbl-action-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.tbl-action-btn.btn-copy-reply {
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-color));
}

.tbl-action-btn.btn-copy-reply:hover {
    background: var(--primary-color);
    color: #ffffff;
}

/* Empty State */
.hub-empty-state {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-muted);
}

.hub-empty-state .empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
    display: block;
}

.hub-empty-state .empty-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .bento-features-cluster { grid-template-columns: repeat(2, 1fr); }
    .bc-wide-top, .bc-wide-mid { grid-column: span 2; }
    .question-studio-cards-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .bento-features-cluster { grid-template-columns: 1fr; }
    .bc-wide-top, .bc-wide-mid, .bc-tall { grid-column: span 1; grid-row: span 1; }
    .hero-title { font-size: 26px; }
    .unified-search-bar { flex-direction: column; align-items: stretch; }
    .search-divider { display: none; }
    .round-search-btn { width: 100%; border-radius: 12px; }
    .audit-hub-header { flex-direction: column; align-items: stretch; }
    .hub-header-actions { justify-content: space-between; }
    .hub-search-box { width: 100%; }
    .question-studio-cards-grid { grid-template-columns: 1fr; }
    .sq-card-header { flex-direction: column; align-items: flex-start; }
    .sq-card-footer { flex-direction: column; align-items: stretch; }
    .sq-actions-row { justify-content: flex-end; }
}