/* ═══════════════════════════════════════════════
   Dark Theme Variables (matching v7 artifact)
   ═══════════════════════════════════════════════ */
:root {
    --dp-gray-900: #111827;
    --dp-gray-800: #1f2937;
    --dp-gray-700: #374151;
    --dp-gray-600: #4b5563;
    --dp-gray-500: #6b7280;
    --dp-gray-400: #9ca3af;
    --dp-gray-300: #d1d5db;
    --dp-gray-200: #e5e7eb;
    --dp-gray-100: #f3f4f6;

    --dp-blue-500: #3b82f6;
    --dp-blue-600: #2563eb;
    --dp-blue-900-50: rgba(30, 58, 138, 0.5);

    --dp-green-400: #4ade80;
    --dp-green-500: #22c55e;
    --dp-green-900-30: rgba(20, 83, 45, 0.3);
    --dp-green-900-50: rgba(20, 83, 45, 0.5);

    --dp-red-400: #f87171;
    --dp-red-500: #ef4444;
    --dp-red-900-20: rgba(127, 29, 29, 0.2);
    --dp-red-900-50: rgba(127, 29, 29, 0.5);

    --dp-amber-400: #fbbf24;
    --dp-amber-900-30: rgba(120, 53, 15, 0.3);

    --dp-purple-300: #c4b5fd;
    --dp-purple-500: #a855f7;
    --dp-purple-800: #6b21a8;
    --dp-purple-900-30: rgba(88, 28, 135, 0.3);

    --dp-pink-400: #f472b6;
    --dp-teal-400: #2dd4bf;
    --dp-yellow-400: #facc15;
    --dp-indigo-400: #818cf8;
    --dp-violet-400: #a78bfa;
}

html {
    /* Base: 17px (+6% от браузерного дефолта 16px).
       Все rem-значения масштабируются пропорционально. */
    font-size: 18px;
}

body {
    background-color: var(--dp-gray-900) !important;
    color: var(--dp-gray-100);
    font-family: system-ui, -apple-system, sans-serif;
}

/* ═══════════════════════════════════════════════
   Header
   ═══════════════════════════════════════════════ */
.dp-header {
    background-color: var(--dp-gray-800);
    border-bottom: 1px solid var(--dp-gray-700);
    padding: 1rem 1.5rem;
}

.dp-header h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dp-gray-100);
    margin: 0;
}

.dp-header .dp-subtitle {
    font-size: 0.875rem;
    color: var(--dp-gray-400);
}

/* Data source badge */
.dp-data-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    vertical-align: middle;
    margin-left: 0.5rem;
}
.dp-data-badge i { font-size: 0.45rem; }
.dp-data-static {
    background: rgba(107, 114, 128, 0.2);
    color: var(--dp-gray-400);
}
.dp-data-live {
    background: rgba(20, 83, 45, 0.3);
    color: var(--dp-green-400);
}

/* ═══════════════════════════════════════════════
   Controls (checkboxes, buttons)
   ═══════════════════════════════════════════════ */
.dp-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dp-controls label {
    font-size: 0.875rem;
    color: var(--dp-gray-400);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.dp-btn-secondary {
    padding: 0.375rem 0.75rem;
    background-color: var(--dp-gray-700);
    color: var(--dp-gray-200);
    font-size: 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid var(--dp-gray-600);
    cursor: pointer;
    transition: background-color 0.15s;
}

.dp-btn-secondary:hover {
    background-color: var(--dp-gray-600);
}

/* ═══════════════════════════════════════════════
   Main Tabs (L-1, L0, L1)
   ═══════════════════════════════════════════════ */
.dp-main-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--dp-gray-700);
    margin-top: 1rem;
}

.dp-dev-tabs { display: none; }
.dp-devmode .dp-dev-tabs { display: flex; }

.dp-main-tabs .dp-tab {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dp-gray-500);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.dp-main-tabs .dp-tab:hover {
    color: var(--dp-gray-300);
}

.dp-main-tabs .dp-tab.active {
    color: var(--dp-blue-500);
    border-bottom-color: var(--dp-blue-500);
}

/* ═══════════════════════════════════════════════
   Content Area
   ═══════════════════════════════════════════════ */
.dp-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
}

.dp-tab-content {
    display: none;
}

.dp-tab-content.active {
    display: block;
}

.dp-l1-subtab {
    display: none;
}

.dp-l1-subtab.active {
    display: block;
}

/* ═══════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════ */
.dp-card {
    background-color: var(--dp-gray-800);
    border: 1px solid var(--dp-gray-700);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.dp-card-header {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dp-gray-400);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

/* ═══════════════════════════════════════════════
   L1 Sub-tabs (Table / Flow / Tree)
   ═══════════════════════════════════════════════ */
.dp-l1-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.dp-sub-tabs {
    display: flex;
    gap: 0.5rem;
}

.dp-sub-tab {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    background-color: var(--dp-gray-800);
    color: var(--dp-gray-400);
}

.dp-sub-tab:hover {
    background-color: var(--dp-gray-700);
}

.dp-sub-tab.active {
    background-color: var(--dp-blue-600);
    color: #fff;
}

/* ═══════════════════════════════════════════════
   Funnel Filters
   ═══════════════════════════════════════════════ */
.dp-funnel-filters {
    display: flex;
    gap: 0.5rem;
}

.dp-funnel-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid var(--dp-gray-700);
    cursor: pointer;
    transition: all 0.15s;
    background-color: var(--dp-gray-800);
    color: var(--dp-gray-400);
}

.dp-funnel-btn:hover {
    border-color: var(--dp-gray-500);
}

.dp-funnel-btn.active {
    background-color: var(--dp-blue-600);
    color: #fff;
    border-color: var(--dp-blue-600);
}

/* ═══════════════════════════════════════════════
   Quick Check
   ═══════════════════════════════════════════════ */
.dp-quick-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dp-qc-item {
    flex: 1;
    text-align: center;
}

.dp-qc-label {
    font-size: 0.75rem;
    color: var(--dp-gray-500);
    margin-bottom: 0.25rem;
}

.dp-qc-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--dp-gray-100);
}

.dp-qc-trend {
    font-size: 0.75rem;
    font-weight: 500;
}

.dp-qc-trend.up { color: var(--dp-green-400); }
.dp-qc-trend.down { color: var(--dp-red-400); }
.dp-qc-trend.flat { color: var(--dp-gray-500); }

.dp-qc-arrow {
    color: var(--dp-gray-600);
    font-size: 1.125rem;
    padding: 0 0.25rem;
    flex-shrink: 0;
}

.dp-qc-pct {
    font-size: 0.75rem;
    color: var(--dp-gray-500);
}

.dp-qc-pct-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--dp-gray-700);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

.dp-qc-pct-row .dp-qc-arrow {
    visibility: hidden;
}

/* ═══════════════════════════════════════════════
   Performance Chart
   ═══════════════════════════════════════════════ */
.dp-perf-chart svg {
    width: 100%;
    display: block;
}

.dp-perf-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    overflow: hidden;
}

.dp-perf-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dp-perf-legend-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
}

.dp-perf-legend-label {
    color: var(--dp-gray-400);
}

.dp-perf-legend-value {
    font-weight: 500;
    color: var(--dp-gray-200);
}

/* ═══════════════════════════════════════════════
   AI Advisor
   ═══════════════════════════════════════════════ */
.dp-advisor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.dp-advisor-panel {
    background-color: var(--dp-gray-800);
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--dp-gray-700);
}

.dp-advisor-panel.problems {
    border-color: rgba(127, 29, 29, 0.6);
}

.dp-advisor-panel.wins {
    border-color: rgba(20, 83, 45, 0.6);
}

.dp-advisor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.dp-advisor-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dp-gray-300);
}

.dp-advisor-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.dp-advisor-dot.red { background-color: var(--dp-red-400); }
.dp-advisor-dot.green { background-color: var(--dp-green-400); }

.dp-advisor-item {
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.dp-advisor-item.problem-item {
    background-color: rgba(127, 29, 29, 0.2);
}

.dp-advisor-item.win-item {
    background-color: rgba(20, 83, 45, 0.2);
}

.dp-advisor-item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.dp-advisor-metric-name {
    font-weight: 500;
    color: var(--dp-gray-200);
}

.dp-advisor-metric-value.red { color: var(--dp-red-400); }
.dp-advisor-metric-value.green { color: var(--dp-green-400); }

.dp-advisor-recommendation {
    font-size: 0.75rem;
    color: var(--dp-gray-400);
}

.dp-advisor-empty {
    font-size: 0.875rem;
    color: var(--dp-gray-500);
}

/* ═══════════════════════════════════════════════
   AI Analysis Block
   ═══════════════════════════════════════════════ */
.dp-ai-block {
    background-color: var(--dp-gray-800);
    border: 1px solid var(--dp-gray-700);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.dp-ai-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.dp-ai-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.5rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    flex-shrink: 0;
}

.dp-ai-idle {
    font-size: 0.875rem;
    color: var(--dp-gray-500);
    padding: 0.25rem 0;
}

.dp-ai-loading {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--dp-gray-400);
    padding: 0.25rem 0;
}

.dp-ai-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--dp-gray-600);
    border-top-color: #818cf8;
    border-radius: 50%;
    flex-shrink: 0;
    animation: dp-spin 0.75s linear infinite;
}

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

.dp-ai-error {
    font-size: 0.875rem;
    color: var(--dp-red-400);
    padding: 0.25rem 0;
}

.dp-ai-summary {
    font-size: 0.875rem;
    color: var(--dp-gray-300);
    line-height: 1.55;
    padding: 0.625rem 0.875rem;
    background: rgba(99, 102, 241, 0.07);
    border-radius: 0.5rem;
    border-left: 3px solid #6366f1;
    margin-bottom: 0.125rem;
}

.dp-ai-priority {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-gray-200);
    padding: 0.625rem 0.875rem;
    margin-top: 0.75rem;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 0.5rem;
    border-left: 3px solid #f59e0b;
}

.dp-ai-action {
    font-size: 0.75rem;
    color: #818cf8;
    margin-top: 0.3rem;
}

/* Provider tabs (shown when AI_PROVIDER=both) */
.dp-ai-provider-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.dp-ai-provider-tab {
    background: var(--dp-gray-700);
    border: 1px solid var(--dp-gray-600);
    border-radius: 0.375rem;
    color: var(--dp-gray-400);
    cursor: pointer;
    font-size: 0.8125rem;
    padding: 0.25rem 0.75rem;
    transition: background 0.15s, color 0.15s;
}

.dp-ai-provider-tab:hover,
.dp-ai-provider-tab.active {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}

.dp-ai-provider-content { display: none; }
.dp-ai-provider-content.active { display: block; }

.dp-ai-provider-badge {
    font-size: 0.75rem;
    color: #818cf8;
}

.dp-ai-cache-status {
    font-size: 0.75rem;
    color: var(--dp-gray-500);
}

.dp-ai-btn { min-width: 6rem; }

/* Light theme overrides */
[data-theme="light"] .dp-ai-block { border-color: rgba(99,102,241,0.20); }
[data-theme="light"] .dp-ai-summary { background: rgba(99,102,241,0.05); }
[data-theme="light"] .dp-ai-priority { background: rgba(245,158,11,0.06); }
[data-theme="light"] .dp-ai-provider-tab { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
[data-theme="light"] .dp-ai-provider-tab:hover,
[data-theme="light"] .dp-ai-provider-tab.active { background: #6366f1; border-color: #6366f1; color: #fff; }

/* ═══════════════════════════════════════════════
   Metrics Table
   ═══════════════════════════════════════════════ */
.dp-metrics-table-wrap {
    background-color: var(--dp-gray-800);
    border-radius: 0.75rem;
    border: 1px solid var(--dp-gray-700);
    overflow: hidden;
}

.dp-metrics-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--dp-gray-700);
}

.dp-metrics-table-header .title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dp-gray-300);
}

.dp-metrics-table-header .period {
    font-size: 0.75rem;
    color: var(--dp-gray-500);
}

.dp-metrics-table-header .count {
    font-size: 0.75rem;
    color: var(--dp-gray-500);
}

.dp-metrics-table {
    width: 100%;
    font-size: 0.8125rem;
    border-collapse: collapse;
}

.dp-metrics-table thead {
    background-color: var(--dp-gray-900);
}

.dp-metrics-table th {
    padding: 0.625rem 0.75rem;
    text-align: right;
    font-weight: 500;
    color: var(--dp-gray-400);
    font-size: 0.75rem;
    white-space: nowrap;
}

.dp-metrics-table th:nth-child(1),
.dp-metrics-table th:nth-child(2) {
    text-align: left;
}

.dp-metrics-table th .formula {
    font-size: 0.625rem;
    color: var(--dp-gray-600);
    font-weight: 400;
}

.dp-metrics-table th.col-now {
    background-color: rgba(37, 99, 235, 0.15);
}

.dp-metrics-table td {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--dp-gray-800);
    white-space: nowrap;
}

.dp-metrics-table .cat-row td {
    background-color: rgba(17, 24, 39, 0.5);
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--dp-gray-700);
}

.dp-cat-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.dp-cat-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dp-gray-400);
    text-transform: uppercase;
}

.dp-cat-count {
    font-size: 0.75rem;
    color: var(--dp-gray-600);
    margin-left: 0.5rem;
}

.dp-metrics-table .metric-row td {
    text-align: right;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    color: var(--dp-gray-400);
}

.dp-metrics-table .metric-row:hover td {
    background-color: rgba(31, 41, 55, 0.5);
}

.dp-metrics-table .metric-row.alert-row td {
    background-color: rgba(127, 29, 29, 0.1);
}

.dp-metrics-table .metric-row td:nth-child(1) {
    text-align: left;
    font-family: inherit;
}

.dp-metrics-table .metric-row td:nth-child(2) {
    text-align: left;
    font-family: inherit;
}

.dp-metrics-table .metric-row td.col-now {
    background-color: rgba(37, 99, 235, 0.15);
    color: var(--dp-gray-100);
    font-weight: 500;
}

.dp-metrics-table.hide-history .col-history { display: none; }
.dp-metrics-table.hide-history th,
.dp-metrics-table.hide-history td { font-size: calc(1em + 2px); }

.dp-metrics-table .metric-name {
    color: var(--dp-gray-200);
}

.dp-metrics-table .metric-abbr {
    font-size: 0.75rem;
    color: var(--dp-gray-600);
    font-family: 'SF Mono', 'Consolas', monospace;
    margin-left: 0.5rem;
}

.dp-metrics-table .metric-formula {
    font-size: 0.625rem;
    color: var(--dp-gray-600);
    font-family: 'SF Mono', 'Consolas', monospace;
}

.dp-priority-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.dp-priority-badge.p1 {
    background-color: rgba(20, 83, 45, 0.3);
    color: var(--dp-green-400);
}

.dp-priority-badge.p2 {
    background-color: var(--dp-gray-800);
    color: var(--dp-gray-500);
}

.dp-trend-up { color: var(--dp-green-400); }
.dp-trend-down { color: var(--dp-red-400); }
.dp-trend-flat { color: var(--dp-gray-500); }

.dp-wow-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.dp-wow-badge.up {
    background-color: rgba(20, 83, 45, 0.3);
    color: var(--dp-green-400);
}

.dp-wow-badge.down {
    background-color: rgba(127, 29, 29, 0.3);
    color: var(--dp-red-400);
}

.dp-wow-badge.flat {
    background-color: var(--dp-gray-800);
    color: var(--dp-gray-500);
}

/* ═══════════════════════════════════════════════
   Revenue Forecast
   ═══════════════════════════════════════════════ */
.dp-forecast {
    display: flex;
    align-items: flex-end;
    gap: 0;
    height: 160px;
    padding: 0 1rem;
    position: relative;
}

.dp-forecast-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.dp-forecast-col .label {
    font-size: 0.75rem;
    color: var(--dp-gray-500);
    margin-bottom: 0.25rem;
}

.dp-forecast-col .bar {
    width: 64px;
    border-radius: 0.375rem 0.375rem 0 0;
    transition: height 0.4s ease;
}

.dp-forecast-col .bar.now { background-color: var(--dp-green-600, #16a34a); }
.dp-forecast-col .bar.mo3 { background-color: var(--dp-green-500, #22c55e); }
.dp-forecast-col .bar.mo6 { background-color: var(--dp-green-400, #4ade80); }

.dp-forecast-col .value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-gray-200);
    margin-top: 0.375rem;
}

.dp-forecast-connector {
    flex: 1;
    position: relative;
    margin-bottom: 50px;
    border-top: 2px dashed var(--dp-gray-600);
    min-width: 40px;
}

.dp-forecast-connector .growth-label {
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
    font-size: 0.6875rem;
    color: var(--dp-gray-500);
    white-space: nowrap;
}

.dp-forecast-formula {
    font-size: 0.75rem;
    color: var(--dp-gray-500);
    margin-top: 0.75rem;
}

/* ═══════════════════════════════════════════════
   Flow Chart
   ═══════════════════════════════════════════════ */
.dp-flow-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.dp-flow-node {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    text-align: center;
    min-width: 100px;
}

.dp-flow-node .node-label {
    font-size: 0.6875rem;
    margin-bottom: 0.125rem;
}

.dp-flow-node .node-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--dp-gray-200);
}

.dp-flow-node.gray   { background-color: var(--dp-gray-700); }
.dp-flow-node.gray .node-label { color: var(--dp-gray-400); }
.dp-flow-node.indigo { background-color: rgba(99,102,241,0.2); }
.dp-flow-node.indigo .node-label { color: #818cf8; }
.dp-flow-node.amber  { background-color: rgba(245,158,11,0.15); }
.dp-flow-node.amber .node-label { color: #fbbf24; }
.dp-flow-node.green  { background-color: rgba(34,197,94,0.15); padding: 1rem 1.25rem; }
.dp-flow-node.green .node-label { color: var(--dp-green-400); }
.dp-flow-node.green .node-value { color: var(--dp-green-400); font-size: 1.375rem; }

.dp-flow-arrow {
    color: var(--dp-gray-500);
    font-size: 0.75rem;
    white-space: nowrap;
}

.dp-flow-arrow .pct {
    font-size: 0.6875rem;
}

.dp-flow-engage {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: rgba(236,72,153,0.1);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-left: 2rem;
    flex-wrap: wrap;
}

.dp-flow-engage .eng-item {
    text-align: center;
}

.dp-flow-engage .eng-item .eng-label {
    font-size: 0.6875rem;
    color: var(--dp-gray-400);
}

.dp-flow-engage .eng-item .eng-value {
    font-weight: 700;
    color: var(--dp-gray-200);
}

.dp-flow-badge {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    background-color: rgba(236,72,153,0.25);
    color: #f472b6;
}

.dp-flow-down {
    color: var(--dp-gray-500);
    margin-left: 2rem;
    font-size: 1rem;
}

.dp-flow-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}

.dp-flow-summary-box {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.dp-flow-summary-box.retention {
    background-color: rgba(20,184,166,0.12);
    border: 1px solid rgba(20,184,166,0.3);
}

.dp-flow-summary-box.retention .box-title {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #2dd4bf;
    margin-bottom: 0.5rem;
}

.dp-flow-summary-box.economics {
    background-color: rgba(234,179,8,0.12);
    border: 1px solid rgba(234,179,8,0.3);
}

.dp-flow-summary-box.economics .box-title {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #facc15;
    margin-bottom: 0.5rem;
}

.dp-flow-summary-box .box-grid {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--dp-gray-300);
}

/* ═══════════════════════════════════════════════
   Metrics Tree
   ═══════════════════════════════════════════════ */
.dp-tree {
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--dp-gray-300);
}

.dp-tree .tree-root {
    color: var(--dp-green-400);
    font-weight: 700;
    font-size: 0.9375rem;
}

.dp-tree .tree-churn {
    color: var(--dp-red-400);
}

.dp-tree .tree-dim {
    color: var(--dp-gray-500);
}

.dp-tree-hint {
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--dp-gray-900);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    color: var(--dp-gray-400);
}

.dp-tree-hint strong {
    color: var(--dp-gray-300);
}

/* ═══════════════════════════════════════════════
   Manual Input
   ═══════════════════════════════════════════════ */
.dp-manual-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.dp-manual-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dp-manual-field label {
    font-size: 0.875rem;
    color: var(--dp-gray-400);
    white-space: nowrap;
}

.dp-manual-input-wrap {
    display: flex;
    align-items: center;
    background-color: var(--dp-gray-900);
    border: 1px solid var(--dp-gray-700);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
}

.dp-manual-input-wrap .dp-dollar {
    color: var(--dp-gray-500);
    font-size: 0.875rem;
}

.dp-manual-input-wrap input {
    width: 5rem;
    font-size: 0.875rem;
    background: transparent;
    border: none;
    outline: none;
    color: var(--dp-gray-100);
    margin-left: 0.25rem;
}

.dp-manual-save {
    padding: 0.375rem 1rem;
    background-color: var(--dp-blue-600);
    color: #fff;
    font-size: 0.875rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s;
}

.dp-manual-save:hover {
    background-color: var(--dp-blue-500);
}

.dp-manual-formula {
    font-size: 0.75rem;
    color: var(--dp-gray-500);
    margin-left: auto;
}

.dp-manual-calc {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--dp-gray-700);
}

.dp-manual-calc-item {
    font-size: 0.875rem;
}

.dp-manual-calc-item .calc-label {
    color: var(--dp-gray-500);
}

.dp-manual-calc-item .calc-value {
    margin-left: 0.5rem;
    font-weight: 500;
    color: var(--dp-gray-200);
}

/* ═══════════════════════════════════════════════
   L-1 Rev Share Tab
   ═══════════════════════════════════════════════ */
.dp-revshare-wrap {
    background: var(--dp-purple-900-30);
    border: 1px solid var(--dp-purple-800);
    border-radius: 0.75rem;
    padding: 1.5rem;
}
.dp-revshare-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.dp-revshare-header .dp-dot {
    width: 0.75rem; height: 0.75rem;
    background: var(--dp-purple-500);
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
}
.dp-revshare-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--dp-purple-300);
    margin: 0;
}
.dp-revshare-header .dp-badge-internal {
    font-size: 0.6875rem;
    background: var(--dp-purple-800);
    color: var(--dp-purple-300);
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
}
.dp-revshare-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.dp-revshare-card {
    background: var(--dp-gray-800);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--dp-purple-800);
}
.dp-revshare-card .card-label {
    font-size: 0.875rem;
    color: var(--dp-gray-400);
    margin-bottom: 0.25rem;
}
.dp-revshare-card .card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dp-gray-100);
}
.dp-revshare-card .card-sub {
    font-size: 0.6875rem;
    color: var(--dp-gray-500);
}
.dp-revshare-card.trust-ok {
    background: var(--dp-green-900-30);
    border-color: #166534;
}
.dp-revshare-card.trust-ok .card-value { color: var(--dp-green-400); }
.dp-revshare-card.trust-warn {
    background: var(--dp-amber-900-30);
    border-color: #92400e;
}
.dp-revshare-card.trust-warn .card-value { color: var(--dp-amber-400); }
.dp-revshare-card.trust-bad {
    background: var(--dp-red-900-20);
    border-color: #991b1b;
}
.dp-revshare-card.trust-bad .card-value { color: var(--dp-red-400); }
.dp-revshare-card.payout {
    background: var(--dp-green-900-30);
    border-color: #166534;
}
.dp-revshare-card.payout .card-value { color: var(--dp-green-400); }
.dp-revshare-input {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dp-gray-100);
    width: 7rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--dp-gray-600);
    outline: none;
    padding: 0;
}
.dp-revshare-input:focus { border-color: var(--dp-purple-500); }

/* ═══════════════════════════════════════════════
   L0 MySQL Tab
   ═══════════════════════════════════════════════ */
.dp-mysql-wrap {
    background: var(--dp-blue-900-50);
    border: 1px solid #1e40af;
    border-radius: 0.75rem;
    padding: 1.5rem;
}
.dp-mysql-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.dp-mysql-header .dp-dot {
    width: 0.75rem; height: 0.75rem;
    background: var(--dp-blue-500);
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
}
.dp-mysql-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #93c5fd;
    margin: 0;
}
.dp-mysql-header .dp-badge-realtime {
    font-size: 0.6875rem;
    background: #1e40af;
    color: #93c5fd;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
}
.dp-mysql-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.dp-mysql-card {
    background: var(--dp-gray-800);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid #1e40af;
}
.dp-mysql-card .card-label {
    font-size: 0.875rem;
    color: var(--dp-gray-400);
}
.dp-mysql-card .card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dp-gray-100);
}
.dp-mysql-card .card-value.blue { color: #60a5fa; }
.dp-mysql-card .card-value.green { color: var(--dp-green-400); }
.dp-mysql-card .gender-split {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.dp-mysql-card .gender-split .male { color: #60a5fa; font-weight: 700; }
.dp-mysql-card .gender-split .female { color: var(--dp-pink-400); font-weight: 700; }

/* ═══════════════════════════════════════════════
   Light Theme — DatingPro Admin style
   Header stays dark; content area is light.
   Activate via: <html data-theme="light">
   ═══════════════════════════════════════════════ */

[data-theme="light"] {
    /* Inverted gray scale: 900 = lightest bg, 100 = darkest text */
    --dp-gray-900: #f7f7f7;
    --dp-gray-800: #ffffff;
    --dp-gray-700: #e2e8f0;
    --dp-gray-600: #cbd5e1;
    --dp-gray-500: #94a3b8;
    --dp-gray-400: #64748b;
    --dp-gray-300: #475569;
    --dp-gray-200: #334155;
    --dp-gray-100: #1e293b;

    /* Saturated status colors readable on white */
    --dp-green-400:      #16a34a;
    --dp-green-500:      #15803d;
    --dp-green-900-30:   rgba(22, 163, 74, 0.12);
    --dp-green-900-50:   rgba(22, 163, 74, 0.18);
    --dp-red-400:        #dc2626;
    --dp-red-500:        #b91c1c;
    --dp-red-900-20:     rgba(220, 38, 38, 0.10);
    --dp-red-900-50:     rgba(220, 38, 38, 0.16);
    --dp-amber-400:      #d97706;
    --dp-amber-900-30:   rgba(217, 119, 6, 0.12);
    --dp-purple-300:     #7c3aed;
    --dp-purple-500:     #6d28d9;
    --dp-purple-800:     #ede9fe;
    --dp-purple-900-30:  rgba(109, 40, 217, 0.10);
    --dp-blue-500:       #2563eb;
    --dp-blue-600:       #1d4ed8;
    --dp-blue-900-50:    rgba(37, 99, 235, 0.10);
    --dp-pink-400:       #db2777;
    --dp-teal-400:       #0d9488;
    --dp-yellow-400:     #ca8a04;
    --dp-indigo-400:     #4f46e5;
    --dp-violet-400:     #7c3aed;
}

/* ── Header: light in light theme ── */
[data-theme="light"] .dp-header {
    background-color: #ffffff;
    border-bottom-color: #e2e8f0;
}
[data-theme="light"] .dp-header h1           { color: #1e293b; }
[data-theme="light"] .dp-header .dp-subtitle { color: #64748b; }
[data-theme="light"] .dp-controls label      { color: #64748b; }

[data-theme="light"] .dp-btn-secondary {
    background-color: #f1f5f9;
    border-color:     #e2e8f0;
    color: #334155;
}
[data-theme="light"] .dp-btn-secondary:hover { background-color: #e2e8f0; }

[data-theme="light"] .dp-main-tabs           { border-bottom-color: #e2e8f0; }
[data-theme="light"] .dp-main-tabs .dp-tab   { color: #94a3b8; }
[data-theme="light"] .dp-main-tabs .dp-tab:hover  { color: #475569; }
[data-theme="light"] .dp-main-tabs .dp-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

[data-theme="light"] .dp-data-static { background: rgba(100,116,139,0.12); color: #64748b; }
[data-theme="light"] .dp-data-live   { background: rgba(22,163,74,0.12);   color: #16a34a; }

/* ── Metrics table ── */
[data-theme="light"] .dp-metrics-table thead { background-color: #f8fafc; }

[data-theme="light"] .dp-metrics-table td {
    border-top-color: #f1f5f9;
}
[data-theme="light"] .dp-metrics-table .cat-row td {
    background-color: #f1f5f9;
    border-top-color: #e2e8f0;
}
[data-theme="light"] .dp-metrics-table .metric-row:hover td {
    background-color: rgba(241,245,249,0.90);
}
[data-theme="light"] .dp-metrics-table .metric-row.alert-row td {
    background-color: rgba(220,38,38,0.06);
}
[data-theme="light"] .dp-metrics-table th.col-now,
[data-theme="light"] .dp-metrics-table td.col-now {
    background-color: rgba(37,99,235,0.08);
}
[data-theme="light"] .dp-wow-badge.up   { background-color: rgba(22,163,74,0.12); }
[data-theme="light"] .dp-wow-badge.down { background-color: rgba(220,38,38,0.12); }
[data-theme="light"] .dp-priority-badge.p1 { background-color: rgba(22,163,74,0.12); }

/* ── Advisor panels ── */
[data-theme="light"] .dp-advisor-panel.problems { border-color: rgba(220,38,38,0.30); }
[data-theme="light"] .dp-advisor-panel.wins     { border-color: rgba(22,163,74,0.30); }
[data-theme="light"] .dp-advisor-item.problem-item { background-color: rgba(220,38,38,0.06); }
[data-theme="light"] .dp-advisor-item.win-item     { background-color: rgba(22,163,74,0.06); }

/* ── RevShare tab ── */
[data-theme="light"] .dp-revshare-wrap   { background: rgba(109,40,217,0.05); border-color: #ddd6fe; }
[data-theme="light"] .dp-revshare-card   { border-color: #ddd6fe; }
[data-theme="light"] .dp-revshare-header h2 { color: #6d28d9; }
[data-theme="light"] .dp-revshare-header .dp-badge-internal {
    background: #ede9fe;
    color: #6d28d9;
}
[data-theme="light"] .dp-revshare-card.trust-ok  { background: rgba(22,163,74,0.07);  border-color: #bbf7d0; }
[data-theme="light"] .dp-revshare-card.trust-warn { background: rgba(217,119,6,0.07); border-color: #fde68a; }
[data-theme="light"] .dp-revshare-card.trust-bad  { background: rgba(220,38,38,0.07); border-color: #fecaca; }
[data-theme="light"] .dp-revshare-card.payout     { background: rgba(22,163,74,0.07); border-color: #bbf7d0; }

/* ── MySQL tab ── */
[data-theme="light"] .dp-mysql-wrap  { background: rgba(37,99,235,0.05); border-color: #bfdbfe; }
[data-theme="light"] .dp-mysql-card  { border-color: #bfdbfe; }
[data-theme="light"] .dp-mysql-header h2 { color: #2563eb; }
[data-theme="light"] .dp-mysql-header .dp-badge-realtime {
    background: #dbeafe;
    color: #2563eb;
}

/* ── Manual input ── */
[data-theme="light"] .dp-manual-input-wrap {
    background-color: #f8fafc;
    border-color: #e2e8f0;
}
[data-theme="light"] .dp-manual-input-wrap input { color: #1e293b; }

/* ── Footer ── */
[data-theme="light"] .dp-footer { border-top-color: #e2e8f0; }

/* ═══════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════ */
.dp-footer {
    padding: 1rem;
    text-align: center;
    color: var(--dp-gray-500);
    font-size: 0.75rem;
    border-top: 1px solid var(--dp-gray-800);
    margin-top: 2rem;
}