/* APPKIT_OFFICIAL_THEME_PHP_CSS */
:root {
    --p: #2563eb;
    --s: #38bdf8;
    --a: #f59e0b;
    --bg: #f8fafc;
    --surface: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e5e7eb;

    --vk-primary: #2563eb;
    --vk-primary-dark: #38bdf8;
    --vk-secondary: #38bdf8;
    --vk-accent: #f59e0b;
    --vk-bg: #f8fafc;
    --vk-card: #ffffff;
    --vk-surface: #ffffff;
    --vk-text: #0f172a;
    --vk-muted: #64748b;
    --vk-border: #e5e7eb;

    --primary: #2563eb;
    --secondary: #38bdf8;
    --accent: #f59e0b;
    --background: #f8fafc;
    --panel: #ffffff;
    --brand: #2563eb;
    --brand2: #38bdf8;
    --grad1: #2563eb;
    --grad2: #38bdf8;

    --vk-shell-width: 520px;
    --vk-radius: 24px;
    --vk-bottom-height: 72px;
    --vk-shadow: 0 18px 45px rgba(15, 23, 42, .08);
    --vk-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body {
    background: var(--vk-bg);
    color: var(--vk-text);
    font-family: var(--vk-font-family);
}

.vk-app-shell {
    width: min(100%, var(--vk-shell-width));
}

.vk-card,
.card,
.panel {
    border-radius: var(--vk-radius);
    box-shadow: var(--vk-shadow);
}

.vk-brand-mark,
.brand-mark,
.app-brand-mark {
    background: linear-gradient(135deg, var(--vk-primary), var(--vk-primary-dark)) !important;
    color: #fff !important;
}

.vk-bottom-nav a.active {
    background: color-mix(in srgb, var(--vk-primary) 10%, white) !important;
    color: var(--vk-primary-dark) !important;
}