/* ============================================================
   TailAdmin-inspired Design System
   Adapted from https://github.com/TailAdmin/tailadmin-free-tailwind-dashboard-template
   Light + Dark theme via [data-theme] attribute on <html>
   All original class/variable names are preserved so app.js keeps working unchanged.
   ============================================================ */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* TailAdmin brand palette */
    --ta-brand-25: #f2f7ff;
    --ta-brand-50: #ecf3ff;
    --ta-brand-100: #dde9ff;
    --ta-brand-200: #c2d6ff;
    --ta-brand-300: #9cb9ff;
    --ta-brand-400: #7592ff;
    --ta-brand-500: #465fff;
    --ta-brand-600: #3641f5;
    --ta-brand-700: #2a31d8;
    --ta-brand-800: #252dae;
    --ta-brand-900: #262e89;

    --ta-gray-25: #fcfcfd;
    --ta-gray-50: #f9fafb;
    --ta-gray-100: #f2f4f7;
    --ta-gray-200: #e4e7ec;
    --ta-gray-300: #d0d5dd;
    --ta-gray-400: #98a2b3;
    --ta-gray-500: #667085;
    --ta-gray-600: #475467;
    --ta-gray-700: #344054;
    --ta-gray-800: #1d2939;
    --ta-gray-900: #101828;
    --ta-gray-950: #0c111d;

    --ta-success-500: #12b76a;
    --ta-warning-500: #f79009;
    --ta-error-500: #f04438;
    --ta-info-500: #0ba5ec;

    /* Light theme (default) semantic tokens */
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f9fafb;
    --bg-sidebar: #ffffff;
    --bg-input: #ffffff;
    --text-primary: #1d2939;
    --text-secondary: #475467;
    --text-muted: #98a2b3;
    --accent: #465fff;
    --accent-light: #7592ff;
    --accent-glow: rgba(70, 95, 255, 0.1);
    --success: #12b76a;
    --success-bg: rgba(18, 183, 106, 0.1);
    --warning: #f79009;
    --warning-bg: rgba(247, 144, 9, 0.1);
    --danger: #f04438;
    --danger-bg: rgba(240, 68, 56, 0.1);
    --info: #0ba5ec;
    --info-bg: rgba(11, 165, 236, 0.1);
    --border: #e4e7ec;
    --border-active: rgba(70, 95, 255, 0.4);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, 0.12), 0 4px 8px -2px rgba(16, 24, 40, 0.06);
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --page-bg-image: none;
}

/* Dark theme overrides — TailAdmin dark mode tokens */
html[data-theme="dark"] {
    --bg-primary: #0c111d;
    --bg-secondary: #101828;
    --bg-card: #161e2e;
    --bg-card-hover: #1d2637;
    --bg-sidebar: #101828;
    --bg-input: #101828;
    --text-primary: #f2f4f7;
    --text-secondary: #98a2b3;
    --text-muted: #667085;
    --accent: #7592ff;
    --accent-light: #9cb9ff;
    --accent-glow: rgba(117, 146, 255, 0.15);
    --success: #32d583;
    --success-bg: rgba(50, 213, 131, 0.15);
    --warning: #fdb022;
    --warning-bg: rgba(253, 176, 34, 0.15);
    --danger: #f97066;
    --danger-bg: rgba(249, 112, 102, 0.15);
    --info: #36bffa;
    --info-bg: rgba(54, 191, 250, 0.15);
    --border: rgba(255, 255, 255, 0.08);
    --border-active: rgba(117, 146, 255, 0.4);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.3);
}

html, body {
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    transition: background 0.25s ease, color 0.25s ease;
}

body {
    background: var(--bg-primary);
}

#app { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ── */
.sidebar {
    width: 250px;
    min-width: 250px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.sidebar-header { padding: 20px 18px; border-bottom: 1px solid var(--border); }

.logo { display: flex; align-items: center; gap: 12px; }
.logo-img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.logo-icon {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--accent), var(--ta-brand-700));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 14px var(--accent-glow);
}
.logo-title { display: block; font-weight: 700; font-size: 15px; color: var(--text-primary); }
.logo-subtitle { display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; }

.sidebar-nav { flex: 1; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }

.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px; font-weight: 500;
    transition: var(--transition); cursor: pointer;
}
.nav-item:hover { background: var(--ta-gray-50); color: var(--text-primary); }
html[data-theme="dark"] .nav-item:hover { background: rgba(255, 255, 255, 0.04); }
.nav-item.active { background: var(--accent-glow); color: var(--accent); font-weight: 600; }
.nav-icon { font-size: 16px; width: 22px; text-align: center; }

.sidebar-footer { padding: 14px 18px; border-top: 1px solid var(--border); }
.bot-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; animation: pulse 2s infinite; }
.status-dot.online { background: var(--success); box-shadow: 0 0 8px var(--success); }
.status-dot.offline { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Main ── */
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-primary); }

.top-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 28px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    min-height: 56px;
}
.menu-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 22px; cursor: pointer; }
.page-title { font-size: 17px; font-weight: 700; flex: 1; color: var(--text-primary); }
.clock { font-size: 12px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.5px; }
.top-actions { display: flex; align-items: center; gap: 10px; }

.content-area { flex: 1; overflow-y: auto; padding: 24px 28px; scroll-behavior: smooth; }

/* ── Theme toggle switch ── */
.theme-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: var(--radius-sm);
    background: var(--ta-gray-50);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    transition: var(--transition);
}
html[data-theme="dark"] .theme-toggle-btn { background: rgba(255,255,255,0.04); }
.theme-toggle-btn:hover { color: var(--accent); border-color: var(--border-active); }

/* ── Cards ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }

.stat-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    transition: var(--transition); position: relative; overflow: hidden;
    box-shadow: var(--shadow);
}
.stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    opacity: 0; transition: var(--transition);
}
.stat-card:hover { border-color: var(--border-active); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat-card:hover::before { opacity: 1; }
.stat-card.accent::before { background: linear-gradient(90deg, var(--accent), var(--ta-brand-700)); }
.stat-card.success::before { background: var(--success); }
.stat-card.warning::before { background: var(--warning); }
.stat-card.danger::before { background: var(--danger); }
.stat-card.info::before { background: var(--info); }

.stat-icon {
    font-size: 22px; margin-bottom: 12px;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ta-gray-50);
    border-radius: var(--radius-sm);
}
html[data-theme="dark"] .stat-icon { background: rgba(255,255,255,0.05); }
.stat-value {
    font-size: 26px; font-weight: 700; line-height: 1.2;
    color: var(--text-primary);
}
.stat-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; font-weight: 500; }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: var(--transition); border: none; font-family: inherit;
}
.btn-primary { background: var(--accent); color: white; box-shadow: 0 2px 8px var(--accent-glow); }
.btn-primary:hover { background: var(--ta-brand-600); transform: translateY(-1px); box-shadow: 0 4px 14px var(--accent-glow); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { filter: brightness(0.95); }
.btn-warning { background: var(--warning); color: #1a1a1a; }
.btn-warning:hover { filter: brightness(0.95); }
.btn-ghost { background: var(--ta-gray-50); color: var(--text-secondary); border: 1px solid var(--border); }
html[data-theme="dark"] .btn-ghost { background: rgba(255, 255, 255, 0.04); }
.btn-ghost:hover { background: var(--ta-gray-100); color: var(--text-primary); }
html[data-theme="dark"] .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }

/* ── Inputs ── */
.search-bar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.search-input {
    flex: 1; min-width: 200px; padding: 10px 16px;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-primary);
    font-size: 13px; font-family: inherit; outline: none;
    transition: var(--transition);
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

select {
    padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-primary);
    font-size: 13px; font-family: inherit; outline: none; cursor: pointer;
}

/* ── Table ── */
.data-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--bg-card); border-radius: var(--radius);
    border: 1px solid var(--border); overflow: hidden;
    box-shadow: var(--shadow);
}
.data-table thead th {
    padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted);
    background: var(--ta-gray-50); border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .data-table thead th { background: rgba(255, 255, 255, 0.02); }
.data-table tbody td {
    padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--border); vertical-align: middle;
    color: var(--text-primary);
}
.data-table tbody tr:hover { background: var(--accent-glow); }

/* ── Tags & Chips ── */
.tag {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 20px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
}
.tag-team { background: var(--accent-glow); color: var(--accent); }

.member-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.member-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; background: var(--ta-gray-50);
    border-radius: 10px; font-size: 10px; color: var(--text-secondary);
}
html[data-theme="dark"] .member-chip { background: rgba(255,255,255,0.05); }

/* ── Logs ── */
.log-container {
    background: var(--ta-gray-900); border-radius: var(--radius);
    border: 1px solid var(--border); padding: 16px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 11px; line-height: 1.7;
    max-height: 60vh; overflow-y: auto; color: #cbd5e1;
}
.log-line { padding: 1px 0; white-space: pre-wrap; word-break: break-all; }

/* ── Modals ── */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(16, 24, 40, 0.6); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px); animation: fadeIn 0.2s ease;
}
.modal {
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: var(--radius); width: 90%; max-width: 800px;
    max-height: 85vh; overflow-y: auto;
    box-shadow: var(--shadow-lg); animation: slideUp 0.3s ease;
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.modal-close {
    background: none; border: none; color: var(--text-muted);
    font-size: 18px; cursor: pointer; padding: 4px;
}
.modal-close:hover { color: var(--text-primary); }
.modal-body { padding: 24px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Elevation (TailAdmin uses soft shadows instead of glassmorphism blur) ── */
.sidebar, .top-bar { box-shadow: none; }
.stat-card, .data-table, .modal, .log-container { box-shadow: var(--shadow); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ta-gray-300); border-radius: 3px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); }
::-webkit-scrollbar-thumb:hover { background: var(--ta-gray-400); }

/* ── Google Sheets Container & Grid ── */
.sheets-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.sheets-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 18px;
    box-shadow: var(--shadow);
}

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

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

.sheets-pill-filter {
    display: flex;
    background: var(--ta-gray-50);
    border-radius: 8px;
    padding: 3px;
    border: 1px solid var(--border);
}
html[data-theme="dark"] .sheets-pill-filter { background: rgba(0, 0, 0, 0.3); }

.sheets-pill-btn {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.sheets-pill-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.sheets-grid-container {
    flex: 1;
    overflow: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    position: relative;
    max-height: calc(100vh - 280px);
}

.sheets-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.sheets-table th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--ta-gray-100);
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10.5px;
    padding: 10px 12px;
    border-right: 1px solid var(--border);
    border-bottom: 2px solid var(--border);
    user-select: none;
    text-align: left;
}
html[data-theme="dark"] .sheets-table th { background: #1e293b; }

.sheets-table th.col-hdr-num {
    width: 45px;
    text-align: center;
    background: var(--ta-gray-50);
    color: var(--text-muted);
    border-right: 2px solid var(--border);
}
html[data-theme="dark"] .sheets-table th.col-hdr-num { background: #0f172a; }

.sheets-table td {
    padding: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    transition: background 0.15s;
    height: 38px;
    vertical-align: middle;
}

.sheets-table tr:hover td {
    background: var(--accent-glow);
}

.sheets-table tr td.row-num {
    text-align: center;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    background: var(--ta-gray-50) !important;
    border-right: 2px solid var(--border);
    user-select: none;
}
html[data-theme="dark"] .sheets-table tr td.row-num { background: #0f172a !important; }

.sheets-input {
    width: 100%;
    height: 100%;
    min-height: 36px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    padding: 6px 10px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.sheets-input:focus {
    background: var(--accent-glow);
    border-color: var(--accent) !important;
    box-shadow: inset 0 0 0 1px var(--accent);
}

.sheets-select {
    width: 100%;
    height: 100%;
    min-height: 36px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    padding: 4px 8px;
    font-size: 12px;
    outline: none;
    cursor: pointer;
}

.sheets-select:focus {
    background: var(--accent-glow);
    border-color: var(--accent);
}

.status-badge-active { background: var(--success-bg); color: var(--success); padding: 3px 8px; border-radius: 4px; font-weight: 600; font-size: 11px; }
.status-badge-expiring { background: var(--warning-bg); color: var(--warning); padding: 3px 8px; border-radius: 4px; font-weight: 600; font-size: 11px; }
.status-badge-expired { background: var(--danger-bg); color: var(--danger); padding: 3px 8px; border-radius: 4px; font-weight: 600; font-size: 11px; }
.status-badge-pending { background: var(--info-bg); color: var(--info); padding: 3px 8px; border-radius: 4px; font-weight: 600; font-size: 11px; }

.save-status-indicator {
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}
.save-status-indicator.saved { color: var(--success); }
.save-status-indicator.unsaved { color: var(--warning); }

/* ── Sidebar Overlay Backdrop ── */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(16, 24, 40, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sidebar-overlay.open {
    display: block;
    opacity: 1;
}

/* ── Responsive & Mobile Adaptations ── */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    #app {
        position: relative;
        flex-direction: column;
    }

    /* Off-canvas Mobile Sidebar */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 270px;
        min-width: 270px;
        z-index: 1000;
        background: var(--bg-sidebar);
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--shadow-lg);
        border-right: 1px solid var(--border);
    }
    .sidebar.open {
        transform: translateX(0);
    }

    /* Mobile Hamburger Menu Toggle Button */
    .menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm);
        background: var(--ta-gray-50);
        border: 1px solid var(--border);
        color: var(--text-primary);
        font-size: 20px;
        cursor: pointer;
        transition: var(--transition);
    }
    html[data-theme="dark"] .menu-toggle { background: rgba(255, 255, 255, 0.06); }
    .menu-toggle:active {
        background: var(--ta-gray-100);
    }

    .top-bar {
        padding: 10px 14px;
        gap: 10px;
        min-height: 52px;
    }

    .page-title {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .clock {
        display: none; /* Hide date/clock on mobile for header space */
    }

    .top-actions {
        gap: 6px;
    }

    .content-area {
        padding: 14px 10px;
        overflow-x: hidden;
    }

    /* Grid layout overrides for mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .stat-card {
        padding: 14px 12px;
    }

    .stat-value {
        font-size: 22px;
    }

    .stat-label {
        font-size: 11px;
    }

    /* Force 2-column inline grid to stack on mobile */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr;"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Force card grids to 1 column on mobile */
    div[style*="grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));"],
    div[style*="grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Search & Filter Toolbars */
    .search-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .search-input, select {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Make all tables horizontally scrollable without overflowing screen width */
    .data-table, .sheets-table {
        min-width: 600px;
    }

    .data-table-container,
    .sheets-grid-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Modals Responsive */
    .modal {
        width: 96% !important;
        max-height: 92vh !important;
        border-radius: var(--radius-sm);
        margin: 10px auto;
    }

    .modal-header {
        padding: 12px 16px;
    }

    .modal-body {
        padding: 14px;
    }

    /* Toolbar for Domain Sheet on Mobile */
    .sheets-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
    }

    .sheets-actions-left,
    .sheets-actions-right {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .sheets-grid-container {
        max-height: calc(100vh - 240px);
    }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .btn { padding: 7px 12px; font-size: 12px; }
    .sheets-pill-btn { padding: 4px 8px; font-size: 10px; }
}

/* ============================================================
   TailAdmin structural layer — based on the original template
   ============================================================ */
html, body { font-family: 'Outfit', sans-serif; }
#app { background: var(--bg-primary); }
.sidebar { width: 290px; min-width: 290px; padding: 0 20px; overflow: hidden; }
.sidebar-header { height: 104px; padding: 28px 4px 24px; display: flex; align-items: center; border-bottom: 0; }
.logo { width: 100%; color: inherit; text-decoration: none; }
.logo-img { width: 42px; height: 42px; border-radius: 11px; }
.logo-title { font-size: 18px; line-height: 24px; letter-spacing: -.2px; }
.logo-subtitle { margin-top: 1px; font-size: 11px; line-height: 16px; letter-spacing: .4px; text-transform: none; }
.sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.sidebar-nav { padding: 0 0 24px; gap: 0; overflow: visible; }
.nav-group { margin-bottom: 26px; }
.nav-group-title { margin: 0 12px 12px; color: var(--text-muted); font-size: 11px; font-weight: 500; line-height: 20px; letter-spacing: .7px; }
.nav-item { position: relative; gap: 12px; min-height: 44px; padding: 10px 12px; margin-bottom: 4px; border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--ta-gray-700); }
html[data-theme="dark"] .nav-item { color: #d0d5dd; }
.nav-item:hover { background: var(--ta-gray-100); }
.nav-item.active { background: var(--ta-brand-50); color: var(--ta-brand-500); }
html[data-theme="dark"] .nav-item.active { background: rgba(70,95,255,.12); color: var(--ta-brand-400); }
.nav-icon { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 24px; font-size: 0; }
.nav-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon svg path:first-child:last-child { fill: currentColor; stroke: none; }
.nav-label { white-space: nowrap; }
.nav-badge { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--ta-success-50, #ecfdf3); color: var(--success); font-size: 10px; font-weight: 600; }
.sidebar-footer { padding: 16px 0 24px; border-top: 1px solid var(--border); }
.sidebar-user-card { display: flex; align-items: center; gap: 10px; }
.sidebar-avatar, .header-avatar { display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg,#465fff,#7a5af8); color: #fff; font-weight: 600; }
.sidebar-avatar { width: 38px; height: 38px; flex: 0 0 38px; }
.sidebar-user-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sidebar-user-copy strong { overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--text-primary); }
.sidebar-user-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--text-muted); }
.sidebar-footer .bot-status { width: auto; }
.sidebar-footer .bot-status > div { width: auto !important; }
.sidebar-footer .bot-status > div > div span:not(.status-dot), .sidebar-footer .bot-status > div > span { display:none; }

.main-content { min-width: 0; position: relative; overflow-y: auto; }
.top-bar { position: sticky; top: 0; z-index: 90; min-height: 80px; padding: 16px 24px; justify-content: space-between; }
.header-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); flex: 0 0 44px; }
.menu-toggle svg, .header-icon-btn svg, .logout-icon-btn svg, .header-user > svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.header-search { position: relative; width: min(430px, 36vw); }
.header-search > svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.header-search input { width: 100%; height: 44px; padding: 0 64px 0 46px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); outline: 0; font: 14px 'Outfit',sans-serif; box-shadow: var(--shadow); }
.header-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.search-shortcut { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); padding: 3px 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); font-size: 11px; }
.top-actions { gap: 12px; }
.header-icon-btn, .logout-icon-btn { position: relative; display: inline-flex; align-items:center; justify-content:center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--ta-gray-50); color: var(--text-secondary); cursor:pointer; }
html[data-theme="dark"] .header-icon-btn, html[data-theme="dark"] .logout-icon-btn { background: #1d2939; }
.header-icon-btn:hover { color: var(--accent); }
.logout-icon-btn:hover { color: var(--danger); }
.notification-btn > span { position:absolute; right:3px; top:2px; width:8px; height:8px; border:2px solid var(--bg-secondary); border-radius:50%; background:#fd853a; }
.header-user { display:flex; align-items:center; gap:10px; padding-left:4px; color:var(--text-primary); }
.header-avatar { width:40px; height:40px; flex:0 0 40px; }
.header-user-copy { display:flex; flex-direction:column; min-width:90px; }
.header-user-copy strong { font-size:14px; line-height:20px; }
.header-user-copy span { font-size:12px; color:var(--text-muted); }
.header-user > svg { width:18px; color:var(--text-muted); }
.page-heading { max-width:1536px; width:100%; margin:0 auto; padding:24px 24px 0; display:flex; align-items:flex-end; justify-content:space-between; }
.page-heading h1 { font-size:24px; line-height:32px; font-weight:600; letter-spacing:-.3px; }
.page-heading p { margin-top:4px; color:var(--text-muted); font-size:14px; }
.page-heading .clock { padding-bottom:3px; }
.content-area { width:100%; max-width:1536px; margin:0 auto; padding:24px; overflow:visible; }

/* Overview grid matching TailAdmin ecommerce dashboard */
.dashboard-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; }
.dashboard-main-column { grid-column:span 7; display:flex; flex-direction:column; gap:24px; }
.dashboard-side-column { grid-column:span 5; display:flex; flex-direction:column; gap:24px; }
.metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.metric-card, .ta-card { border:1px solid var(--border); border-radius:16px; background:var(--bg-card); box-shadow:none; }
.metric-card { padding:24px; }
.metric-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:var(--ta-gray-100); color:var(--ta-gray-800); }
html[data-theme="dark"] .metric-icon { background:#1d2939; color:#f2f4f7; }
.metric-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.metric-icon-brand svg path { fill:currentColor; stroke:none; }
.metric-bottom { margin-top:20px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.metric-bottom > div { display:flex; flex-direction:column; }
.metric-bottom span { color:var(--text-muted); font-size:14px; line-height:20px; }
.metric-bottom strong { margin-top:8px; color:var(--text-primary); font-size:30px; line-height:38px; font-weight:700; }
.trend { padding:3px 9px; border-radius:999px; font-size:12px; font-style:normal; font-weight:500; white-space:nowrap; }
.trend-up { color:#039855; background:#ecfdf3; }
html[data-theme="dark"] .trend-up { color:#32d583; background:rgba(18,183,106,.15); }
.ta-card { overflow:hidden; }
.card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 24px 0; }
.card-heading h3 { color:var(--text-primary); font-size:18px; line-height:28px; font-weight:600; }
.card-heading p { margin-top:2px; color:var(--text-muted); font-size:13px; line-height:20px; }
.more-btn { border:0; background:transparent; color:var(--text-muted); font-size:18px; letter-spacing:2px; cursor:pointer; }
.chart-card { min-height:390px; }
.bar-chart { height:305px; padding:28px 24px 22px; display:flex; gap:12px; }
.chart-y { height:230px; padding-bottom:1px; display:flex; flex-direction:column; justify-content:space-between; color:var(--text-muted); font-size:11px; text-align:right; }
.chart-plot { position:relative; flex:1; height:250px; }
.chart-grid-lines { position:absolute; inset:0 0 20px; display:flex; flex-direction:column; justify-content:space-between; }
.chart-grid-lines i { display:block; border-top:1px dashed var(--border); }
.bars { position:absolute; inset:0 0 0; display:flex; align-items:stretch; justify-content:space-around; gap:8px; }
.bar-wrap { width:10%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; }
.bar { width:100%; max-width:28px; min-height:10px; border-radius:5px 5px 0 0; background:var(--ta-brand-500); opacity:.92; transition:height .4s ease; }
.bar-wrap span { height:12px; color:var(--text-muted); font-size:11px; }
.target-card { min-height:390px; background:linear-gradient(180deg,var(--bg-card) 0,var(--bg-card) 62%,var(--bg-primary) 62%); }
.radial-progress { width:166px; height:166px; margin:22px auto 10px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--ta-brand-500) calc(var(--progress)*1%), var(--ta-gray-100) 0); position:relative; }
html[data-theme="dark"] .radial-progress { background:conic-gradient(var(--ta-brand-500) calc(var(--progress)*1%),#1d2939 0); }
.radial-progress:before { content:''; position:absolute; inset:15px; border-radius:50%; background:var(--bg-card); }
.radial-progress > div { position:relative; display:flex; flex-direction:column; align-items:center; }
.radial-progress strong { color:var(--text-primary); font-size:30px; line-height:38px; }
.radial-progress span { color:var(--text-muted); font-size:12px; }
.target-summary { padding:0 24px 22px; color:var(--text-secondary); font-size:13px; text-align:center; }
.target-stats { display:grid; grid-template-columns:repeat(3,1fr); padding:20px 14px; border-top:1px solid var(--border); }
.target-stats div { display:flex; flex-direction:column; align-items:center; border-right:1px solid var(--border); }
.target-stats div:last-child { border:0; }
.target-stats span { color:var(--text-muted); font-size:11px; }
.target-stats strong { margin-top:4px; color:var(--text-primary); font-size:14px; }
.online-text { color:var(--success)!important; }.offline-text{color:var(--danger)!important}
.quick-card { min-height:170px; }
.quick-action-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:18px 24px 24px; }
.quick-action-grid button { min-width:0; padding:12px 6px; display:flex; flex-direction:column; align-items:center; gap:7px; border:1px solid var(--border); border-radius:10px; background:var(--bg-input); color:var(--text-secondary); font:12px 'Outfit',sans-serif; cursor:pointer; }
.quick-action-grid button:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-glow); }
.quick-action-grid button span { font-size:18px; }.quick-action-grid button b{font-weight:500}
.recent-card { grid-column:span 8; }
.summary-card { grid-column:span 4; }
.recent-card .card-heading { align-items:center; padding-bottom:14px; }
.activity-table { border-top:1px solid var(--border); }
.activity-row { min-height:64px; padding:10px 24px; display:grid; grid-template-columns:36px minmax(0,1fr) 64px 82px; align-items:center; gap:12px; border-bottom:1px solid var(--border); }
.activity-row:last-child { border-bottom:0; }
.activity-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:var(--ta-gray-100); color:var(--accent); font-weight:600; }
html[data-theme="dark"] .activity-icon { background:#1d2939; }
.activity-copy { min-width:0; display:flex; flex-direction:column; }
.activity-copy strong { color:var(--text-primary); font-size:13px; }
.activity-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); font-size:11px; }
.activity-time { color:var(--text-muted); font-size:11px; }
.status-pill { justify-self:end; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:500; }
.status-pill.success { color:#039855; background:#ecfdf3; }
html[data-theme="dark"] .status-pill.success { color:#32d583; background:rgba(18,183,106,.15); }
.summary-list { padding:18px 24px 24px; }
.summary-list > div { display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid var(--border); color:var(--text-secondary); font-size:13px; }
.summary-list > div:last-child { border-bottom:0; }
.summary-list strong { color:var(--text-primary); }
.summary-dot { width:8px;height:8px;border-radius:50%;}.summary-dot.brand{background:var(--accent)}.summary-dot.success{background:var(--success)}.summary-dot.warning{background:var(--warning)}
.empty-state { padding:36px; color:var(--text-muted); text-align:center; }

/* Existing data pages adapted into TailAdmin components */
.search-bar { padding:16px; margin-bottom:20px!important; border:1px solid var(--border); border-radius:12px; background:var(--bg-card); box-shadow:none; }
.search-input, select { min-height:42px; border-radius:8px; }
.stat-card { border-radius:16px; box-shadow:none; }
.stat-card:hover { box-shadow:var(--shadow-theme-md,var(--shadow)); transform:none; }
.data-table { border-radius:16px; box-shadow:none; }
.data-table thead th { padding:14px 18px; background:var(--bg-card); border-bottom:1px solid var(--border); text-transform:none; font-size:12px; }
.data-table tbody td { padding:14px 18px; }
.btn { min-height:40px; border-radius:8px; }
.btn-primary { background:#465fff; box-shadow:none; }.btn-primary:hover{background:#3641f5;box-shadow:none}
.modal { border-radius:16px; box-shadow:var(--shadow-theme-xl,var(--shadow-lg)); }
.sheets-toolbar,.sheets-grid-container { box-shadow:none; border-radius:12px; }

body.sidebar-collapsed .sidebar { width:90px; min-width:90px; padding:0 14px; }
body.sidebar-collapsed .logo-text, body.sidebar-collapsed .nav-group-title, body.sidebar-collapsed .nav-label, body.sidebar-collapsed .nav-badge, body.sidebar-collapsed .sidebar-user-copy { display:none; }
body.sidebar-collapsed .sidebar-header, body.sidebar-collapsed .logo, body.sidebar-collapsed .nav-item { justify-content:center; }
body.sidebar-collapsed .nav-item { padding:10px; }

@media(max-width:1279px){
 .dashboard-main-column,.dashboard-side-column{grid-column:span 12}.dashboard-side-column{display:grid;grid-template-columns:repeat(2,1fr)}
 .recent-card{grid-column:span 7}.summary-card{grid-column:span 5}
 .header-search{width:300px}.header-user-copy{display:none}.header-user{gap:4px}
}
@media(max-width:1023px){
 .sidebar{position:fixed;width:290px;min-width:290px;padding:0 20px;transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}
 body.sidebar-collapsed .sidebar{width:290px;min-width:290px;padding:0 20px}body.sidebar-collapsed .logo-text,body.sidebar-collapsed .nav-group-title,body.sidebar-collapsed .nav-label,body.sidebar-collapsed .nav-badge,body.sidebar-collapsed .sidebar-user-copy{display:initial}
 .header-search{display:none}.top-bar{padding:12px 16px;min-height:68px}.page-heading{padding:20px 16px 0}.content-area{padding:20px 16px}
 .recent-card,.summary-card{grid-column:span 12}
}
@media(max-width:767px){
 .top-actions{gap:7px}.header-user{display:none}.notification-btn{display:none}.page-heading .clock{display:none}
 .metric-grid,.dashboard-side-column{grid-template-columns:1fr}.dashboard-grid{gap:16px}.dashboard-main-column,.dashboard-side-column{gap:16px}
 .quick-action-grid{grid-template-columns:repeat(2,1fr)}.activity-row{grid-template-columns:36px minmax(0,1fr) 76px}.activity-time{display:none}
}
.card-grid { display:grid!important; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))!important; gap:20px!important; }
.project-grid .stat-card { padding:20px; }
.stat-card h2,.stat-card h3,.content-area h2,.content-area h3 { color:var(--text-primary)!important; }
.content-area > div[style*="justify-content: space-between"] { padding:20px 22px; margin-bottom:0!important; border:1px solid var(--border); border-bottom:0; border-radius:16px 16px 0 0; background:var(--bg-card); }
.content-area > div[style*="justify-content: space-between"] + .data-table { border-radius:0 0 16px 16px; }
.content-area > .data-table { box-shadow:none; }
.content-area > div[style*="grid-template-columns: repeat(auto-fit"] { gap:20px!important; }
.content-area > div[style*="grid-template-columns: repeat(auto-fill"] { gap:20px!important; }
.project-grid .stat-card div[style*="background: rgba(255,255,255"] { background:var(--bg-card-hover)!important; border-color:var(--border)!important; }
.log-container { border-radius:12px; }

/* ============================================================
   Firebase Console project explorer
   ============================================================ */
.firebase-console{--fb-blue:#1a73e8;--fb-blue-soft:#e8f0fe;--fb-yellow:#fbbc04;--fb-red:#d93025;--fb-green:#188038;font-family:'Roboto',Arial,sans-serif;border:1px solid var(--border);border-radius:16px;background:var(--bg-card);overflow:visible;box-shadow:0 1px 2px rgba(60,64,67,.08)}
.firebase-project-toolbar{position:relative;z-index:20;min-height:68px;padding:10px 18px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border)}
.firebase-brand-mark{width:36px;height:42px;display:grid;place-items:center}.firebase-brand-mark svg{width:30px;height:30px}.firebase-toolbar-title{display:flex;align-items:center;gap:12px;color:var(--text-primary);font-size:20px}.firebase-toolbar-title strong{font-weight:500}.firebase-toolbar-title span{color:var(--text-muted)}
.firebase-project-search-wrap{position:relative;width:min(520px,45vw);margin-right:auto}.firebase-project-search-wrap>svg{position:absolute;left:14px;top:50%;z-index:2;width:19px;height:19px;transform:translateY(-50%);fill:none;stroke:var(--text-muted);stroke-width:1.7}.firebase-project-search-wrap>input{width:100%;height:46px;padding:0 42px;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);color:var(--text-primary);font:14px 'Roboto',sans-serif;outline:0;box-shadow:0 1px 2px rgba(60,64,67,.08)}.firebase-project-search-wrap>input:focus{border-color:var(--fb-blue);box-shadow:0 0 0 1px var(--fb-blue)}.firebase-project-search-wrap>button{position:absolute;right:8px;top:7px;width:32px;height:32px;border:0;background:transparent;color:var(--text-secondary);font-size:18px}
.firebase-project-results{display:none;position:absolute;top:52px;left:0;right:0;max-height:390px;overflow-y:auto;padding:6px;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);box-shadow:0 8px 24px rgba(60,64,67,.18)}.firebase-project-results.open{display:block}.firebase-project-results>button{width:100%;padding:10px;display:flex;align-items:center;gap:12px;border:0;border-radius:5px;background:transparent;color:var(--text-primary);text-align:left;font-family:inherit}.firebase-project-results>button:hover{background:var(--fb-blue-soft)}html[data-theme="dark"] .firebase-project-results>button:hover{background:rgba(26,115,232,.16)}.firebase-project-avatar{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:6px;background:#fff3e0;color:#e37400;font-weight:700}.firebase-project-results button>span:nth-child(2){min-width:0;display:flex;flex:1;flex-direction:column}.firebase-project-results strong{font-size:14px;font-weight:500}.firebase-project-results small{overflow:hidden;text-overflow:ellipsis;color:var(--text-muted);font-size:11px}.firebase-project-results em{padding:2px 6px;border-radius:10px;background:#e6f4ea;color:#188038;font-size:10px;font-style:normal}.firebase-no-results{padding:24px;color:var(--text-muted);text-align:center}
.firebase-project-toolbar>select{width:auto;min-height:42px;padding:0 34px 0 12px;border-radius:5px;font-family:inherit}.firebase-refresh{width:40px;height:40px;border:1px solid var(--border);border-radius:50%;background:var(--bg-input);color:var(--text-secondary);font-size:20px}.firebase-refresh:hover{color:var(--fb-blue);background:var(--fb-blue-soft)}
.firebase-project-header{padding:26px 30px 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.firebase-project-kicker{color:var(--text-muted);font-size:11px;font-weight:500;letter-spacing:.7px}.firebase-project-header h2{margin-top:5px!important;color:var(--text-primary)!important;font:500 24px/32px 'Roboto',sans-serif!important}.firebase-project-header p{margin-top:3px;color:var(--text-muted);font-size:13px}.firebase-live-badge{padding:6px 10px;display:flex;align-items:center;gap:7px;border-radius:14px;background:#e6f4ea;color:#137333;font-size:12px}.firebase-live-badge i{width:7px;height:7px;border-radius:50%;background:#34a853}
.firebase-tabs{height:48px;padding:0 24px;display:flex;gap:6px;border-bottom:1px solid var(--border)}.firebase-tabs button{position:relative;height:48px;padding:0 18px;display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--text-secondary);font:500 14px 'Roboto',sans-serif}.firebase-tabs button:hover{background:var(--bg-card-hover)}.firebase-tabs button.active{color:var(--fb-blue)}.firebase-tabs button.active:after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--fb-blue)}.firebase-tabs button span{font-size:17px}
.firebase-project-panel{min-height:480px;padding:24px;background:var(--bg-primary);border-radius:0 0 16px 16px}.firebase-loading{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--text-secondary)}.firebase-loading span{width:36px;height:36px;border:3px solid var(--border);border-top-color:#1a73e8;border-radius:50%;animation:fbSpin .8s linear infinite}.firebase-loading strong{font-size:14px;font-weight:500}@keyframes fbSpin{to{transform:rotate(360deg)}}
.firebase-welcome{max-width:680px;margin:30px auto;padding:54px 30px;text-align:center}.firebase-welcome-icon{width:76px;height:76px;margin:0 auto 20px;display:grid;place-items:center;border-radius:50%;background:#fff3e0;font-size:34px}.firebase-welcome h3{color:var(--text-primary)!important;font:500 24px 'Roboto',sans-serif!important}.firebase-welcome p{margin:12px auto 24px;color:var(--text-secondary);font-size:14px;line-height:22px}.firebase-welcome-features{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.firebase-welcome-features span{padding:8px 12px;border:1px solid var(--border);border-radius:18px;background:var(--bg-card);color:var(--text-secondary);font-size:12px}
.firebase-view{display:flex;flex-direction:column;gap:22px}.firebase-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.firebase-metric{position:relative;min-height:126px;padding:20px;border:1px solid var(--border);border-top:4px solid #5f6368;border-radius:8px;background:var(--bg-card);box-shadow:0 1px 2px rgba(60,64,67,.08)}.firebase-metric.blue{border-top-color:#1a73e8}.firebase-metric.green{border-top-color:#34a853}.firebase-metric.amber{border-top-color:#f9ab00}.firebase-metric.purple{border-top-color:#9334e6}.firebase-metric.red{border-top-color:#ea4335}.firebase-metric span{display:block;color:var(--text-secondary);font-size:13px}.firebase-metric strong{display:block;margin:10px 0 4px;color:var(--text-primary);font-size:28px;font-weight:500}.firebase-metric small{color:var(--text-muted);font-size:11px}
.firebase-content-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:20px}.firebase-card{border:1px solid var(--border);border-radius:8px;background:var(--bg-card);overflow:hidden;box-shadow:0 1px 2px rgba(60,64,67,.08)}.firebase-card-title{min-height:74px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.firebase-card-title h3{color:var(--text-primary)!important;font:500 17px 'Roboto',sans-serif!important}.firebase-card-title p{margin-top:3px;color:var(--text-muted);font-size:12px}
.firebase-app-list>div{min-height:68px;padding:12px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}.firebase-app-list>div:last-child{border:0}.platform{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border-radius:50%;font-weight:700}.platform.android{background:#e6f4ea;color:#188038}.platform.ios{background:#e8eaed;color:#3c4043}.platform.web{background:#fef7e0;color:#b06000}.firebase-app-list>div>span:nth-child(2){min-width:0;display:flex;flex:1;flex-direction:column}.firebase-app-list strong{overflow:hidden;text-overflow:ellipsis;color:var(--text-primary);font-size:13px;font-weight:500}.firebase-app-list small{overflow:hidden;text-overflow:ellipsis;color:var(--text-muted);font-size:11px}.firebase-app-list em{color:var(--text-secondary);font-size:11px;font-style:normal;white-space:nowrap}.firebase-health-row{padding:16px 20px;display:flex;justify-content:space-between;border-bottom:1px solid var(--border);color:var(--text-secondary);font-size:13px}.firebase-health-row b{font-size:12px}.firebase-health-row .ok{color:#188038}.firebase-health-row .warn{color:#b06000}.firebase-health>a{margin:18px 20px;display:inline-block;color:#1a73e8;font-size:13px;text-decoration:none}
.firebase-unavailable,.firebase-error{max-width:640px;margin:42px auto;padding:52px 30px;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);text-align:center}.firebase-unavailable>div{font-size:38px;color:#1a73e8}.firebase-unavailable h3,.firebase-error strong{display:block;margin:12px 0 8px;color:var(--text-primary)!important;font:500 20px 'Roboto',sans-serif!important}.firebase-unavailable p,.firebase-error p{color:var(--text-secondary);font-size:14px;line-height:22px}.firebase-unavailable small{display:block;margin-top:16px;color:var(--text-muted);line-height:20px}.firebase-unavailable code{padding:2px 5px;border-radius:3px;background:var(--bg-card-hover);color:#1a73e8}.firebase-error .btn{margin-top:18px}.firebase-empty-inline{padding:36px!important;justify-content:center!important;color:var(--text-muted)}
.crash-app-table>section{border-bottom:1px solid var(--border)}.crash-app-table>section:last-child{border:0}.crash-app-head{min-height:72px;padding:14px 20px;display:flex;align-items:center;gap:12px}.crash-app-head>div{min-width:0;display:flex;flex:1;flex-direction:column}.crash-app-head strong{overflow:hidden;text-overflow:ellipsis;color:var(--text-primary);font-size:14px;font-weight:500}.crash-app-head small{color:var(--text-muted);font-size:11px}.crash-app-head em{padding:5px 9px;border-radius:12px;font-size:11px;font-style:normal}.crash-app-head em.good{background:#e6f4ea;color:#137333}.crash-app-head em.attention{background:#fce8e6;color:#c5221f}.issue-list{padding:0 20px 14px 68px}.issue-list>a{padding:10px 12px;display:flex;align-items:center;gap:10px;border-top:1px solid var(--border);color:inherit;text-decoration:none}.issue-list>a>span{color:#d93025}.issue-list>a>div{min-width:0;display:flex;flex:1;flex-direction:column}.issue-list strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary);font-size:12px}.issue-list small{color:var(--text-muted);font-size:10px}.issue-list em{color:#d93025;font-size:10px;font-style:normal}
html[data-theme="dark"] .firebase-console{--fb-blue-soft:rgba(26,115,232,.16)}html[data-theme="dark"] .firebase-live-badge,html[data-theme="dark"] .crash-app-head em.good{background:rgba(52,168,83,.16);color:#81c995}html[data-theme="dark"] .crash-app-head em.attention{background:rgba(234,67,53,.16);color:#f28b82}
@media(max-width:1100px){.firebase-metrics{grid-template-columns:repeat(2,1fr)}.firebase-content-grid{grid-template-columns:1fr}.firebase-project-search-wrap{width:auto;flex:1}}
@media(max-width:760px){.firebase-project-toolbar{flex-wrap:wrap}.firebase-toolbar-title{display:none}.firebase-project-search-wrap{order:3;flex-basis:100%;width:100%}.firebase-project-toolbar>select{margin-left:auto}.firebase-project-header{padding:22px 18px}.firebase-live-badge{display:none}.firebase-tabs{padding:0 6px}.firebase-tabs button{flex:1;justify-content:center;padding:0 8px}.firebase-project-panel{padding:14px}.firebase-metrics{grid-template-columns:1fr 1fr;gap:10px}.firebase-metric{padding:15px;min-height:112px}.firebase-metric strong{font-size:23px}.firebase-tabs button span{display:none}.issue-list{padding-left:20px}}
@media(max-width:430px){.firebase-metrics{grid-template-columns:1fr}.firebase-project-header h2{font-size:20px!important}.firebase-tabs button{font-size:12px}}

/* ═══════════════════════════════════════════════════════════════
   FIREBASE REMOTE CONFIG CONSOLE - AUTHENTIC FIREBASE EXPERIENCE
   ═══════════════════════════════════════════════════════════════ */

:root {
    --fb-amber: #f57c00;
    --fb-amber-hover: #e65100;
    --fb-amber-soft: rgba(245, 124, 0, 0.08);
    --fb-amber-border: rgba(245, 124, 0, 0.3);
    --fb-blue: #1a73e8;
    --fb-blue-hover: #1557b0;
    --fb-blue-soft: #e8f0fe;
    --fb-blue-border: rgba(26, 115, 232, 0.3);
    --fb-green: #137333;
    --fb-green-soft: #e6f4ea;
    --fb-red: #d93025;
    --fb-red-soft: #fce8e6;
    --fb-purple: #9334e8;
    --fb-purple-soft: #f3e8ff;
}

html[data-theme="dark"] {
    --fb-amber-soft: rgba(245, 124, 0, 0.15);
    --fb-amber-border: rgba(245, 124, 0, 0.4);
    --fb-blue-soft: rgba(26, 115, 232, 0.15);
    --fb-blue-border: rgba(26, 115, 232, 0.4);
    --fb-green-soft: rgba(19, 115, 51, 0.2);
    --fb-red-soft: rgba(217, 48, 37, 0.2);
    --fb-purple-soft: rgba(147, 51, 234, 0.2);
}

/* Main Container */
.frc-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-primary);
}

/* Top Meta / Header Card */
.frc-header-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.frc-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.frc-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 160, 0, 0.2), rgba(245, 124, 0, 0.1));
    border: 1px solid rgba(255, 160, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.frc-header-icon svg {
    width: 26px;
    height: 26px;
}

.frc-header-info h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.2px;
}

.frc-header-info p {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.frc-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.frc-status-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.frc-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--fb-green-soft);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.frc-status-badge.has-draft {
    background: var(--fb-amber-soft);
    color: #f59e0b;
    border-color: var(--fb-amber-border);
}

.frc-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

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

/* Unpublished Changes Alert Banner */
.frc-draft-alert {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-left: 5px solid #f59e0b;
    border-radius: 10px;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    animation: frcFadeIn 0.3s ease;
}

@keyframes frcFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.frc-draft-alert-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.frc-draft-alert-icon {
    font-size: 22px;
    line-height: 1;
}

.frc-draft-alert-title {
    font-size: 13px;
    font-weight: 700;
    color: #f59e0b;
}

.frc-draft-alert-desc {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.frc-draft-alert-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Primary Firebase Buttons */
.frc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.frc-btn-primary {
    background: var(--fb-blue);
    color: #fff;
}
.frc-btn-primary:hover {
    background: var(--fb-blue-hover);
    box-shadow: 0 2px 6px rgba(26, 115, 232, 0.3);
}

.frc-btn-publish {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: none;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.frc-btn-publish:hover {
    background: linear-gradient(135deg, #059669, #047857);
}
.frc-btn-publish:disabled {
    background: var(--ta-gray-300, #9ca3af) !important;
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.frc-btn-outline {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}
.frc-btn-outline:hover {
    background: var(--bg-card-hover);
    border-color: var(--text-muted);
}

.frc-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}
.frc-btn-ghost:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.frc-btn-danger {
    background: transparent;
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}
.frc-btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Sub Navigation Tabs */
.frc-subtabs {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    padding: 0 4px;
    overflow-x: auto;
}

.frc-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.frc-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.frc-tab-btn.active {
    color: var(--fb-blue);
    border-bottom-color: var(--fb-blue);
    font-weight: 700;
}

.frc-tab-badge {
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 12px;
    border: 1px solid var(--border);
}
.frc-tab-btn.active .frc-tab-badge {
    background: var(--fb-blue-soft);
    border-color: var(--fb-blue-border);
}

/* Toolbar & Filters */
.frc-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
}

.frc-toolbar-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 280px;
    flex-wrap: wrap;
}

.frc-search-box {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.frc-search-box svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 2;
    pointer-events: none;
}

.frc-search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
    transition: border-color 0.2s ease;
}
.frc-search-input:focus {
    border-color: var(--fb-blue);
    box-shadow: 0 0 0 2px var(--fb-blue-soft);
}

.frc-filter-select {
    height: 36px;
    padding: 0 26px 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    outline: none;
    cursor: pointer;
}

.frc-ads-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}
.frc-ads-pill:hover, .frc-ads-pill.active {
    background: #10b981;
    color: #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.frc-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Parameters Table */
.frc-table-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.frc-table-scroll {
    overflow-x: auto;
    width: 100%;
}

.frc-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 820px;
    text-align: left;
}

.frc-table thead th {
    background: var(--bg-card-hover);
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.frc-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background-color 0.15s ease;
}
.frc-table tbody tr:last-child {
    border-bottom: none;
}
.frc-table tbody tr:hover {
    background: var(--bg-card-hover);
}

/* Group Header Row */
.frc-group-header-row {
    background: rgba(26, 115, 232, 0.04) !important;
    border-bottom: 1px solid var(--border) !important;
    cursor: pointer;
}
.frc-group-header-row:hover {
    background: var(--fb-blue-soft) !important;
}

.frc-group-header-cell {
    padding: 12px 16px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
}

.frc-group-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.frc-group-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.frc-group-chevron {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    display: inline-block;
}
.frc-group-header-row.collapsed .frc-group-chevron {
    transform: rotate(-90deg);
}

.frc-group-name {
    font-family: monospace;
    font-size: 13px;
    color: var(--fb-blue);
    font-weight: 700;
}

.frc-group-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card);
    padding: 1px 7px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.frc-group-desc {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: normal;
    margin-left: 6px;
}

/* Parameter Row Cells */
.frc-table td {
    padding: 12px 16px;
    vertical-align: middle;
    font-size: 13px;
}

.frc-param-key {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 220px;
}

.frc-param-key-text {
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #38bdf8;
    cursor: pointer;
}
.frc-param-key-text:hover {
    text-decoration: underline;
    color: var(--fb-blue);
}

.frc-param-desc {
    font-size: 11px;
    color: var(--text-muted);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Type Pills */
.frc-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.frc-type-STRING {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.frc-type-BOOLEAN {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.frc-type-NUMBER {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.frc-type-JSON {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Value Cell */
.frc-value-cell {
    min-width: 180px;
    max-width: 300px;
}

.frc-val-text {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 240px;
}

.frc-val-inapp {
    font-style: italic;
    color: var(--text-muted);
    font-size: 11px;
}

/* Conditions Cell & Tags */
.frc-conds-cell {
    min-width: 160px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.frc-cond-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    font-family: monospace;
    border: 1px solid;
    white-space: nowrap;
}

.frc-cond-tag-orange { background: rgba(234, 88, 12, 0.15); color: #fb923c; border-color: rgba(234, 88, 12, 0.4); }
.frc-cond-tag-blue   { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-color: rgba(59, 130, 246, 0.4); }
.frc-cond-tag-green  { background: rgba(16, 185, 129, 0.15); color: #34d399; border-color: rgba(16, 185, 129, 0.4); }
.frc-cond-tag-teal   { background: rgba(20, 184, 166, 0.15); color: #2dd4bf; border-color: rgba(20, 184, 166, 0.4); }
.frc-cond-tag-purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; border-color: rgba(168, 85, 247, 0.4); }
.frc-cond-tag-pink   { background: rgba(236, 72, 153, 0.15); color: #f472b6; border-color: rgba(236, 72, 153, 0.4); }
.frc-cond-tag-brown  { background: rgba(180, 83, 9, 0.15);   color: #f59e0b; border-color: rgba(180, 83, 9, 0.4); }

/* Change / Draft Status Pill */
.frc-diff-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.frc-diff-badge.modified {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.4);
}
.frc-diff-badge.new {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}
.frc-diff-badge.deleted {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
    text-decoration: line-through;
}

/* Row Action Buttons */
.frc-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.frc-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s ease;
}
.frc-icon-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}
.frc-icon-btn.delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Slide-over Drawer / Modal for Parameter Editor */
.frc-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    justify-content: flex-end;
    animation: frcDrawerFade 0.2s ease;
}

@keyframes frcDrawerFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.frc-drawer-panel {
    width: 580px;
    max-width: 95vw;
    height: 100%;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
    animation: frcDrawerSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes frcDrawerSlide {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.frc-drawer-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
}

.frc-drawer-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.frc-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.frc-drawer-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
}

/* Form Fields */
.frc-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.frc-form-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.frc-form-input, .frc-form-textarea, .frc-form-select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}
.frc-form-input:focus, .frc-form-textarea:focus, .frc-form-select:focus {
    border-color: var(--fb-blue);
    box-shadow: 0 0 0 2px var(--fb-blue-soft);
}

.frc-form-textarea {
    resize: vertical;
    min-height: 70px;
}

.frc-type-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.frc-type-option {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-input);
    cursor: pointer;
    transition: all 0.15s ease;
}
.frc-type-option:hover {
    border-color: var(--fb-blue);
    color: var(--text-primary);
}
.frc-type-option.active {
    background: var(--fb-blue-soft);
    border-color: var(--fb-blue);
    color: var(--fb-blue);
}

/* Conditions tab table & layout */
.frc-conditions-table {
    width: 100%;
    border-collapse: collapse;
}
.frc-conditions-table th, .frc-conditions-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.frc-conditions-table th {
    background: var(--bg-card-hover);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* Change History view */
.frc-history-table {
    width: 100%;
    border-collapse: collapse;
}
.frc-history-table th, .frc-history-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

/* Diff Comparison Dialog */
.frc-diff-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
}

.frc-diff-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    background: var(--bg-input);
}
.frc-diff-item.modified { border-left: 4px solid #f59e0b; }
.frc-diff-item.added { border-left: 4px solid #10b981; }
.frc-diff-item.deleted { border-left: 4px solid #ef4444; }

.frc-diff-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.frc-diff-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 8px;
    font-size: 12px;
    font-family: monospace;
    align-items: baseline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .frc-header-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .frc-header-right {
        width: 100%;
        justify-content: space-between;
    }
    .frc-status-item {
        align-items: flex-start;
    }
    .frc-type-selector {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Modal input surfaces */
.modal input, .modal textarea, .modal select { color:var(--text-primary)!important; }
.modal label { color:var(--text-secondary)!important; }
.modal-overlay .modal { background:var(--bg-secondary)!important; border-color:var(--border)!important; }
@media(max-width:479px){
 .page-heading h1{font-size:21px}.content-area{padding:16px 12px}.page-heading{padding:18px 12px 0}
 .metric-card{padding:18px}.card-heading{padding:20px 18px 0}.bar-chart{padding:24px 16px 18px}.activity-row{padding:10px 16px}.status-pill{display:none}.activity-row{grid-template-columns:36px minmax(0,1fr)}
}

/* ═══════════════════════════════════════════════════════════
   FIREBASE ANALYTICS DASHBOARD & GA4 STYLING (AUTHENTIC UI)
   ═══════════════════════════════════════════════════════════ */
.fba-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fba-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
}
html[data-theme="dark"] .fba-header-bar {
    background: #1e293b;
    border-color: #334155;
}

.fba-prop-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.fba-prop-badge em {
    font-style: normal;
    font-family: monospace;
    font-size: 11px;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Realtime Card */
.fba-realtime-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(6, 95, 70, 0.04));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
html[data-theme="dark"] .fba-realtime-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(15, 23, 42, 0.6));
    border-color: rgba(16, 185, 129, 0.35);
}

.fba-realtime-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.fba-realtime-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #10b981;
}
.fba-pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #10b981;
    box-shadow: 0 0 0 rgba(16, 185, 129, 0.7);
    animation: fbaPulse 1.8s infinite;
}
@keyframes fbaPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.fba-realtime-count {
    font-size: 42px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 4px;
}
.fba-realtime-subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

/* KPI Summary Grid */
.fba-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.fba-kpi-card {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s, box-shadow 0.15s;
}
html[data-theme="dark"] .fba-kpi-card {
    background: #1e293b;
    border-color: #334155;
}
.fba-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.fba-kpi-card.highlight {
    border-color: rgba(245, 158, 11, 0.5);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.05), transparent);
}
.fba-kpi-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.fba-kpi-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 4px;
}
.fba-kpi-hint {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Interactive SVG Chart */
.fba-chart-card {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 20px 24px;
}
html[data-theme="dark"] .fba-chart-card {
    background: #1e293b;
    border-color: #334155;
}
.fba-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.fba-chart-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.fba-chart-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    font-weight: 600;
}
.fba-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fba-chart-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.fba-svg-container {
    width: 100%;
    height: 240px;
    position: relative;
}
.fba-svg-container svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Tooltip */
.fba-chart-tooltip {
    position: absolute;
    pointer-events: none;
    background: #0f172a;
    color: #ffffff;
    border: 1px solid #334155;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    z-index: 10;
    transform: translate(-50%, -120%);
    opacity: 0;
    transition: opacity 0.15s, left 0.1s, top 0.1s;
    white-space: nowrap;
}

/* Split Tables Grid */
.fba-tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}
.fba-table-card {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    overflow: hidden;
}
html[data-theme="dark"] .fba-table-card {
    background: #1e293b;
    border-color: #334155;
}
.fba-table-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fba-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.fba-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.fba-table td {
    padding: 10px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text-primary);
}
html[data-theme="light"] .fba-table td {
    border-bottom: 1px solid #f1f5f9;
}
.fba-table tr:hover td {
    background: var(--bg-card-hover, rgba(255,255,255,0.02));
}

.fba-row-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fba-row-bar {
    height: 6px;
    border-radius: 3px;
    background: #3b82f6;
    transition: width 0.3s;
}

/* Empty / Fallback State */
.fba-empty-card {
    background: var(--bg-card, #ffffff);
    border: 1px dashed var(--border, #cbd5e1);
    border-radius: 12px;
    padding: 36px 24px;
    text-align: center;
}
html[data-theme="dark"] .fba-empty-card {
    background: #1e293b;
    border-color: #475569;
}

/* Connect Tab GA4 Card */
.ga4-connect-guide-step {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: flex-start;
}
.ga4-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f59e0b;
    color: #ffffff;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 1px;
}
.ga4-step-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.ga4-step-text strong {
    color: var(--text-primary);
}

/* ASO AI Audit Studio */
.aso-shell{display:flex;flex-direction:column;gap:20px;color:var(--text-primary)}
.aso-hero{position:relative;overflow:hidden;min-height:150px;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid rgba(99,102,241,.24);border-radius:18px;background:linear-gradient(135deg,rgba(70,95,255,.12),rgba(147,51,234,.08) 55%,rgba(14,165,233,.08))}
.aso-hero:after{content:'';position:absolute;right:-70px;top:-100px;width:270px;height:270px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.22),transparent 68%);pointer-events:none}
.aso-eyebrow{display:block;color:#6366f1;font-size:11px;font-weight:700;letter-spacing:1.3px}
.aso-hero h2{margin:8px 0 7px!important;font-size:28px!important;line-height:36px}.aso-hero p{max-width:690px;color:var(--text-secondary);font-size:14px;line-height:22px}
.aso-skill-badge{position:relative;z-index:1;min-width:245px;padding:14px 18px;display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-card)}
.aso-skill-badge>span{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:rgba(99,102,241,.12);color:#6366f1;font-size:20px}.aso-skill-badge>div{display:flex;flex-direction:column}.aso-skill-badge strong{font-size:13px}.aso-skill-badge small{margin-top:3px;color:var(--text-muted);font-size:11px}.aso-skill-badge.ready small{color:var(--success)}.aso-skill-badge.missing small{color:var(--danger)}
.aso-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.aso-form-card,.aso-side-card,.aso-result-card{border:1px solid var(--border);border-radius:16px;background:var(--bg-card)}.aso-form-card{padding:26px}.aso-side-card{position:sticky;top:104px;padding:24px}
.aso-section-heading{margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:16px}.aso-section-heading>div{display:flex;align-items:center;gap:10px}.aso-section-heading>div>span{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:rgba(70,95,255,.1);color:#465fff;font-size:11px;font-weight:700}.aso-section-heading h3{font-size:17px!important}.aso-section-heading p{color:var(--text-muted);font-size:12px}
.aso-provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.aso-provider-card{position:relative;min-height:76px;padding:14px;display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-input);cursor:pointer;transition:.18s}.aso-provider-card:hover,.aso-provider-card.selected{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.08)}.aso-provider-card input{position:absolute;opacity:0;pointer-events:none}.aso-provider-logo{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:11px;color:#fff;font-weight:800}.aso-provider-logo.codex{background:linear-gradient(135deg,#111827,#475569)}.aso-provider-logo.gemini{background:linear-gradient(135deg,#4285f4,#a855f7)}.aso-provider-card>span:nth-of-type(2){min-width:0;display:flex;flex:1;flex-direction:column}.aso-provider-card strong{font-size:13px}.aso-provider-card small{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-size:10px}.aso-provider-card>i{width:8px;height:8px;border-radius:50%;background:var(--text-muted)}.aso-provider-card>i.online{background:var(--success);box-shadow:0 0 0 4px rgba(18,183,106,.1)}
.aso-provider-card.unavailable{opacity:.55;cursor:not-allowed}.aso-provider-card.unavailable:hover{border-color:var(--border);box-shadow:none}
.aso-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.aso-form-grid.compact{margin-bottom:4px}.aso-form-grid label{display:flex;flex-direction:column;gap:7px}.aso-form-grid label.wide{grid-column:1/-1}.aso-form-grid label>span{color:var(--text-secondary);font-size:12px;font-weight:600}.aso-form-grid label em{color:var(--text-muted);font-size:10px;font-style:normal;font-weight:400}
.aso-input{width:100%;min-height:43px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input);color:var(--text-primary);font:13px 'Outfit',sans-serif;outline:0}.aso-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1)}.aso-textarea{min-height:94px;resize:vertical;line-height:19px}.aso-textarea.small{min-height:70px}.aso-divider{height:1px;margin:25px 0;background:var(--border)}
.aso-submit-row{margin-top:24px;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--border)}.aso-submit-row>div{display:flex;flex-direction:column}.aso-submit-row strong{font-size:12px}.aso-submit-row>div span{margin-top:3px;color:var(--text-muted);font-size:10px}.aso-run-btn{min-width:170px}.aso-run-btn:disabled{opacity:.65;cursor:wait}
.aso-side-card h3{font-size:16px!important}.aso-side-card ol{margin:18px 0 22px;padding:0;display:flex;flex-direction:column;list-style:none}.aso-side-card li{padding:11px 0;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--border)}.aso-side-card li>span{width:26px;height:26px;display:grid;place-items:center;flex:0 0 26px;border-radius:50%;background:rgba(70,95,255,.1);color:#465fff;font-size:10px;font-weight:700}.aso-side-card li>div{display:flex;flex-direction:column}.aso-side-card li strong{font-size:12px}.aso-side-card li small{margin-top:2px;color:var(--text-muted);font-size:10px}.aso-security-note{padding:14px;border-radius:10px;background:rgba(245,158,11,.08);color:var(--text-secondary)}.aso-security-note strong{color:#d97706;font-size:11px;text-transform:uppercase;letter-spacing:.6px}.aso-security-note p{margin-top:6px;font-size:11px;line-height:17px}
.aso-progress-card,.aso-alert{padding:18px 22px;display:flex;align-items:center;gap:15px;border:1px solid var(--border);border-radius:12px;background:var(--bg-card)}.aso-progress-card strong{font-size:14px}.aso-progress-card p{margin-top:3px;color:var(--text-muted);font-size:12px}.aso-alert.error{border-color:rgba(240,68,56,.35);background:rgba(240,68,56,.07);color:var(--danger)}.aso-alert.error{flex-direction:column;align-items:flex-start;gap:4px}.aso-alert.error span{font-size:12px}
.aso-spinner{width:15px;height:15px;display:inline-block;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:asoSpin .75s linear infinite}.aso-spinner.large{width:34px;height:34px;flex:0 0 34px;border:3px solid var(--border);border-top-color:#6366f1}@keyframes asoSpin{to{transform:rotate(360deg)}}
.aso-result-card{overflow:hidden}.aso-result-card>header{padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--border)}.aso-result-card header h2{margin-top:5px!important;font-size:20px!important}.aso-result-card header p{margin-top:3px;color:var(--text-muted);font-size:11px}.aso-result-card header>div:last-child{display:flex;gap:8px}.aso-report{margin:0;padding:28px;max-height:none;overflow:auto;background:var(--bg-input);color:var(--text-primary);font:13px/1.72 Consolas,'SFMono-Regular',monospace;white-space:pre-wrap;word-break:break-word}
@media(max-width:1100px){.aso-workspace{grid-template-columns:1fr}.aso-side-card{position:static}.aso-side-card ol{display:grid;grid-template-columns:repeat(3,1fr);gap:0 15px}}
@media(max-width:700px){.aso-hero{padding:24px;align-items:flex-start;flex-direction:column}.aso-skill-badge{width:100%;min-width:0}.aso-form-card{padding:18px}.aso-provider-grid,.aso-form-grid{grid-template-columns:1fr}.aso-form-grid label.wide{grid-column:auto}.aso-section-heading{align-items:flex-start;flex-direction:column}.aso-submit-row,.aso-result-card>header{align-items:stretch;flex-direction:column}.aso-run-btn{width:100%}.aso-side-card ol{grid-template-columns:1fr}.aso-result-card header>div:last-child{width:100%}.aso-result-card header button{flex:1}.aso-report{padding:18px;font-size:12px}}

/* ============================================================
   PROJECT MARKETING AI & MULTI-SKILL WORKBENCH
   ============================================================ */

/* Tab bar layout with right-side AI button */
.firebase-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}
.firebase-tabs-list {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
}
.firebase-tabs-ai-wrap {
    display: flex;
    align-items: center;
}
.btn-project-ai-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(99, 102, 241, 0.35);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(168, 85, 247, 0.12));
    color: #4f46e5;
    font: 600 13px 'Outfit', -apple-system, sans-serif;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.08);
}
html[data-theme="dark"] .btn-project-ai-tab {
    color: #a5b4fc;
    border-color: rgba(129, 140, 248, 0.4);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.15));
}
.btn-project-ai-tab:hover:not(:disabled) {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    transform: translateY(-1px);
}
.btn-project-ai-tab .sparkle {
    font-size: 14px;
    line-height: 1;
    color: #6366f1;
}
.btn-project-ai-tab:hover:not(:disabled) .sparkle {
    color: #fef08a;
}
.btn-project-ai-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.project-ai-tab-badge {
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.15);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.btn-project-ai-tab:hover:not(:disabled) .project-ai-tab-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Individual tab content toolbar banner */
.firebase-tab-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.firebase-tab-title-wrap h3 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600;
    color: var(--text-primary);
}
.firebase-tab-title-wrap p {
    margin: 2px 0 0 !important;
    font-size: 12px;
    color: var(--text-muted);
}
.project-ai-tab-inline-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600 !important;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}
.project-ai-tab-inline-btn:hover {
    transform: translateY(-1px);
}

/* Actionbar directly underneath tabs */
.firebase-ai-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.07), rgba(168, 85, 247, 0.04));
    border-bottom: 1px solid var(--border);
}
.firebase-ai-action-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.firebase-ai-spark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #ffffff;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}
.firebase-ai-copy {
    display: flex;
    flex-direction: column;
}
.firebase-ai-copy strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.firebase-ai-copy small {
    font-size: 11px;
    color: var(--text-muted);
}
.firebase-ai-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28);
}
.firebase-ai-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #4338ca, #4f46e5) !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.38);
    transform: translateY(-1px);
}

/* Modal Overlay & Card */
.project-ai-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: projectAiFadeIn 0.2s ease-out;
}
@keyframes projectAiFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.project-ai-modal {
    position: relative;
    width: 100%;
    max-width: 920px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    color: var(--text-primary);
    font-family: 'Outfit', -apple-system, sans-serif;
}

.project-ai-header {
    padding: 22px 28px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}
.project-ai-header-left h2 {
    margin: 4px 0 6px !important;
    font-size: 22px !important;
    font-weight: 700;
    color: var(--text-primary);
}
.project-ai-kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #6366f1;
}
.project-ai-kicker.complete {
    color: #10b981;
}
.project-ai-target-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.project-ai-target-tag .tab-chip {
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    font-size: 12px;
    font-weight: 600;
}
.project-ai-target-tag .project-chip {
    font-size: 12px;
    color: var(--text-muted);
}
.project-ai-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    display: grid;
    place-items: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.project-ai-close:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    transform: scale(1.06);
}

/* Modal Body */
.project-ai-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}
.project-ai-body.is-analyzing {
    pointer-events: none;
    opacity: 0.65;
}

.project-ai-step {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.project-ai-step > span {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.14);
    color: #6366f1;
    font-weight: 700;
    font-size: 12px;
    display: grid;
    place-items: center;
}
.project-ai-step strong {
    display: block;
    font-size: 14px;
    color: var(--text-primary);
}
.project-ai-step small {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

/* Step 1: Provider options */
.project-ai-provider-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.project-ai-provider {
    position: relative;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-input);
    cursor: pointer;
    transition: all 0.15s ease;
}
.project-ai-provider:hover {
    border-color: #6366f1;
}
.project-ai-provider.selected {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.07);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.project-ai-provider input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.project-ai-provider .provider-logo {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
}
.project-ai-provider .provider-logo.codex {
    background: linear-gradient(135deg, #1e293b, #475569);
}
.project-ai-provider .provider-logo.gemini,
.aso-provider-logo.gemini {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}
.project-ai-provider .provider-logo.antigravity,
.aso-provider-logo.antigravity {
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35);
}
.project-ai-provider .provider-logo.openai,
.aso-provider-logo.openai {
    background: linear-gradient(135deg, #10a37f, #059669);
}
.project-ai-provider strong {
    display: block;
    font-size: 13px;
}
.project-ai-provider small {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}
.project-ai-provider.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Multi-Key Pool Styling */
.project-ai-key-pool-box {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
}
.key-pool-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.key-pool-header label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.key-pool-header strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.key-pool-header small {
    font-size: 11px;
    color: var(--text-muted);
}
.key-pool-count-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.key-pool-count-badge.empty {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.key-pool-count-badge.active {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.key-pool-textarea {
    width: 100%;
    min-height: 76px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: 12px/1.45 'Fira Code', 'Consolas', monospace;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s ease;
}
.key-pool-textarea:focus {
    border-color: #6366f1;
}
.key-pool-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(99, 102, 241, 0.05);
    padding: 6px 10px;
    border-radius: 6px;
    border-left: 3px solid #6366f1;
}
.key-pool-hint strong {
    color: #6366f1;
}

.project-ai-provider-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.project-ai-provider-options label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.project-ai-provider-options label span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.project-ai-provider-options label em {
    font-size: 10px;
    font-style: normal;
    color: var(--text-muted);
}
.project-ai-provider-options input {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: 13px 'Outfit', sans-serif;
    outline: none;
}
.project-ai-provider-options input:focus {
    border-color: #6366f1;
}

/* Step 2: Skill toolbar and filter */
.project-ai-skill-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.project-ai-search {
    position: relative;
    flex: 1;
    min-width: 240px;
}
.project-ai-search .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
}
.project-ai-search input {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: 13px 'Outfit', sans-serif;
    outline: none;
}
.project-ai-search input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
}
.project-ai-quick-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.btn-xs {
    padding: 5px 10px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
}
.project-ai-skill-count-badge {
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    font-size: 11px;
    font-weight: 700;
}

/* Category Pills */
.project-ai-category-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0 10px;
    scrollbar-width: none;
}
.project-ai-category-tabs::-webkit-scrollbar {
    display: none;
}
.project-ai-cat-pill {
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    font: 500 11px 'Outfit', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}
.project-ai-cat-pill:hover {
    border-color: #6366f1;
    color: var(--text-primary);
}
.project-ai-cat-pill.active {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
    font-weight: 600;
}

/* Skills Grid */
.project-ai-skills-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
    padding: 2px;
}
.project-ai-skill-card {
    position: relative;
    padding: 11px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.project-ai-skill-card:hover {
    border-color: #6366f1;
    background: var(--bg-card-hover);
    transform: translateY(-1px);
}
.project-ai-skill-card.selected {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
    box-shadow: 0 0 0 1px #6366f1;
}
.project-ai-skill-card input[type="checkbox"] {
    display: none;
}
.project-ai-check {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: transparent;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    flex: 0 0 18px;
    margin-top: 2px;
    transition: all 0.15s ease;
}
.project-ai-skill-card.selected .project-ai-check {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}
.project-ai-skill-card .skill-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.project-ai-skill-card .skill-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.project-ai-skill-card strong {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
}
.skill-category-tag {
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(100, 116, 139, 0.12);
    color: var(--text-muted);
    font-size: 9.5px;
    font-weight: 500;
}
.project-ai-skill-card small {
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Step 3: Focus prompt */
.project-ai-request textarea {
    width: 100%;
    min-height: 70px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: 13px/1.5 'Outfit', sans-serif;
    resize: vertical;
    outline: none;
}
.project-ai-request textarea:focus {
    border-color: #6366f1;
}
.project-ai-data-note {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
}
.project-ai-data-note p {
    margin: 0;
    font-size: 11px;
    color: var(--text-secondary);
}

/* Footer */
.project-ai-footer {
    padding: 18px 28px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--bg-card);
}
.project-ai-footer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.project-ai-footer-info .pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.project-ai-footer-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}
.project-ai-submit {
    min-width: 220px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
}
.project-ai-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, #4338ca, #6d28d9) !important;
    transform: translateY(-1px);
}

/* Running State Loader */
.project-ai-running {
    padding: 24px;
    border-radius: 14px;
    border: 1px solid rgba(99, 102, 241, 0.35);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(168, 85, 247, 0.08));
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    animation: projectAiPulse 2s infinite ease-in-out;
}
@keyframes projectAiPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.15); }
    50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.05); }
}
.project-ai-running .running-info strong {
    font-size: 14px;
    color: var(--text-primary);
}
.project-ai-running .running-info p {
    margin: 4px 0 2px;
    font-size: 12px;
    color: #6366f1;
    font-weight: 500;
}
.project-ai-running .running-info small {
    font-size: 11px;
    color: var(--text-muted);
}

/* Report View */
.project-ai-report-meta-bar {
    padding: 12px 28px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--bg-input);
    flex-wrap: wrap;
}
.applied-skills-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.applied-skills-wrap .meta-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}
.applied-skill-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.applied-skill-badge {
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    font-size: 11px;
    font-weight: 600;
}
.report-view-toggle {
    display: flex;
    gap: 4px;
}

.report-body {
    padding: 28px;
}
.project-ai-report-rendered {
    color: var(--text-primary);
    font-size: 13.5px;
    line-height: 1.7;
}
.project-ai-report-rendered h2, .md-h2 {
    font-size: 20px !important;
    font-weight: 700;
    margin: 20px 0 10px !important;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.project-ai-report-rendered h3, .md-h3 {
    font-size: 16px !important;
    font-weight: 600;
    margin: 16px 0 8px !important;
    color: var(--text-primary);
}
.project-ai-report-rendered h4, .md-h4 {
    font-size: 14px !important;
    font-weight: 600;
    margin: 14px 0 6px !important;
    color: #6366f1;
}
.project-ai-report-rendered strong {
    color: var(--text-primary);
    font-weight: 600;
}
.project-ai-report-rendered ul, .md-ul, .project-ai-report-rendered ol, .md-ol {
    margin: 8px 0 14px 20px;
    padding: 0;
}
.project-ai-report-rendered li, .md-li, .md-oli {
    margin-bottom: 4px;
}
.project-ai-report-rendered blockquote, .md-quote {
    margin: 12px 0;
    padding: 10px 16px;
    border-left: 3px solid #6366f1;
    background: rgba(99, 102, 241, 0.05);
    border-radius: 0 8px 8px 0;
    font-style: italic;
}
.project-ai-report-rendered pre, .md-code {
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    overflow-x: auto;
    font: 12px/1.6 Consolas, monospace;
}
.project-ai-report-raw {
    margin: 0;
    padding: 18px;
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: 12.5px/1.65 Consolas, 'SFMono-Regular', monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Markdown Tables & Cards */
.md-table-card {
    margin: 18px 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.md-table-header {
    padding: 9px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
    gap: 10px;
}
.md-table-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.md-table-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.md-table-count {
    font-size: 11px;
    color: var(--text-muted);
}
.md-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    line-height: 1.55;
    text-align: left;
}
.md-table th {
    padding: 10px 14px;
    background: rgba(99, 102, 241, 0.07);
    color: var(--text-primary);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.md-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    vertical-align: top;
}
.md-table tbody tr:last-child td {
    border-bottom: none;
}
.md-table tbody tr:hover td {
    background: rgba(99, 102, 241, 0.04);
    color: var(--text-primary);
}

/* Code block card & inline code */
.md-code-card {
    margin: 16px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    overflow: hidden;
}
.md-code-header {
    padding: 6px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid var(--border);
}
.md-code-lang {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}
.md-code-card .md-code {
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 12px 16px;
    background: transparent;
}
.md-inline-code {
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--bg-input);
    color: #6366f1;
    font: 11.5px/1.4 Consolas, monospace;
    border: 1px solid var(--border);
}
.md-hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 20px 0;
}
.btn-success {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

/* ── Sheet / Excel Integration Bar ── */
.project-ai-sheet-bar {
    padding: 10px 24px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.06), rgba(99, 102, 241, 0.05));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.sheet-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 280px;
}
.sheet-bar-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.sheet-bar-title {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sheet-bar-input-group {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    max-width: 480px;
}
.sheet-url-input {
    width: 100%;
    padding: 6px 95px 6px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: 12px/1.4 'Outfit', -apple-system, sans-serif;
    outline: none;
    transition: all 0.2s ease;
}
.sheet-url-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}
.sheet-url-input.highlight-pulse {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35) !important;
    animation: shakeAlert 0.4s ease;
}
@keyframes shakeAlert {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}
.sheet-badge {
    position: absolute;
    right: 6px;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    font-size: 10px;
    font-weight: 600;
    pointer-events: none;
}
.sheet-badge.excel {
    background: rgba(16, 124, 65, 0.15);
    color: #107c41;
}
.sheet-badge.link {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}
.sheet-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sheet-copy-all-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
    transition: all 0.15s ease;
}
.sheet-copy-all-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}
.md-copy-to-sheet-btn {
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #10b981 !important;
}
.md-copy-to-sheet-btn:hover {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: #10b981 !important;
}

.project-ai-inline-error {
    padding: 14px 18px;
    border-radius: 10px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger);
    margin-bottom: 16px;
}
.project-ai-inline-error strong {
    display: block;
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    .firebase-tabs {
        flex-direction: column;
        height: auto;
        padding: 8px 12px;
        align-items: stretch;
    }
    .firebase-tabs-list {
        overflow-x: auto;
        padding-bottom: 6px;
    }
    .firebase-tabs-ai-wrap {
        justify-content: center;
        padding-top: 6px;
        border-top: 1px dashed var(--border);
    }
    .project-ai-provider-row, .project-ai-skills-grid {
        grid-template-columns: 1fr;
    }
    .project-ai-modal {
        max-height: 96vh;
    }
    .project-ai-header, .project-ai-body, .project-ai-footer {
        padding: 16px;
    }
    .project-ai-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .project-ai-submit {
        width: 100%;
    }
}

/* ==========================================================================
   ULTRA-PREMIUM SAAS LOGIN SCREEN
   ========================================================================== */
/* ==========================================================================
   MOCKUP-INSPIRED TWO-COLUMN GLASS LOGIN WITH 3D ANALYTICS GLOBE
   ========================================================================== */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: radial-gradient(circle at 75% 50%, #fed7aa 0%, #ffedd5 35%, #fff7ed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: background 0.3s ease;
}

html[data-theme="dark"] .login-overlay {
    background: radial-gradient(circle at 75% 50%, rgba(249, 115, 22, 0.12) 0%, rgba(15, 23, 42, 0.97) 50%, #080c14 100%);
}

/* Background Ambient Depth & Glow Orbs */
.login-mesh-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.login-glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.login-orb-warm {
    width: 520px;
    height: 520px;
    top: -80px;
    right: 5%;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.35) 0%, rgba(249, 115, 22, 0) 70%);
    animation: loginOrbFloat 14s infinite alternate ease-in-out;
}

.login-orb-cyan {
    width: 440px;
    height: 440px;
    bottom: -60px;
    right: 25%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.28) 0%, rgba(56, 189, 248, 0) 70%);
    animation: loginOrbFloat 18s infinite alternate-reverse ease-in-out;
}

.login-orb-purple {
    width: 380px;
    height: 380px;
    top: 20%;
    left: 10%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0) 70%);
    animation: loginOrbFloat 16s infinite alternate ease-in-out;
}

/* Background Blurred Globe Reflection */
.login-reflection-blur {
    position: absolute;
    bottom: -70px;
    left: -40px;
    width: 420px;
    height: 420px;
    opacity: 0.22;
    filter: blur(48px);
    transform: rotate(-15deg);
    pointer-events: none;
}

.login-blur-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Floating Particles */
.login-particles-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.l-particle {
    position: absolute;
    border-radius: 50%;
    background: #f97316;
    opacity: 0.45;
    filter: blur(1px);
    animation: particleDrift 10s infinite ease-in-out;
}

.lp-1 { width: 14px; height: 14px; top: 18%; right: 42%; animation-duration: 8s; background: #ea580c; }
.lp-2 { width: 18px; height: 18px; top: 28%; right: 12%; animation-duration: 11s; background: #38bdf8; }
.lp-3 { width: 10px; height: 10px; bottom: 22%; right: 38%; animation-duration: 9s; background: #a855f7; }
.lp-4 { width: 16px; height: 16px; bottom: 32%; right: 8%; animation-duration: 13s; background: #fbbf24; }
.lp-5 { width: 12px; height: 12px; top: 62%; right: 48%; animation-duration: 7s; background: #f97316; }
.lp-6 { width: 22px; height: 22px; top: 12%; right: 22%; animation-duration: 12s; opacity: 0.3; background: #38bdf8; }

@keyframes particleDrift {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-24px) scale(1.15) rotate(15deg); }
}

@keyframes loginOrbFloat {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.06); }
    100% { transform: translateY(20px) scale(0.95); }
}

/* Outer Translucent Glass Stage Frame */
.login-stage-frame {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1080px;
    min-height: 600px;
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 36px;
    padding: 24px;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 24px;
    align-items: center;
    box-shadow: 0 35px 80px -20px rgba(217, 119, 6, 0.16),
                0 15px 35px -10px rgba(0, 0, 0, 0.05),
                inset 0 1px 2px rgba(255, 255, 255, 0.8);
    animation: stageFrameFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

html[data-theme="dark"] .login-stage-frame {
    background: rgba(20, 26, 40, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 35px 90px -20px rgba(0, 0, 0, 0.85),
                0 0 50px rgba(249, 115, 22, 0.08),
                inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

@keyframes stageFrameFadeIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Left Card: Elevated White / Obsidian Card */
.login-card-container {
    width: 100%;
}

.login-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 38px 34px;
    box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.08),
                0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
}

html[data-theme="dark"] .login-card {
    background: #141b2d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.6);
}

/* Brand Top */
.login-card-top {
    margin-bottom: 14px;
}

.login-brand-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 6px;
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: 20px;
}

html[data-theme="dark"] .login-brand-inline {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.25);
}

.login-mini-logo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.login-brand-title {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #ea580c;
}

/* Header Group */
.login-header-group {
    margin-bottom: 22px;
}

.login-title {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #1e293b;
    font-family: 'Outfit', sans-serif;
    line-height: 1.2;
}

html[data-theme="dark"] .login-title {
    color: #f8fafc;
}

.login-subtitle {
    margin: 8px 0 0 0;
    font-size: 13.5px;
    color: #64748b;
    font-weight: 500;
}

html[data-theme="dark"] .login-subtitle {
    color: #94a3b8;
}

/* Form Styles */
.login-form {
    text-align: left;
}

.login-field-group {
    margin-bottom: 16px;
}

.login-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

html[data-theme="dark"] .login-label {
    color: #94a3b8;
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: #1e293b;
    font-size: 14px;
    font-family: 'Outfit', sans-serif;
    outline: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="dark"] .login-input {
    background: #0f1523;
    border-color: #243048;
    color: #f1f5f9;
}

.login-input.with-toggle {
    padding-right: 42px;
}

.login-input:focus {
    border-color: #f97316;
    background: #ffffff;
    box-shadow: 0 0 0 3.5px rgba(249, 115, 22, 0.18);
}

html[data-theme="dark"] .login-input:focus {
    background: #131b2e;
    border-color: #f97316;
    box-shadow: 0 0 0 3.5px rgba(249, 115, 22, 0.25);
}

.login-pwd-toggle {
    position: absolute;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s ease;
}

.login-pwd-toggle:hover {
    color: #ea580c;
    background: rgba(234, 88, 12, 0.08);
}

.login-eye-svg {
    width: 17px;
    height: 17px;
}

/* Forgot Password Link */
.login-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.login-forgot-link {
    font-size: 12px;
    font-weight: 600;
    color: #ea580c;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.login-forgot-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* Error Alert */
.login-error-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #dc2626;
    font-size: 12.5px;
    font-weight: 500;
    animation: loginShake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

html[data-theme="dark"] .login-error-alert {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

.login-error-svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@keyframes loginShake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
    40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* Submit Button: Warm Orange Gradient Pill */
.login-submit-btn {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    border: none;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 8px 20px -4px rgba(234, 88, 12, 0.45);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 10px;
}

.login-submit-btn:hover:not(:disabled) {
    transform: translateY(-1.5px);
    box-shadow: 0 12px 24px -4px rgba(234, 88, 12, 0.55);
}

.login-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}

.login-submit-btn:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

.login-btn-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: loginSpin 0.7s infinite linear;
}

@keyframes loginSpin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   RIGHT SHOWCASE: 3D ANALYTICS ROTATING GLOBE WITH FLOATING BADGES
   ========================================================================== */
.login-showcase {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.login-showcase-center {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 480px;
    height: 480px;
}

.login-globe-wrapper {
    position: relative;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: loginGlobeFloat 6s infinite ease-in-out alternate;
    transition: transform 0.3s ease;
    cursor: grab;
}

.login-globe-wrapper:active {
    cursor: grabbing;
}

.login-globe-wrapper:hover {
    transform: scale(1.03);
}

.login-globe-canvas {
    width: 380px;
    height: 380px;
    display: block;
    border-radius: 50%;
}

.login-globe-glow {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle at center, transparent 65%, rgba(249, 115, 22, 0.28) 100%);
    pointer-events: none;
    box-shadow: 0 0 50px rgba(249, 115, 22, 0.2), inset 0 0 40px rgba(56, 189, 248, 0.15);
}

@keyframes loginGlobeFloat {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-14px) rotate(1deg); }
}

/* Floating Glass Metric Badges */
.floating-badge {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.1),
                0 4px 10px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

html[data-theme="dark"] .floating-badge {
    background: rgba(18, 25, 41, 0.88);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.floating-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 16px 35px -4px rgba(234, 88, 12, 0.25);
}

.badge-icon {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-texts {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.badge-val {
    font-size: 13px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.15;
}

html[data-theme="dark"] .badge-val {
    color: #f8fafc;
}

.badge-sub {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
}

html[data-theme="dark"] .badge-sub {
    color: #94a3b8;
}

/* Badge Positioning and Individual Float Offsets */
.badge-top-left {
    top: 30px;
    left: 0px;
    animation: floatChip1 5s infinite ease-in-out alternate;
}

.badge-top-right {
    top: 50px;
    right: 0px;
    animation: floatChip2 6s infinite ease-in-out alternate;
}

.badge-bottom-left {
    bottom: 40px;
    left: 10px;
    animation: floatChip2 5.5s infinite ease-in-out alternate;
}

.badge-bottom-right {
    bottom: 30px;
    right: 15px;
    animation: floatChip1 6.5s infinite ease-in-out alternate;
}

@keyframes floatChip1 {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-10px); }
}

@keyframes floatChip2 {
    0% { transform: translateY(-8px); }
    100% { transform: translateY(6px); }
}

/* Responsive Styles */
@media (max-width: 960px) {
    .login-stage-frame {
        grid-template-columns: 1fr;
        max-width: 500px;
        padding: 20px;
    }
    .login-showcase {
        order: -1;
        padding: 0;
    }
    .login-showcase-center {
        height: 280px;
        max-width: 280px;
    }
    .login-globe-wrapper {
        width: 220px;
        height: 220px;
        border-radius: 24px;
    }
    .floating-badge {
        padding: 6px 12px;
    }
    .badge-icon {
        font-size: 16px;
    }
    .badge-val {
        font-size: 11.5px;
    }
    .badge-sub {
        font-size: 9px;
    }
    .badge-top-left { top: 10px; left: -15px; }
    .badge-top-right { top: 15px; right: -15px; }
    .badge-bottom-left { bottom: 10px; left: -10px; }
    .badge-bottom-right { bottom: 10px; right: -10px; }
}

@media (max-width: 480px) {
    .login-stage-frame {
        padding: 16px;
        border-radius: 24px;
    }
    .login-card {
        padding: 28px 20px;
        border-radius: 20px;
    }
    .login-title {
        font-size: 26px;
    }
}

/* ══════════════════════════════════════════════════════════════════ */
/* ── APPSTORESPY DASHBOARD & 3D EARTH GLOBE STYLES ───────────────── */
/* ══════════════════════════════════════════════════════════════════ */

.spy-container {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Top Toolbar */
.spy-top-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
}

.spy-app-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.spy-app-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.spy-app-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.spy-app-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.spy-app-title-wrap h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.spy-package-pill {
    font-size: 11px;
    font-family: monospace;
    background: var(--bg-input);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 6px;
    color: var(--text-secondary);
}

.spy-app-submeta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.spy-quick-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.spy-search-box {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    height: 34px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.spy-search-box:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.spy-search-box input {
    border: none;
    background: transparent;
    padding: 0 12px;
    font-size: 12px;
    color: var(--text-primary);
    outline: none;
    min-width: 250px;
    height: 100%;
    font-family: inherit;
}

.spy-search-box input::placeholder {
    color: var(--text-muted);
}

.spy-search-box button {
    border: none;
    border-left: 1px solid var(--border);
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #ffffff !important;
    padding: 0 14px;
    height: 100%;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.spy-search-box button:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    color: #ffffff !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.spy-search-box button:active {
    transform: scale(0.98);
}

/* Cards Grid */
.spy-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
}

.spy-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.spy-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.spy-card-title-wrap h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
}

.spy-card-title-wrap p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 760px;
    line-height: 1.5;
}

.spy-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.spy-period-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.spy-period-select, .spy-select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.spy-period-select:hover, .spy-select:hover {
    border-color: var(--ta-primary, #3b82f6);
}

/* Inner Chart Box matching AppStoreSpy screenshot */
.spy-chart-box {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 20px 16px 20px;
    background: var(--bg-card);
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.spy-chart-box-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.spy-chart-filter-inline {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.spy-chart-filter-inline .spy-period-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Canvas / SVG Chart Wrappers */
.spy-chart-canvas-wrap {
    width: 100%;
    min-height: 340px;
    background: var(--bg-card);
    border-radius: 8px;
    position: relative;
}

.spy-chart-canvas-wrap svg {
    width: 100%;
    height: 340px;
    display: block;
    overflow: visible;
}

/* Local Chart Loading Overlay */
.spy-chart-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 50;
    border-radius: 8px;
    color: #38bdf8;
    font-size: 13px;
    font-weight: 600;
}

.spy-dot {
    transition: r 0.2s cubic-bezier(0.16, 1, 0.3, 1), stroke-width 0.2s;
    cursor: pointer;
}

.spy-dot:hover {
    r: 6.5 !important;
    stroke-width: 2.5 !important;
}

/* Tooltip - Fixed positioned above cursor */
.spy-chart-tooltip {
    position: fixed;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    font-size: 12px;
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.1s ease;
    transform: translate(-50%, -100%);
    margin-top: -10px;
}

/* 4th Card: Global Top Charts & 3D Globe Button */
.spy-card-global {
    background: var(--bg-card);
}

.spy-global-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.spy-global-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.spy-rank-filter-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.spy-filter-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.spy-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.spy-filter-item label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Prominent 3D Globe Launch Button */
.btn-launch-3d-globe {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8, #0ea5e9);
    background-size: 200% 200%;
    animation: globeBtnShimmer 4s ease infinite;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-launch-3d-globe:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.5);
}

.globe-spin-icon {
    font-size: 17px;
    display: inline-block;
    animation: globeSpin 8s linear infinite;
}

@keyframes globeSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes globeBtnShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.globe-shine-sparkle {
    color: #fde047;
    font-size: 12px;
}

/* World Map Container & Interactive Choropleth */
.spy-world-map-wrap {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.spy-world-svg-container {
    width: 100%;
    position: relative;
    padding: 16px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.03) 0%, transparent 75%);
}

.spy-world-svg {
    width: 100%;
    max-width: 1050px;
    height: auto;
    aspect-ratio: 960 / 480;
    display: block;
    margin: 0 auto;
}

.spy-country-path {
    transition: fill 0.15s ease, stroke 0.15s ease, opacity 0.15s ease;
    cursor: pointer;
}

.spy-country-path:hover {
    fill: #f59e0b !important;
    stroke: #ffffff !important;
    stroke-width: 1.4 !important;
    filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.45));
}

.spy-country-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: var(--bg-input);
    border: none;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.spy-country-toggle-btn:hover {
    color: var(--ta-primary, #38bdf8);
    background: rgba(56, 189, 248, 0.08);
}

.spy-country-table-wrap {
    max-height: 380px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}

.spy-country-table-wrap.collapsed {
    display: none;
}

.spy-country-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.spy-country-table th {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: left;
    border-bottom: 1px solid var(--border);
    z-index: 2;
}

.spy-country-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.spy-country-table tr:hover td {
    background: rgba(56, 189, 248, 0.05);
}

.spy-map-overlay-badge {
    position: absolute;
    bottom: 54px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(56, 189, 248, 0.4);
    padding: 7px 16px;
    border-radius: 20px;
    color: #38bdf8;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    transition: all 0.2s;
}

.spy-world-map-wrap:hover .spy-map-overlay-badge {
    background: rgba(37, 99, 235, 0.95);
    color: #fff;
    border-color: #fff;
}

/* ══════════════════════════════════════════════════════════════════ */
/* ── 3D EARTH GLOBE FULLSCREEN MODAL ─────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════ */

.appstorespy-globe-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(2, 6, 23, 0.88);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.appstorespy-globe-modal.active {
    display: flex;
    opacity: 1;
}

.appstorespy-globe-dialog {
    width: 860px;
    max-width: 94vw;
    background: linear-gradient(180deg, #0f172a, #090d16);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(56, 189, 248, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: globeModalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes globeModalPop {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.globe-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.6);
}

.globe-dialog-title-wrap h3 {
    margin: 4px 0 2px 0;
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
}

.globe-dialog-title-wrap p {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
}

.globe-dialog-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.globe-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
    animation: liveDotPulse 1.5s infinite;
}

@keyframes liveDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
}

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

.btn-globe-control {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-globe-control:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #ffffff;
}

.btn-globe-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.btn-globe-close:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
    transform: rotate(90deg);
}

.globe-canvas-wrapper {
    position: relative;
    width: 100%;
    height: 520px;
    background: radial-gradient(circle at 50% 50%, #0d1b2e 0%, #030712 100%);
    overflow: hidden;
    cursor: grab;
}

.globe-canvas-wrapper:active {
    cursor: grabbing;
}

.globe-canvas-wrapper canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Floating HUD Hover Card */
.globe-country-hud {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 12px;
    padding: 14px 18px;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    min-width: 240px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.globe-hud-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.globe-hud-flag {
    font-size: 24px;
}

.globe-hud-header strong {
    font-size: 14px;
    display: block;
}

.globe-hud-header small {
    font-size: 11px;
    color: #94a3b8;
}

.globe-hud-badge {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.globe-hud-stats {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
}

.globe-hud-stats div {
    display: flex;
    justify-content: space-between;
}

.globe-hud-stats span {
    color: #94a3b8;
}

.globe-hud-stats strong {
    color: #f8fafc;
    font-family: monospace;
}

/* Interactive Hints on Bottom */
.globe-interaction-hints {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    color: #94a3b8;
    pointer-events: none;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Antigravity CLI Path & Dynamic Detection UI ────────────────── */
.project-ai-cli-path-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.04));
    border: 1px solid rgba(99, 102, 241, 0.3);
    margin-top: 10px;
    animation: fadeIn 0.25s ease;
}

.cli-path-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.cli-path-header label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: default;
}

.cli-path-header label strong {
    font-size: 13px;
    font-weight: 700;
    color: #c7d2fe;
}

.cli-path-header label small {
    font-size: 11px;
    color: #94a3b8;
}

.cli-path-status-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.cli-path-status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.cli-path-status-badge.empty {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.cli-path-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.cli-path-input {
    flex: 1;
    min-width: 260px;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    transition: all 0.2s ease;
}

.cli-path-input:focus {
    outline: none;
    border-color: #818cf8;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.btn-detect-cli {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.btn-detect-cli:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.5);
    filter: brightness(1.1);
}

.btn-detect-cli:active:not(:disabled) {
    transform: translateY(0);
}

.btn-detect-cli:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.cli-path-hint {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.5;
}

.cli-path-hint code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    color: #818cf8;
    font-size: 10px;
    font-family: monospace;
}

/* ── AppStoreSpy Account Indicators ────────────────────────────── */
.spy-account-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.22);
    border-radius: 20px;
    padding: 0 12px;
    font-size: 11.5px;
    color: var(--text-secondary);
    font-weight: 500;
    height: 34px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

html[data-theme="dark"] .spy-account-badge {
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(99, 102, 241, 0.35);
    color: #cbd5e1;
}

.spy-account-badge strong {
    color: var(--text-primary);
    font-weight: 700;
}

.spy-account-badge .spy-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25), 0 0 8px #10b981;
    flex-shrink: 0;
}

.spy-source-tag {
    font-size: 10.5px;
    font-weight: 700;
    color: #4338ca;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
    padding: 2px 8px;
    border-radius: 12px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

html[data-theme="dark"] .spy-source-tag {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.45);
}

.spy-status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.04));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    color: #fbbf24;
    font-size: 12px;
    line-height: 1.5;
}

.spy-status-banner .banner-icon {
    font-size: 16px;
}