:root {
    --csd-bg: #F3F5F2;
    --csd-surface: #FFFFFF;
    --csd-primary: #0E8A44;
    --csd-primary-tint: #E4F2E9;
    --csd-text: #14211A;
    --csd-text-muted: #5F6B63;
    --csd-text-faint: #93A099;
    --csd-border: #E2E7E1;
    --csd-border-strong: #BAC4BC;

    --csd-font-body: Barlow, Helvetica, Arial, sans-serif;
    --csd-font-display: "Barlow Condensed", sans-serif;
    --csd-font-mono: ui-monospace, Menlo, monospace;
}

body {
    background: var(--csd-bg);
    color: var(--csd-text);
    font-family: var(--csd-font-body);
}

/* Bottom tab bar — built on MudNavMenu/MudNavLink; this only handles the
   row layout and icon-over-label stacking that MudBlazor doesn't provide out of the box. */
.csd-bottom-nav {
    display: flex;
    flex-direction: row;
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--csd-surface);
    border-top: 1px solid var(--csd-border);
    padding: 6px;
}

.csd-bottom-nav .mud-nav-item {
    flex: 1 1 0;
    width: auto;
}

.csd-bottom-nav .mud-nav-link {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: auto;
    padding: 6px 2px;
    margin: 0 2px;
    text-align: center;
}

.csd-bottom-nav .mud-nav-link-icon {
    width: 22px;
    height: 22px;
}

.csd-bottom-nav .mud-nav-link-text {
    width: auto;
    margin: 0;
    text-align: center;
    font-size: 11px;
    line-height: 1.2;
}