:root {
    --wf-black: #070a08;
    --wf-obsidian: #0f1512;
    --wf-panel: #141c18;
    --wf-panel-soft: #1b2722;
    --wf-green: #6ee37a;
    --wf-green-strong: #47cc59;
    --wf-green-deep: #2f943d;
    --wf-text: #ecf2ee;
    --wf-muted: #96a79d;
    --wf-border: rgba(110, 227, 122, 0.16);
}

html,
body {
    font-family: 'Inter', sans-serif;
    background: radial-gradient(circle at 8% 0%, rgba(110, 227, 122, 0.08), transparent 36%), var(--wf-black);
    color: var(--wf-text);
}

h1, h2, h3, h4, h5, .brand-text {
    font-family: 'Barlow', sans-serif;
    letter-spacing: .3px;
}

.wf-app .app-main,
.wf-app .app-content-header,
.wf-app .app-content,
.wf-app .content-wrapper {
    background: transparent !important;
}

.wf-header {
    background: linear-gradient(90deg, #0f1512 0%, #13201a 100%) !important;
    border-bottom: 1px solid var(--wf-border) !important;
    backdrop-filter: blur(6px);
}

.wf-header .nav-link { color: #d7e5db; }

.app-sidebar {
    background: linear-gradient(180deg, #0a0f0d 0%, #101913 100%) !important;
    border-right: 1px solid var(--wf-border);
}

.brand-link {
    color: var(--wf-green) !important;
    font-weight: 800;
    font-size: 1.1rem;
}

.sidebar-menu .nav-link {
    color: #d2dfd6;
    border-radius: .65rem;
    margin: .15rem .35rem;
    padding: .58rem .75rem;
    transition: .18s ease;
}

.sidebar-menu .nav-link .nav-icon {
    color: #b6ccb9;
}

.sidebar-menu .nav-link.active,
.sidebar-menu .nav-link:hover {
    color: #08100b;
    background: linear-gradient(90deg, var(--wf-green) 0%, #9cf3a5 100%);
}

.sidebar-menu .nav-link.active .nav-icon,
.sidebar-menu .nav-link:hover .nav-icon {
    color: #08100b;
}

.wf-page-title-wrap {
    padding-top: 1.2rem;
    padding-bottom: .6rem;
}

.wf-page-title {
    font-size: 2rem;
    font-weight: 700;
    color: #f1fff3;
}

.card,
.wf-card {
    background: linear-gradient(180deg, rgba(20, 28, 24, 0.98) 0%, rgba(16, 24, 20, 0.98) 100%);
    border: 1px solid var(--wf-border);
    border-radius: 18px;
    color: var(--wf-text);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.wf-kpi-value {
    font-family: 'Barlow', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--wf-green);
    line-height: 1;
}

.text-secondary,
small,
.form-text {
    color: var(--wf-muted) !important;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: #e8f1eb;
    --bs-table-border-color: rgba(255,255,255,.06);
}

.table thead th {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #a8b8ae;
    font-weight: 700;
    border-bottom-width: 1px;
}

.table tbody tr:hover {
    --bs-table-accent-bg: rgba(110, 227, 122, 0.08);
}

.form-control,
.form-select {
    background: #0f1814;
    border-color: rgba(255,255,255,.09);
    color: #ecf2ee;
    border-radius: 12px;
}

.form-control::placeholder { color: #829288; }

.form-control:focus,
.form-select:focus {
    background: #101b16;
    border-color: var(--wf-green);
    box-shadow: 0 0 0 .2rem rgba(110, 227, 122, .15);
    color: #fff;
}

.btn-wfitness {
    background: linear-gradient(90deg, var(--wf-green-strong) 0%, var(--wf-green) 100%);
    border: none;
    color: #07110a;
    font-weight: 700;
    border-radius: 12px;
}

.btn-wfitness:hover {
    filter: brightness(1.03);
    color: #07110a;
}

.btn-outline-wfitness {
    border-color: var(--wf-green-deep);
    color: var(--wf-green);
    border-radius: 12px;
}

.btn-outline-wfitness:hover {
    background: rgba(110, 227, 122, .12);
    color: #d9ffe0;
    border-color: var(--wf-green);
}

.wf-pill {
    border: 1px solid var(--wf-border);
    color: #bee9c3;
    background: rgba(110, 227, 122, .08);
    border-radius: 999px;
    padding: .35rem .75rem;
    font-size: .78rem;
}

@media (max-width: 768px) {
    .wf-page-title {
        font-size: 1.55rem;
    }

    .wf-kpi-value {
        font-size: 1.6rem;
    }
}