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

    :root {
        --bg: #0a0a0f;
        --surface: #111118;
        --border: #1e1e2e;
        --accent: #00ffb3;
        --accent2: #7c6dff;
        --accent3: #ff6b6b;
        --text: #e2e2f0;
        --muted: #5a5a7a;
        --card: #13131f;
    }

    body {
        background: var(--bg);
        color: var(--text);
        font-family: 'Syne', sans-serif;
        min-height: 100vh;
        visibility: hidden;
    }

    body::before {
        content: '';
        position: fixed;
        inset: 0;
        background-image:
            linear-gradient(rgba(0, 255, 179, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 255, 179, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none;
        z-index: 0;
    }

    .container {
        position: relative;
        z-index: 1;
        max-width: 1300px;
        margin: 0 auto;
        padding: 48px 32px;
    }

    /* ── Header ─────────────────────────────────────────────────── */
    header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 48px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--border);
    }

    .header-left h1 {
        font-size: 2.4rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1;
    }

    .header-left h1 span {
        color: var(--accent);
    }

    .header-left p {
        margin-top: 8px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.75rem;
        color: var(--muted);
    }

    /* ── Nav ────────────────────────────────────────────────────── */
    .nav-links {
        display: flex;
        gap: 8px;
    }

    .nav-links a {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        text-decoration: none;
        padding: 6px 14px;
        border: 1px solid var(--border);
        border-radius: 4px;
        transition: all 0.2s;
    }

    .nav-links a:hover,
    .nav-links a.active {
        color: var(--accent);
        border-color: var(--accent);
        background: rgba(0, 255, 179, 0.05);
    }

    /* ── KPI Cards ──────────────────────────────────────────────── */
    .kpi-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-bottom: 32px;
    }

    .kpi {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 24px;
        position: relative;
        overflow: hidden;
        opacity: 0;
        transform: translateY(16px);
        animation: fadeUp 0.5s forwards;
    }

    .kpi:nth-child(1) {
        animation-delay: 0.1s;
    }

    .kpi:nth-child(2) {
        animation-delay: 0.2s;
    }

    .kpi:nth-child(3) {
        animation-delay: 0.3s;
    }

    .kpi::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
    }

    .kpi:nth-child(1)::after {
        background: var(--accent);
    }

    .kpi:nth-child(2)::after {
        background: var(--accent2);
    }

    .kpi:nth-child(3)::after {
        background: var(--accent3);
    }

    .kpi-label {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.65rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 12px;
    }

    .kpi-value {
        font-size: 2.2rem;
        font-weight: 800;
        letter-spacing: -0.04em;
        line-height: 1;
    }

    .kpi:nth-child(1) .kpi-value {
        color: var(--accent);
    }

    .kpi:nth-child(2) .kpi-value {
        color: var(--accent2);
    }

    .kpi:nth-child(3) .kpi-value {
        color: var(--accent3);
    }

    .kpi-sub {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.7rem;
        color: var(--muted);
        margin-top: 8px;
    }

    /* ── Chart containers ───────────────────────────────────────── */
    .chart-full {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 24px;
        margin-bottom: 16px;
        opacity: 0;
        transform: translateY(16px);
        animation: fadeUp 0.5s 0.35s forwards;
    }

    .chart-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .chart-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 24px;
        opacity: 0;
        transform: translateY(16px);
        animation: fadeUp 0.5s forwards;
    }

    .chart-card:nth-child(1) {
        animation-delay: 0.45s;
    }

    .chart-card:nth-child(2) {
        animation-delay: 0.55s;
    }

    .chart-card:nth-child(3) {
        animation-delay: 0.65s;
    }

    .chart-card:nth-child(4) {
        animation-delay: 0.75s;
    }

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

    .chart-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text);
    }

    .chart-badge {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.6rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
        background: rgba(0, 255, 179, 0.08);
        border: 1px solid rgba(0, 255, 179, 0.2);
        padding: 3px 8px;
        border-radius: 3px;
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.75rem;
    }

    .data-table th {
        text-align: left;
        color: var(--muted);
        font-size: 0.65rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 0 12px 12px 0;
        border-bottom: 1px solid var(--border);
    }

    .data-table td {
        padding: 10px 12px 10px 0;
        border-bottom: 1px solid var(--border);
        color: var(--text);
        vertical-align: top;
    }

    .data-table tr:last-child td {
        border-bottom: none;
    }

    .data-table td.tag {
        color: var(--accent2);
        white-space: nowrap;
        width: 60px;
    }

    .data-table td.clicks {
        color: var(--accent3);
        white-space: nowrap;
        text-align: right;
        width: 60px;
    }

    .data-table td.text {
        color: var(--muted);
        max-width: 0;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ── Range buttons ──────────────────────────────────────────── */
    .range-btns {
        display: flex;
        gap: 6px;
    }

    .range-btn {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.65rem;
        letter-spacing: 0.06em;
        padding: 4px 10px;
        border: 1px solid var(--border);
        border-radius: 3px;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        transition: all 0.15s;
    }

    .range-btn:hover,
    .range-btn.active {
        color: var(--accent);
        border-color: var(--accent);
        background: rgba(0, 255, 179, 0.06);
    }

    /* ── Loading state ──────────────────────────────────────────── */
    .loading {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.75rem;
        color: var(--muted);
        padding: 40px 0;
        justify-content: center;
    }

    .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        animation: pulse 1s infinite;
    }

    .dot:nth-child(2) {
        animation-delay: 0.2s;
        background: var(--accent2);
    }

    .dot:nth-child(3) {
        animation-delay: 0.4s;
        background: var(--accent3);
    }

    /* ── Footer ─────────────────────────────────────────────────── */
    footer {
        margin-top: 48px;
        padding-top: 24px;
        border-top: 1px solid var(--border);
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.65rem;
        color: var(--muted);
        display: flex;
        justify-content: space-between;
    }

    /* ── Export button ──────────────────────────────────────────── */
    .export-btn {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
        background: rgba(0, 255, 179, 0.08);
        border: 1px solid rgba(0, 255, 179, 0.2);
        padding: 6px 14px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .export-btn:hover {
        background: rgba(0, 255, 179, 0.15);
        border-color: var(--accent);
    }

    /* ── Print styles ───────────────────────────────────────────── */
    @media print {
        body::before {
            display: none;
        }

        .nav-links,
        .export-btn,
        .range-btns {
            display: none !important;
        }

        html,
        body {
            background: #0a0a0f !important;
            color: #e2e2f0 !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

        .kpi,
        .chart-full,
        .chart-card {
            break-inside: avoid;
            opacity: 1 !important;
            transform: none !important;
            animation: none !important;
            border: 1px solid #333;
        }

        body {
            background: #000000;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        footer {
            display: none;
        }
    }

    /* ── Animations ─────────────────────────────────────────────── */
    @keyframes fadeUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 0.3;
            transform: scale(0.8);
        }

        50% {
            opacity: 1;
            transform: scale(1);
        }
    }