/* Elite Dreams Home — дашборд. Тепла нейтральна палітра, один акцент (теракота). */

:root {
    --bg: #f5f1ec;
    --surface: #ffffff;
    --surface-2: #faf7f2;
    --ink: #241f1a;
    --ink-soft: #6e665a;
    --ink-faint: #a49a8a;
    --line: #e6ddd0;
    --line-strong: #d6c9b6;
    --accent: #b5654a;
    --accent-ink: #8a4934;
    --accent-soft: #f2e3da;
    --fb: #4d6f9e;
    --ig: #c1558b;
    --pending: #bdb3a2;
    --shadow: 0 1px 2px rgba(30, 22, 14, .05), 0 6px 20px rgba(30, 22, 14, .06);
    --radius: 16px;
    --radius-sm: 10px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #17140f;
        --surface: #221d17;
        --surface-2: #1c1811;
        --ink: #ece4d8;
        --ink-soft: #a89c88;
        --ink-faint: #766c5b;
        --line: #332c22;
        --line-strong: #443a2b;
        --accent: #d98a6c;
        --accent-ink: #eaab8f;
        --accent-soft: #3a2a20;
        --fb: #7d9bc9;
        --ig: #d980ac;
        --pending: #5c5445;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 22px rgba(0, 0, 0, .35);
    }
}

:root[data-theme="dark"] {
    --bg: #17140f;
    --surface: #221d17;
    --surface-2: #1c1811;
    --ink: #ece4d8;
    --ink-soft: #a89c88;
    --ink-faint: #766c5b;
    --line: #332c22;
    --line-strong: #443a2b;
    --accent: #d98a6c;
    --accent-ink: #eaab8f;
    --accent-soft: #3a2a20;
    --fb: #7d9bc9;
    --ig: #d980ac;
    --pending: #5c5445;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 22px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 64px;
}

.faint { color: var(--ink-faint); font-size: 13px; }

.appbar {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line);
}
.appbar-inner {
    max-width: 880px; margin: 0 auto;
    padding: 16px 20px;
    display: flex; align-items: baseline; justify-content: space-between;
}
.brand { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }

.wrap {
    max-width: 880px; margin: 0 auto; padding: 24px 20px;
    display: flex; flex-direction: column; gap: 20px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
}
.card-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.card-head h2 { font-size: 16px; font-weight: 650; }

.social-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    margin-bottom: 18px;
}
.social-stat {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}
.social-label { color: var(--ink-soft); font-size: 13px; margin-bottom: 4px; }
.social-num { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }

.chart-box { position: relative; margin-bottom: 10px; }
#growth-chart { width: 100%; height: 180px; display: block; }
.chart-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
}
.chart-empty[hidden] { display: none; }

.legend { display: flex; gap: 16px; margin-bottom: 12px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-fb { background: var(--fb); }
.dot-ig { background: var(--ig); }

.note { color: var(--ink-faint); font-size: 12.5px; line-height: 1.5; }

.funnel {
    display: flex; align-items: stretch; gap: 10px; margin-bottom: 14px;
    flex-wrap: wrap;
}
.funnel-stage {
    flex: 1; min-width: 130px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 16px; text-align: center;
}
.stage-active { border-color: var(--accent); background: var(--accent-soft); }
.stage-pending { color: var(--pending); }
.stage-pending .stage-num { color: var(--pending); }
.stage-num { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.stage-label { font-size: 13px; color: var(--ink-soft); }
.stage-pending .stage-label { color: var(--ink-faint); }
.funnel-arrow {
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-faint); font-size: 16px; padding: 0 2px;
}

@media (max-width: 520px) {
    .social-grid { grid-template-columns: 1fr; }
    .funnel { flex-direction: column; }
    .funnel-arrow { transform: rotate(90deg); padding: 4px 0; }
}