@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* Curated design tokens for a premium cyberpunk-glassmorphic theme */
:root {
    --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Background gradients */
    --bg-gradient: radial-gradient(circle at 10% 10%, #0c0f1d 0%, #05060b 80%, #010103 100%);
    
    /* Premium glass card variables */
    --glass-bg: rgba(13, 17, 30, 0.45);
    --glass-bg-hover: rgba(22, 28, 48, 0.55);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-border-hover: rgba(99, 102, 241, 0.25);
    --glass-glow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    --glass-blur: blur(14px) saturate(180%);
    
    /* Typography colors */
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #475569;
    
    /* Futuristic Neon Accents */
    --accent-blue: #6366f1;
    --accent-blue-hover: #4f46e5;
    --accent-cyan: #06b6d4;
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
    --accent-glow: 0 0 15px rgba(99, 102, 241, 0.35);
    
    /* Status indicators (Premium soft hues) */
    --color-active: #10b981;
    --color-active-bg: rgba(16, 185, 129, 0.1);
    --color-pending: #f59e0b;
    --color-pending-bg: rgba(245, 158, 11, 0.1);
    --color-failed: #f43f5e;
    --color-failed-bg: rgba(244, 63, 94, 0.1);
    
    --transition-speed: 0.25s;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 10% 10%, rgba(99, 102, 241, 0.12) 0%, rgba(99, 102, 241, 0) 70%), var(--bg-gradient);
    z-index: -2;
    pointer-events: none;
}

body::after {
    content: "";
    position: fixed;
    bottom: -10%;
    right: -10%;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, rgba(6, 182, 212, 0) 70%);
    filter: blur(80px);
    z-index: -1;
    pointer-events: none;
}

body {
    background: #040508;
    color: var(--text-primary);
    font-family: var(--font-family);
    height: 100vh;
    padding: 16px 24px;
    display: flex;
    justify-content: center;
    overflow: hidden; /* No viewport scroll! */
}

/* Main wrapper layout */
.dashboard-wrapper {
    width: 100%;
    max-width: 1650px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    animation: fadeIn 0.6s ease-out;
}

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

/* Header design */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-glow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    flex-wrap: wrap;
    gap: 15px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand h1 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    background: linear-gradient(to right, #ffffff, #cbd5e1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand h1 span {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.controls-group {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Selector styling */
.project-selector-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.project-selector-wrapper label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.glass-select {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 10px 18px;
    border-radius: 10px;
    outline: none;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.glass-select:focus, .glass-select:hover {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    background: rgba(0, 0, 0, 0.35);
}

/* Badge values */
.project-meta-badges {
    display: flex;
    gap: 10px;
}

.meta-badge {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.meta-badge span {
    color: var(--text-primary);
    margin-left: 4px;
}

/* Metric overview panels */
.overview-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.stat-card {
    padding: 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-glow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-speed), border-color var(--transition-speed);
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(99, 102, 241, 0.3);
}

.stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-gradient);
}

.stat-card h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    font-weight: 600;
}

.stat-card p {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

/* Dashboard main layout */
.dashboard-main-grid {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 20px;
    align-items: start;
}

.sidebar-panels {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Glass card component */
.panel {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-glow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    min-height: 380px;
    transition: transform var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.panel:hover {
    border-color: var(--glass-border-hover);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.panel-header h2 {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--text-primary);
}

/* Grid of Campaign Cards */
.campaigns-panel {
    min-height: 520px;
}

.campaigns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
    overflow-y: auto;
    max-height: 600px;
    padding-right: 5px;
}

.campaign-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all var(--transition-speed);
}

.campaign-card:hover {
    border-color: rgba(99, 102, 241, 0.25);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
}

.campaign-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.campaign-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-badges {
    display: flex;
    gap: 6px;
    align-items: center;
}

.badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
}

.badge-geo {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}

.badge-status {
    text-transform: uppercase;
}

.status-active {
    background: var(--color-active-bg);
    color: var(--color-active);
}

.status-paused {
    background: var(--color-pending-bg);
    color: var(--color-pending);
}

.status-archived {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.campaign-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font-size: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 14px;
}

.campaign-body div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.campaign-body span.label {
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.campaign-body span.value {
    color: var(--text-primary);
    font-weight: 500;
}

.campaign-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-muted);
    border-top: 1px dashed rgba(255, 255, 255, 0.04);
    padding-top: 10px;
}

/* Recommendations list */
.recommendations-panel {
    min-height: 250px;
}

.recs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: 380px;
}

.rec-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color var(--transition-speed);
}

.rec-item:hover {
    border-color: rgba(244, 63, 94, 0.25);
}

.rec-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rec-campaign {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.rec-action-badge {
    text-transform: uppercase;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
}

.rec-pause {
    background: var(--color-failed-bg);
    color: var(--color-failed);
}

.rec-budget {
    background: var(--color-pending-bg);
    color: var(--color-pending);
}

.rec-body {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.rec-buttons {
    display: flex;
    gap: 10px;
}

.btn {
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 8px 16px;
    cursor: pointer;
    transition: all var(--transition-speed), transform 0.1s ease;
}

.btn:active {
    transform: scale(0.97);
}

.btn-approve {
    background: var(--color-active);
    color: #ffffff;
}

.btn-approve:hover {
    background: #059669;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.btn-reject {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
}

.btn-reject:hover {
    background: rgba(255, 255, 255, 0.12);
}

.btn-run {
    background: var(--accent-gradient);
    color: #ffffff;
}

.btn-table-action {
    padding: 3px 7px !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    border-radius: 5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
}

.btn-run:hover {
    box-shadow: var(--accent-glow);
    filter: brightness(1.1);
}

/* Action Queue (Tasks) Table */
.tasks-panel {
    min-height: 320px;
}

.tasks-table-container {
    overflow-x: auto;
}

.tasks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    text-align: left;
}

.tasks-table th {
    padding: 12px 16px;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tasks-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: middle;
}

.tasks-table tr:hover td {
    background: rgba(255, 255, 255, 0.01);
}

.task-type-badge {
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

/* Details and Summary interactive expansions */
details.payload-details {
    margin-top: 4px;
}

details.payload-details summary {
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--accent-cyan);
    outline: none;
}

details.payload-details pre {
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    margin-top: 4px;
    font-size: 0.7rem;
    overflow-x: auto;
}

/* Dialog Styling */
.glass-dialog {
    margin: auto;
    background: rgba(10, 12, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    padding: 24px;
    width: 90%;
    max-width: 500px;
    color: var(--text-primary);
    backdrop-filter: blur(20px);
    outline: none;
}

.glass-dialog:not([open]) {
    display: none !important;
}

.glass-dialog[open] {
    display: flex;
    flex-direction: column;
}

.glass-dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
}

.dialog-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dialog-content h2 {
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 10px;
}

.dialog-body {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dialog-body pre {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 12px;
    font-family: monospace;
    font-size: 0.75rem;
    overflow-x: auto;
    color: #e2e8f0;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.btn-close {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.btn-close:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Toast Container */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 220px;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    z-index: 1000;
}

.toast {
    padding: 9px 15px;
    border-radius: 8px;
    color: #f8fafc;
    font-size: 0.8rem;
    font-weight: 500;
    backdrop-filter: blur(12px);
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    animation: slideIn 0.25s ease-out;
    display: flex;
    align-items: center;
    gap: 8px;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast-success {
    border-left: 3px solid #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.toast-error {
    border-left: 3px solid #f43f5e;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.12) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.toast-warning {
    border-left: 3px solid #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.toast-info {
    border-left: 3px solid #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(15, 23, 42, 0.95) 100%);
}

/* Empty placeholder styling */
.empty-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: center;
    flex-grow: 1;
}

/* Spinners */
.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    flex-grow: 1;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    border-top-color: var(--accent-blue);
    animation: spin 1s ease-in-out infinite;
}

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

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* App Tabs Navigation */
.app-nav {
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.25);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    align-self: center;
    overflow-x: auto;
    max-width: 100%;
    /* Hide scrollbars but keep scrolling functional */
    scrollbar-width: none; /* Firefox */
}

.app-nav::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

.nav-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-speed);
    flex-shrink: 0;
    white-space: nowrap;
}

.nav-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.nav-btn.active {
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(6, 182, 212, 0.2));
    border: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.1);
}

/* Tab Content Visibility */
.tab-content {
    display: none;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
    overflow: hidden;
}

.tab-content.active {
    display: flex;
    animation: fadeIn 0.4s ease-out;
}

#tab-dashboard, #tab-rules, #tab-expenses, #tab-logs, #tab-settings, #tab-manual, #tab-accounts {
    overflow-y: auto;
}

/* Miniature Top Progress Bar */
.top-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: transparent;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.top-progress-bar.active {
    opacity: 1;
}
.top-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6366f1 0%, #3b82f6 30%, #10b981 70%, #f59e0b 100%);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.8), 0 0 6px rgba(16, 185, 129, 0.8);
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 2px 2px 0;
}

/* Floating Portal Tooltip System (0ms hover delay, immune to table overflow clipping) */
#app-floating-tooltip {
    position: fixed;
    z-index: 99999999 !important;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #ffffff;
    border: 1px solid rgba(99, 102, 241, 0.4);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.45;
    white-space: pre-line;
    max-width: 440px;
    min-width: 220px;
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.08s ease, transform 0.08s ease, visibility 0.08s ease;
    word-break: normal;
    overflow-wrap: break-word;
    left: -9999px;
    top: -9999px;
}

#app-floating-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.chat-panel {
    min-height: 480px;
    max-height: 600px;
    background: rgba(10, 11, 20, 0.88) !important;
}

.chat-messages-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 5px;
    margin-bottom: 16px;
    overscroll-behavior: contain; /* Prevents window scroll chaining */
}

.chat-message {
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 0.85rem;
    line-height: 1.45;
    max-width: 85%;
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap; /* Preserves LLM formatting and line breaks */
}

.chat-message.agent {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--accent-cyan);
    color: var(--text-primary);
}

.chat-message.user {
    align-self: flex-end;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.2);
}

.chat-message code {
    font-family: monospace;
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 5px;
    border-radius: 4px;
    color: #ffd688;
}

.chat-cost-footer {
    margin-top: 6px;
    font-size: 0.66rem;
    opacity: 0.8;
    color: var(--text-secondary);
    white-space: normal;
}

.chat-error-block {
    margin: 6px 0;
    padding: 8px 10px;
    font-family: monospace;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #ff9d8a;
    background: rgba(255, 90, 60, 0.08);
    border: 1px solid rgba(255, 90, 60, 0.25);
    border-radius: 8px;
    white-space: pre-wrap;
}

.chat-input-form {
    display: flex;
    gap: 10px;
}

.chat-input-form input,
.chat-input-form textarea {
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    padding: 12px 16px;
    outline: none;
    font-family: inherit;
    font-size: 0.85rem;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    resize: none; /* Disables manual drag resize — height is auto by JS instead */
    height: 44px; /* Standard input height; grown up to max-height by JS as user types */
    max-height: 140px; /* ~5-6 lines, then scrolls internally */
    overflow-y: auto;
    box-sizing: border-box;
}

.chat-input-form input:focus,
.chat-input-form textarea:focus {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Drafts Table */
.drafts-table-container {
    overflow: auto;
    max-height: calc(100vh - 220px);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.1);
}

.drafts-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
    text-align: center;
    table-layout: fixed;
}

.drafts-table th {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 10px 8px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    user-select: none;
}

.btn-delete-col {
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 4px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    line-height: 1;
    color: var(--text-muted);
    margin-left: 6px;
    flex-shrink: 0;
}

.drafts-table th:hover .btn-delete-col {
    display: inline-flex;
}

.btn-delete-col:hover {
    color: var(--color-failed, #f43f5e) !important;
    background: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.3);
}

.btn-filter-col {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.65rem;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    color: var(--text-muted);
    margin-right: 4px;
    flex-shrink: 0;
}
.btn-filter-col:hover { color: var(--accent-blue); background: rgba(99, 102, 241, 0.15); }
.btn-filter-col.active { color: var(--accent-blue); font-weight: 700; }

.resizer {
    display: inline-block;
    width: 6px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    cursor: col-resize;
    z-index: 10;
    transition: background 0.2s, border-right 0.2s;
    border-right: 1px solid rgba(255, 255, 255, 0.08); /* едва заметная полоска-граница */
}

.resizer:hover {
    background: rgba(99, 102, 241, 0.2);
    border-right: 1px solid var(--accent-blue);
}

.drafts-table td {
    padding: 8px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drafts-table tr:hover td {
    background: rgba(255, 255, 255, 0.01);
}

/* Add row/column "+" buttons — replace the old standalone header buttons */
.table-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px dashed var(--glass-border-hover);
    background: transparent;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-speed), transform 0.1s ease;
}

.table-add-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-blue);
    background: rgba(99, 102, 241, 0.12);
}

.table-add-btn:active {
    transform: scale(0.94);
}

.add-col-th {
    text-align: center;
    padding: 8px !important;
}

.table-add-row-btn {
    width: 100%;
    height: 32px;
    border-style: dashed;
}

.add-row-tr td {
    background: transparent;
}

/* Manual container spacing */
.manual-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.manual-container h3 {
    font-size: 1.05rem;
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 10px;
}

.manual-container ul {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.manual-container li::before {
    content: "⚡";
    margin-right: 8px;
}

.manual-container blockquote {
    border-left: 4px solid var(--accent-cyan);
    background: rgba(6, 182, 212, 0.03);
    padding: 12px 18px;
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: var(--text-primary);
}

.manual-container pre {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    padding: 16px;
    border-radius: 10px;
    overflow-x: auto;
    font-family: monospace;
    color: #e2e8f0;
}

.manual-container code {
    font-family: monospace;
    color: #ffd688;
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 5px;
    border-radius: 4px;
}

/* Launch Wizard Styling */
.wizard-panel {
    min-height: 270px;
    margin-bottom: 20px;
}

.wizard-step {
    display: none;
    flex-direction: column;
    gap: 16px;
    animation: fadeIn 0.3s ease-out;
}

.wizard-step.active {
    display: flex;
}

.wizard-descr {
    font-size: 0.88rem;
    color: var(--accent-cyan);
    font-weight: 600;
}

.wizard-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.form-group label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.glass-input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    padding: 11px 15px;
    outline: none;
    font-size: 0.85rem;
    font-family: inherit;
    transition: all var(--transition-speed);
}

.glass-input:focus {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.wizard-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.01);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.wizard-preview p {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    padding-bottom: 6px;
}

.wizard-preview p strong {
    color: var(--text-secondary);
    font-weight: 500;
}

.command-block {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--glass-border);
    padding: 12px;
    border-radius: 10px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.command-block span {
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.command-block code {
    font-family: monospace;
    font-size: 0.85rem;
    color: #ffd688;
    word-break: break-all;
}

/* Draggable Table Headers */
.draggable-header {
    cursor: grab;
    user-select: none;
    transition: background-color 0.15s ease, border-left 0.15s ease;
}
.draggable-header:active {
    cursor: grabbing;
}
.draggable-header.dragging {
    opacity: 0.35;
    background: rgba(99, 102, 241, 0.2) !important;
}
.draggable-header.over {
    border-left: 2px solid var(--accent-cyan);
    background: rgba(6, 182, 212, 0.1) !important;
}

/* Floating Chat Widget Styles */
.floating-chat-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    font-family: inherit;
}

.floating-chat-trigger {
    background: var(--gradient-panel);
    border: 1px solid var(--border-panel);
    color: var(--text-color);
    padding: 12px 20px;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 8px 32px var(--shadow-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.floating-chat-trigger:hover {
    transform: translateY(-2px);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.4);
}

.floating-chat-card {
    position: absolute;
    bottom: 60px;
    right: 0;
    width: 360px;
    height: 480px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.7), 0 0 30px rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 11, 20, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.floating-chat-header {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--border-panel);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.floating-chat-header h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--accent-cyan);
}

.floating-chat-header .clear-btn {
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
}

.floating-chat-header .clear-btn:hover {
    color: var(--color-failed);
}

.floating-chat-header .close-btn {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.floating-chat-header .close-btn:hover {
    opacity: 1;
}

.floating-chat-card .chat-messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overscroll-behavior: contain; /* Prevents window scroll chaining */
}

/* Logs and task table layout */
.log-item-row {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background-color 0.2s;
}

.log-item-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.log-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.log-item-body {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.log-error-item {
    background: rgba(244, 63, 94, 0.03);
    border-left: 3px solid var(--color-failed);
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.log-error-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Typing Indicator: live status text + bouncing dots */
.chat-message.agent.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    min-width: 50px;
    height: 38px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--accent-cyan);
}

.typing-status-text {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    background-color: var(--accent-cyan);
    border-radius: 50%;
    display: inline-block;
    animation: bounce 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.typing-dots span:nth-child(3) {
    animation-delay: -0.08s;
}

@keyframes bounce {
    0%, 80%, 100% { 
        transform: scale(0);
        opacity: 0.3;
    } 
    40% { 
        transform: scale(1.0);
        opacity: 1;
    }
}

/* ══════════════════════════════════════════════
   Иерархия Аккаунтов: Токены → Кабинеты → Кампании
   ══════════════════════════════════════════════ */

/* Token Groups / Social Cards */
.token-group {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(12px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.token-group:hover {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.token-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    background: rgba(99, 102, 241, 0.04);
    transition: background 0.15s ease;
    min-height: 48px;
}
.token-group-header:hover {
    background: rgba(99, 102, 241, 0.09);
}

.token-chevron {
    font-size: 11px;
    transition: transform 0.2s ease;
    color: var(--text-muted);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.token-group.expanded .token-chevron {
    transform: rotate(90deg);
}

.token-social-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 85px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.01em;
}

.token-profile-name {
    font-size: 0.76rem;
    font-weight: 400;
    color: var(--text-muted);
    opacity: 0.7;
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.token-status-badge-wrap {
    min-width: 130px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.token-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.76rem;
    color: var(--text-muted);
    min-width: 150px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}

.token-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    flex-shrink: 0;
}

.token-stats .stat {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.token-group-header .account-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1;
    user-select: none;
}

.status-badge-social-active {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.status-badge-social-checkpoint {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.status-badge-social-error {
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.3);
    color: #f43f5e;
}

.status-badge-social-untested {
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #94a3b8;
}

.token-group-body {
    display: none;
    padding: 4px 12px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.token-group.expanded .token-group-body {
    display: block;
}

/* Cabinet Rows inside Token Group */
.account-row {
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-top: 6px;
    background: rgba(10, 15, 28, 0.5);
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.account-row:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.account-row-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    cursor: pointer;
    user-select: none;
    min-height: 38px;
}

.account-chevron {
    font-size: 10px;
    transition: transform 0.2s ease;
    color: var(--text-muted);
    width: 12px;
    text-align: center;
    flex-shrink: 0;
}
.account-row.expanded .account-chevron {
    transform: rotate(90deg);
}

.account-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 140px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.account-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.76rem;
    color: var(--text-muted);
    width: 150px;
    flex-shrink: 0;
}
.account-id-copyable {
    cursor: pointer;
}
.account-id-copyable:hover {
    color: var(--accent-blue);
    text-decoration: underline;
}

.account-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.account-row-header .account-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Статусная точка */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.status-dot.active { background: #22c55e; box-shadow: 0 0 6px #22c55e88; }
.status-dot.ban { background: #ef4444; box-shadow: 0 0 6px #ef444488; }
.status-dot.checkpoint { background: #f59e0b; box-shadow: 0 0 6px #f59e0b88; }
.status-dot.error { background: #f97316; box-shadow: 0 0 6px #f9731688; }
.status-dot.unknown, .status-dot.error_fetching { background: #6b7280; }

/* Кампании внутри кабинета */
.account-campaigns { display: none; padding: 0 14px 10px; }
.account-row.expanded .account-campaigns { display: block; }

.campaigns-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 6px;
}
/* Разбивка по объявлениям (Запуски) НЕ должна растягиваться на всю (широкую,
   с прокруткой) внешнюю таблицу — иначе колонки с короткими значениями (статус,
   клики) размазываются на всю ширину и визуально "плывут" относительно
   заголовков. width:auto — таблица ужимается по содержимому, не шире реально
   нужного, и помещается в видимую область экрана без горизонтального скролла. */
.ads-detail-table {
    width: auto;
    table-layout: auto;
}
.campaigns-mini-table th {
    text-align: left;
    padding: 6px 10px;
    color: var(--text-muted);
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    white-space: nowrap;
}
.campaigns-mini-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    color: var(--text-secondary);
    white-space: nowrap;
}
.campaigns-mini-table tr:last-child td { border-bottom: none; }
.campaigns-mini-table tr:hover td { background: rgba(99,102,241,0.05); color: var(--text-primary); }

.campaign-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}
.campaign-status-badge.active { background: rgba(34,197,94,0.15); color: #22c55e; }
.campaign-status-badge.paused { background: rgba(245,158,11,0.15); color: #f59e0b; }
.campaign-status-badge.error { background: rgba(239,68,68,0.15); color: #ef4444; }
.campaign-status-badge.pending { background: rgba(99,102,241,0.15); color: #818cf8; }

.no-campaigns-msg {
    text-align: center;
    padding: 14px;
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}

.btn-expand-ads {
    background: transparent;
    border: none;
    color: var(--accent-blue);
    cursor: pointer;
    font-size: 10px;
    padding: 0 4px 0 0;
    line-height: 1;
    vertical-align: middle;
}
.btn-expand-ads:hover { color: var(--text-primary); }

.btn-pause-ad {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: #ef4444;
    cursor: pointer;
    font-size: 11px;
    padding: 3px 8px;
    white-space: nowrap;
}
.btn-pause-ad:hover { background: rgba(239, 68, 68, 0.2); }
.btn-pause-ad:disabled { opacity: 0.5; cursor: default; }

/* Действия на кабинете */
.account-actions { display: flex; gap: 6px; align-items: center; }
.account-actions .btn-icon {
    background: none;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}
.account-actions .btn-icon:hover {
    background: rgba(99,102,241,0.15);
    border-color: rgba(99,102,241,0.4);
    color: #fff;
}

/* Кликабельные варианты в чате (список ФП и т.п.) */
.chat-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 10px;
}
.chat-choice-btn {
    background: rgba(90, 130, 255, 0.15);
    border: 1px solid var(--border-panel, rgba(255,255,255,0.2));
    color: inherit;
    border-radius: 14px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.chat-choice-btn:hover {
    background: rgba(90, 130, 255, 0.35);
}

.selectable-cell {
    cursor: pointer !important;
}

.secret-input {
    -webkit-text-security: disc !important;
    text-security: disc !important;
}

#tab-work .panel, #tab-campaigns .panel {
    flex-grow: 1;
    overflow: hidden;
}

#tab-work .drafts-table-container, #tab-campaigns .drafts-table-container {
    flex-grow: 1;
    overflow: auto;
    max-height: none;
}

/* Custom status colors for launches drafts */
.badge.status-plan {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.badge.status-active {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #22c55e !important;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.badge.status-paused {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.badge.status-ban {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.badge.status-error {
    background: rgba(249, 115, 22, 0.15) !important;
    color: #f97316 !important;
    border: 1px solid rgba(249, 115, 22, 0.3);
}
.badge.status-reject {
    background: rgba(236, 72, 153, 0.15) !important;
    color: #ec4899 !important;
    border: 1px solid rgba(236, 72, 153, 0.3);
}
.badge.status-checking {
    background: rgba(6, 182, 212, 0.15) !important;
    color: #06b6d4 !important;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.th-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

.editable-cell input, .editable-cell select {
    text-align: center;
    text-align-last: center;
}

/* Dashboard Campaigns Table */
.campaigns-table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 480px;
    padding-right: 5px;
    margin-top: 10px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: rgba(10, 12, 22, 0.2);
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    text-align: left;
}

.dashboard-table th {
    padding: 12px 14px;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    background: rgba(13, 16, 28, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}

.dashboard-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: middle;
    color: var(--text-primary);
}

.dashboard-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.dashboard-table .camp-name-cell {
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.dashboard-table .badge-status {
    padding: 2px 6px;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    display: inline-block;
}

.dashboard-table .status-active, .dashboard-table .status-актив, .dashboard-table .status-реклама {
    background: rgba(16, 185, 129, 0.1) !important;
    color: var(--color-active) !important;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.dashboard-table .status-paused, .dashboard-table .status-пауза {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.dashboard-table .status-plan, .dashboard-table .status-черновик {
    background: rgba(148, 163, 184, 0.1) !important;
    color: var(--text-secondary) !important;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.dashboard-table .status-checking, .dashboard-table .status-проверка {
    background: rgba(6, 182, 212, 0.1) !important;
    color: #06b6d4 !important;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

/* ==========================================================================
   User Demo Mode (Режим просмотра пользователя / баера)
   ========================================================================== */

.user-demo-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: fadeInDownDemo 0.25s ease-out;
}

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

.demo-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.5);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.demo-desc {
    font-size: 0.8rem;
    color: #e2e8f0;
}

.btn-exit-demo {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.btn-exit-demo:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
    transform: translateY(-1px);
}

/* Hide admin-only elements when User Demo Mode is active */
body.user-demo-mode-active .admin-only {
    display: none !important;
}

body.user-demo-mode-active .nav-btn[data-tab="tab-rules"],
body.user-demo-mode-active .nav-btn[data-tab="tab-settings"],
body.user-demo-mode-active .nav-btn[data-tab="tab-logs"] {
    display: none !important;
}

/* AI Advice & Verdict Styles */
.ai-advices-chip-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.ai-advice-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    cursor: default;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    line-height: 1.35;
    transition: transform 0.08s ease, filter 0.08s ease;
}

.ai-advice-chip:hover {
    transform: translateY(-1px);
    filter: brightness(1.2);
}

.ai-advice-cell-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    cursor: default;
    user-select: none;
    line-height: 1.4;
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.67rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
}

.ai-badge-scale {
    background: rgba(16, 185, 129, 0.08);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.ai-badge-warning {
    background: rgba(245, 158, 11, 0.08);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.ai-badge-danger {
    background: rgba(244, 63, 94, 0.08);
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.2);
}

.ai-badge-reject {
    background: rgba(168, 85, 247, 0.08);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.ai-badge-info {
    background: rgba(59, 130, 246, 0.08);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.ai-badge-neutral {
    background: rgba(148, 163, 184, 0.06);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.ai-advice-short {
    font-size: 0.72rem;
    color: var(--text-secondary, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.ai-advice-cell-wrap:hover .ai-advice-short {
    color: #f1f5f9;
}

/* ==========================================================================
   Global Traffic & Auction Insights
   ========================================================================== */
.global-insights-panel {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.global-alerts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.global-alert-card {
    background: rgba(30, 41, 59, 0.6);
    border-radius: 8px;
    padding: 12px 14px;
    border-left: 4px solid var(--border-glass);
    display: flex;
    flex-direction: column;
}

.global-alert-card.danger {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.global-alert-card.warning {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}

.global-alert-card.scale {
    border-left-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.global-alert-top-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 6px;
}

.global-alert-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.35;
    margin-bottom: 6px;
}

.global-alert-sample {
    font-size: 0.68rem;
    color: #cbd5e1;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 2px 7px;
    border-radius: 4px;
    margin-bottom: 8px;
    align-self: flex-start;
}

.global-alert-desc {
    font-size: 0.74rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.global-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}

.insight-block {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
}

.insight-block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.insight-block-header h3 {
    font-size: 0.88rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.insight-block-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.placement-row {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 6px;
    padding: 8px 10px;
    border-left: 3px solid #64748b;
}

.placement-row.optimal {
    border-left-color: #10b981;
}

.placement-row.warning {
    border-left-color: #f59e0b;
}

.placement-row.danger {
    border-left-color: #ef4444;
}

.placement-title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.placement-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 6px;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.p-stat {
    font-size: 0.69rem;
    color: var(--text-secondary);
}

.p-stat strong {
    color: #f1f5f9;
}

.placement-title-wrap strong {
    font-size: 0.78rem;
    color: var(--text-primary);
}

.placement-share {
    font-size: 0.68rem;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 6px;
    border-radius: 4px;
}

.placement-verdict {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.angle-geo-card {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 6px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.angle-geo-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #60a5fa;
    margin-bottom: 6px;
}

.angle-item {
    font-size: 0.72rem;
    margin-bottom: 4px;
    line-height: 1.35;
}

.angle-item.top strong {
    color: #34d399;
}

.angle-item.drain span {
    color: #f87171;
}

.angle-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: block;
}

.angle-meta {
    font-size: 0.68rem;
    color: #94a3b8;
    margin-top: 1px;
}

.benchmark-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}

.benchmark-mini-table th {
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.benchmark-mini-table td {
    padding: 6px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.bm-chip {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.68rem;
    color: #cbd5e1;
}

.bm-chip.target {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
    font-weight: 600;
}

/* 🎯 Targeting Configurator Styles */
.btn-tgt-preset {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 0.75rem;
    padding: 4px 9px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.btn-tgt-preset:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.tgt-radio-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.tgt-radio-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(99, 102, 241, 0.3);
}
.tgt-radio-card.active {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.15);
}

.btn-tgt-gender, .btn-tgt-device {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 0.78rem;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.btn-tgt-gender:hover, .btn-tgt-device:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}
.btn-tgt-gender.active, .btn-tgt-device.active {
    background: #6366f1;
    border-color: #818cf8;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

.btn-tgt-lang {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: #94a3b8;
    font-size: 0.74rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.btn-tgt-lang:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.btn-tgt-lang.active {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.5);
    color: #34d399;
    font-weight: 600;
}

.targeting-badge-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 6px;
    padding: 3px 8px;
    color: #c7d2fe;
    font-size: 0.76rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.targeting-badge-btn:hover {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}