:root {

    --tg-red: #c8102e;
    --tg-dark: #1f2937;
    --tg-bg: #f5f6f8;
    --tg-border: #e5e7eb;

}

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {

    font-family: Inter, Arial, sans-serif;

    background: var(--tg-bg);

}

.topbar {

    height: 70px;

    background: #ffffff;

    border-bottom: 1px solid var(--tg-border);

    display: flex;

    align-items: center;

    padding: 0 24px;

}

.logo {

    font-size: 22px;

    font-weight: 700;

    color: var(--tg-red);

}

.container {

    padding: 30px;

}

.card-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px, 1fr)
        );

    gap: 20px;

    margin-top: 20px;

}

.dashboard-card {

    background: white;

    padding: 24px;

    border-radius: 18px;

    box-shadow:
        0 4px 20px rgba(0,0,0,.06);

}

.dashboard-card h3 {

    margin-bottom: 10px;

}

.dashboard-card span {

    font-size: 36px;

    font-weight: bold;

}