:root {
    --color-primary: #0b5ed7;
    --color-primary-contrast: #ffffff;
    --color-secondary: #198754;
    --color-bg: #f5f7fb;
    --color-surface: #ffffff;
    --color-text: #1f2937;
    --color-muted: #6b7280;
    --color-border: #e5e7eb;
}

body {
    background: linear-gradient(180deg, #f8fbff 0%, var(--color-bg) 100%);
    color: var(--color-text);
}

.app-header {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    box-shadow: 0 8px 24px rgba(11, 94, 215, 0.2);
}

.brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: #ffd166;
}

.card-surface {
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface);
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.07);
}

.text-muted-custom {
    color: var(--color-muted);
}


.offcanvas-bottom{
    padding-bottom: 105px;
    max-height: 90vh;
    height:auto !important;
}