/* =========================================================
   VereinPilot UI — zentrales Designsystem
   ========================================================= */

/* =========================================================
   1. Design Tokens
   ========================================================= */
:root {
    --vp-navy: #1b355e;
    --vp-navy-dark: #122340;
    --vp-navy-tint: #263e66;
    --vp-green: #0e9f6e;
    --vp-green-dark: #0b7f58;
    --vp-green-light: #e3f5ee;
    --vp-background: #f6f8fc;
    --vp-border: #e3e9f2;
    --vp-text: #24354f;
    --vp-text-muted: #5b6b84;
    --vp-danger: #c83f52;
    --vp-danger-light: #fbeaec;
    --vp-warning: #a96f08;
    --vp-warning-light: #fff6df;
    --vp-info: #286493;
    --vp-info-light: #eaf4fb;
    --vp-white: #fff;
    --vp-surface-soft: #fbfcfe;
    --vp-table-head: #f8fafc;
    --vp-neutral-light: #eef2f7;
    --vp-border-strong: #c9d4e4;
    --vp-placeholder: #8b98aa;
    --vp-on-dark-muted: rgba(255,255,255,.58);
    --vp-logout: #f6a1ad;
    --vp-radius: 14px;
    --vp-radius-sm: 10px;
    --vp-shadow: 0 10px 30px -12px rgba(18, 35, 64, .18);
    --vp-space-xs: 4px;
    --vp-space-sm: 8px;
    --vp-space-md: 16px;
    --vp-space-lg: 24px;
    --vp-space-xl: 32px;
    --vp-space-2xl: 48px;
    --vp-sidebar-width: 256px;
    --vp-navbar-height: 64px;
    /* Legacy-Kompatibilität für Seiten, die noch --app-primary nutzen. */
    --app-primary: var(--vp-green);
}

/* =========================================================
   2. Reset / Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; }
body {
    margin: 0;
    background: var(--vp-background);
    color: var(--vp-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--vp-navy); text-decoration: none; }
a:hover { color: var(--vp-green-dark); }
img { max-width: 100%; height: auto; }

/* =========================================================
   3. Typography
   ========================================================= */
h1, h2, h3, h4, h5, h6 { color: var(--vp-text); font-weight: 700; line-height: 1.25; }
h1 { font-size: 2rem; letter-spacing: -.025em; }
h2 { font-size: 1.55rem; letter-spacing: -.02em; }
h3 { font-size: 1.2rem; }
h4, h5, h6 { font-size: 1rem; }
.text-muted, .text-secondary { color: var(--vp-text-muted) !important; }
.text-primary { color: var(--vp-navy) !important; }
.text-success { color: var(--vp-green-dark) !important; }
.text-danger { color: var(--vp-danger) !important; }

/* =========================================================
   4. Layout
   ========================================================= */
main {
    min-height: calc(100vh - var(--vp-navbar-height));
    padding: calc(var(--vp-navbar-height) + var(--vp-space-xl)) var(--vp-space-xl) var(--vp-space-2xl) !important;
    margin-left: var(--vp-sidebar-width);
    background: var(--vp-background);
}
#main-content-area { width: 100%; max-width: 1480px; margin: 0 auto !important; padding: 0 !important; }
.vp-page-header, .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--vp-space-lg); margin-bottom: var(--vp-space-xl); }
.vp-page-header h1, .vp-page-header h2, .page-header h1, .page-header h2 { margin: 0; }
.vp-page-header p, .page-header p { margin: var(--vp-space-sm) 0 0; color: var(--vp-text-muted); }
.row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }

/* =========================================================
   5. Navbar
   ========================================================= */
#main-navbar { z-index: 1040; min-height: var(--vp-navbar-height); height: var(--vp-navbar-height); padding: 0 var(--vp-space-xl); background: var(--vp-white) !important; border-bottom: 1px solid var(--vp-border); box-shadow: none !important; }
#main-navbar .container-fluid { height: 100%; padding: 0; }
#main-navbar .navbar-brand { display: inline-flex; align-items: center; color: var(--vp-navy) !important; font-size: 1.1rem; font-weight: 750; letter-spacing: -.02em; }
#main-navbar .navbar-brand::before { content: ""; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--vp-green); }
.vp-navbar-search { display: flex; align-items: center; width: min(430px, 42vw); height: 42px; margin-left: auto; margin-right: var(--vp-space-lg); padding: 0 14px; border: 1px solid var(--vp-border); border-radius: var(--vp-radius-sm); color: var(--vp-text-muted); background: var(--vp-surface-soft); }
.vp-navbar-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--vp-text); }
.vp-navbar-search input::placeholder { color: var(--vp-placeholder); }
.vp-navbar-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--vp-text-muted); }
.vp-navbar-icon:hover { background: var(--vp-background); color: var(--vp-navy); }
.vp-user-menu { display: inline-flex; align-items: center; gap: 10px; margin-left: 10px; color: var(--vp-text); }
.vp-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--vp-green-light); color: var(--vp-green-dark); font-size: .85rem; font-weight: 700; }
.vp-user-menu small { display: block; color: var(--vp-text-muted); font-size: .72rem; }

/* =========================================================
   6. Sidebar
   ========================================================= */
#sidenav-1 { position: fixed; z-index: 1050; top: 0; left: 0; width: var(--vp-sidebar-width); height: 100vh; padding: 18px 14px 24px !important; overflow-y: auto; background: var(--vp-navy-dark) !important; border: 0 !important; box-shadow: none !important; transform: translateX(0) !important; transition: transform .2s ease; }
#sidenav-1 .user-info-box { display: flex; align-items: center; gap: 11px; margin: 0 4px 22px; padding: 5px 7px 20px; text-align: left; background: transparent !important; border-bottom: 1px solid rgba(255,255,255,.11); }
#sidenav-1 .user-info-box .avatar { margin: 0 !important; }
#sidenav-1 .user-info-box .avatar i { color: var(--vp-green) !important; font-size: 1.9rem; }
#sidenav-1 .user-info-box h6 { margin: 0; color: var(--vp-white); font-size: .87rem; }
#sidenav-1 .user-info-box small { color: var(--vp-on-dark-muted); font-size: .74rem; }
#sidenav-1 .sidenav-menu { padding: 0 0 60px !important; list-style: none; }
#sidenav-1 .sidenav-item { margin: 2px 0; list-style: none; }
#sidenav-1 .sidenav-link { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-left: 3px solid transparent; border-radius: 8px; color: rgba(255,255,255,.72) !important; font-size: .88rem; font-weight: 500; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
#sidenav-1 .sidenav-link:hover, #sidenav-1 .sidenav-link:focus, #sidenav-1 .sidenav-link.active { color: var(--vp-white) !important; background: rgba(255,255,255,.10) !important; border-left-color: var(--vp-green); }
#sidenav-1 .sidenav-link > i:first-child { width: 21px; margin-right: 12px !important; color: rgba(255,255,255,.58); }
#sidenav-1 .sidenav-link:hover > i:first-child, #sidenav-1 .sidenav-link.active > i:first-child { color: var(--vp-green); }
#sidenav-1 .sidenav-link .rotate-icon { color: rgba(255,255,255,.42); font-size: .7rem; }
#sidenav-1 .sidenav-collapse { padding-left: 22px; }
#sidenav-1 .sidenav-collapse .sidenav-link { min-height: 38px; padding-left: 15px; font-size: .82rem; }
#sidenav-1 .sidenav-heading { margin: 20px 7px 7px !important; padding: 0 !important; color: rgba(255,255,255,.42) !important; font-size: .68rem !important; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
#sidenav-1 .logout-link i, #sidenav-1 .logout-link span { color: var(--vp-logout) !important; }
#mobile-backdrop { background: rgba(18,35,64,.56); z-index: 1045; }

/* =========================================================
   7. Cards
   ========================================================= */
.vp-card, .card { background: var(--vp-white); border: 1px solid var(--vp-border) !important; border-radius: var(--vp-radius) !important; box-shadow: var(--vp-shadow) !important; }
.vp-card-header, .card-header { padding: 18px 24px; background: var(--vp-white) !important; border-bottom: 1px solid var(--vp-border) !important; border-radius: var(--vp-radius) var(--vp-radius) 0 0 !important; }
.vp-card-body, .card-body { padding: 24px; }
.vp-card-footer, .card-footer { padding: 16px 24px; background: var(--vp-white); border-top: 1px solid var(--vp-border); }
.card-title { color: var(--vp-text); }
.list-group-item { padding: 16px 24px; background: var(--vp-white); border-color: var(--vp-border); }

/* =========================================================
   8. Buttons
   ========================================================= */
.vp-btn, .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; gap: 8px; padding: 9px 16px; border: 1px solid transparent; border-radius: 10px; font-size: .88rem; font-weight: 650; line-height: 1.2; box-shadow: none !important; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.vp-btn-primary, .btn-primary, .btn-success { color: var(--vp-white) !important; background: var(--vp-green) !important; border-color: var(--vp-green) !important; }
.vp-btn-primary:hover, .btn-primary:hover, .btn-success:hover { background: var(--vp-green-dark) !important; border-color: var(--vp-green-dark) !important; }
.vp-btn-secondary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary { color: var(--vp-navy) !important; background: var(--vp-white) !important; border-color: var(--vp-border) !important; }
.vp-btn-secondary:hover, .btn-secondary:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover { color: var(--vp-navy) !important; background: var(--vp-background) !important; border-color: var(--vp-border-strong) !important; }
.vp-btn-tertiary, .btn-link { color: var(--vp-navy) !important; background: transparent !important; border-color: transparent !important; }
.vp-btn-danger, .btn-danger, .btn-outline-danger { color: var(--vp-danger) !important; background: var(--vp-danger-light) !important; border-color: transparent !important; }
.btn-sm { min-height: 36px; padding: 7px 12px; font-size: .82rem; }
.vp-btn-icon, .btn-icon { width: 42px; min-width: 42px; padding: 0; }

/* =========================================================
   9. Forms
   ========================================================= */
label, .form-label, .vp-label { margin-bottom: 6px; color: var(--vp-text); font-size: .86rem; font-weight: 650; }
.form-control, .form-select, .vp-input, .vp-select, .vp-textarea { min-height: 45px; padding: 9px 12px; color: var(--vp-text); background: var(--vp-white); border: 1px solid var(--vp-border); border-radius: var(--vp-radius-sm); box-shadow: none !important; }
.form-control:focus, .form-select:focus, .vp-input:focus, .vp-select:focus, .vp-textarea:focus { border-color: var(--vp-green); box-shadow: 0 0 0 3px rgba(14,159,110,.12) !important; }
textarea.form-control, .vp-textarea { min-height: 100px; }
.form-text, .vp-help { color: var(--vp-text-muted); font-size: .8rem; }
.vp-form-group { margin-bottom: var(--vp-space-lg); }
.vp-error { color: var(--vp-danger); font-size: .82rem; }
.form-check-input:checked { background-color: var(--vp-green); border-color: var(--vp-green); }

/* =========================================================
   10. Tables
   ========================================================= */
.table-responsive { overflow-x: auto; border-radius: var(--vp-radius); }
.table, .vp-table { width: 100%; margin-bottom: 0; color: var(--vp-text); vertical-align: middle; background: var(--vp-white); }
.table > :not(caption) > * > *, .vp-table > :not(caption) > * > * { padding: 14px 16px; border-bottom: 1px solid var(--vp-border); border-left: 0; border-right: 0; }
.table thead th, .vp-table thead th { color: var(--vp-text-muted); background: var(--vp-table-head); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.table tbody tr:hover, .vp-table tbody tr:hover { background: var(--vp-surface-soft); }
.table-striped > tbody > tr:nth-of-type(odd) > *, .table-light > * { --bs-table-bg: transparent; background: transparent; }

/* =========================================================
   11. Badges
   ========================================================= */
.vp-badge, .badge { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; line-height: 1.1; }
.vp-badge-success, .badge.bg-success { color: var(--vp-green-dark) !important; background: var(--vp-green-light) !important; }
.vp-badge-neutral, .badge.bg-light, .badge.bg-secondary { color: var(--vp-text-muted) !important; background: var(--vp-neutral-light) !important; }
.vp-badge-warning, .badge.bg-warning { color: var(--vp-warning) !important; background: var(--vp-warning-light) !important; }
.vp-badge-danger, .badge.bg-danger { color: var(--vp-danger) !important; background: var(--vp-danger-light) !important; }
.vp-badge-info, .badge.bg-info, .badge.bg-primary { color: var(--vp-info) !important; background: var(--vp-info-light) !important; }

/* =========================================================
   12. Alerts
   ========================================================= */
.vp-alert, .alert { margin-bottom: var(--vp-space-lg); padding: 14px 16px; color: var(--vp-text); background: var(--vp-white); border: 1px solid var(--vp-border) !important; border-left: 4px solid var(--vp-info) !important; border-radius: var(--vp-radius-sm) !important; box-shadow: none !important; }
.vp-alert-container { position: fixed; top: calc(var(--vp-navbar-height) + 16px); right: 20px; z-index: 1060; width: min(360px, calc(100vw - 32px)); }
.alert-success { background: var(--vp-green-light) !important; border-left-color: var(--vp-green) !important; }
.alert-warning { background: var(--vp-warning-light) !important; border-left-color: var(--vp-warning) !important; }
.alert-danger { background: var(--vp-danger-light) !important; border-left-color: var(--vp-danger) !important; }
.alert-info { background: var(--vp-info-light) !important; border-left-color: var(--vp-info) !important; }

/* =========================================================
   13. Modals
   ========================================================= */
.modal-content { overflow: hidden; background: var(--vp-white); border: 1px solid var(--vp-border); border-radius: 16px; box-shadow: 0 24px 70px -20px rgba(18,35,64,.35); }
.modal-header, .modal-footer { padding: 18px 24px; border-color: var(--vp-border); }
.modal-body { padding: 24px; }
.modal-backdrop { background: rgba(18,35,64,.48); }

/* =========================================================
   14. Dashboard
   ========================================================= */
.vp-dashboard { max-width: 1280px; margin: 0 auto; }
.vp-dashboard-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.vp-dashboard-header h1 { margin: 0; font-size: 1.9rem; }
.vp-dashboard-header p { margin: 7px 0 0; color: var(--vp-text-muted); }
.vp-dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.vp-stat-card { position: relative; min-height: 148px; padding: 22px; }
.vp-stat-card .vp-stat-icon { position: absolute; top: 20px; right: 20px; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: var(--vp-green-dark); background: var(--vp-green-light); }
.vp-stat-label { color: var(--vp-text-muted); font-size: .8rem; font-weight: 650; }
.vp-stat-value { margin: 12px 0 5px; color: var(--vp-navy); font-size: 1.65rem; font-weight: 750; letter-spacing: -.03em; }
.vp-stat-meta { color: var(--vp-text-muted); font-size: .78rem; }
.vp-dashboard-main-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .75fr) minmax(220px, .65fr); gap: 16px; margin-bottom: 24px; }
.vp-dashboard-card { min-width: 0; }
.vp-dashboard-card-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 16px; border-bottom: 1px solid var(--vp-border); }
.vp-dashboard-card-header h2 { margin: 0; font-size: 1rem; }
.vp-task-list, .vp-action-list { padding: 8px 22px 14px; }
.vp-task, .vp-action { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--vp-border); color: var(--vp-text); }
.vp-task:last-child, .vp-action:last-child { border-bottom: 0; }
.vp-task i, .vp-action i { width: 20px; color: var(--vp-green); text-align: center; }
.vp-event-preview { padding: 20px 22px; }
.vp-event-date { color: var(--vp-green-dark); font-size: .78rem; font-weight: 700; }
.vp-event-preview h3 { margin: 5px 0; font-size: 1.1rem; }
.vp-members-card { overflow: hidden; }

/* =========================================================
   15. Utilities
   ========================================================= */
.shadow-sm, .shadow { box-shadow: var(--vp-shadow) !important; }
.border-0 { border: 1px solid var(--vp-border) !important; }
.bg-white { background: var(--vp-white) !important; }
.bg-light { background: var(--vp-background) !important; }
.opacity-25 { opacity: .48 !important; }
.table-actions { white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -50px; z-index: 2000; padding: 10px 14px; color: var(--vp-white); background: var(--vp-navy); border-radius: 8px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid rgba(14,159,110,.30) !important; outline-offset: 2px; }

/* =========================================================
   16. Öffentlicher Demo-Einstieg
   ========================================================= */
.vp-guest-body { background: var(--vp-background); }
.vp-guest-body .vp-alert-container { top: 16px; }
.vp-guest-main { min-height: 100vh; margin-left: 0 !important; padding: 32px 24px !important; background: var(--vp-background); }
.vp-guest-content { max-width: 100%; margin: 0 auto !important; padding: 0 !important; }
.vp-auth-main { min-height: 100vh; margin-left: 0 !important; padding: 0 24px 24px !important; background: var(--vp-background); }
.vp-auth-content { max-width: none !important; margin: 0 !important; padding: 0 !important; }
.vp-auth-page { display: flex; flex-direction: column; min-height: 100vh; }
.vp-auth-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100%, 1180px); margin: 0 auto; padding: 28px 0; }
.vp-auth-brand { color: var(--vp-navy); font-size: 1.1rem; font-weight: 750; letter-spacing: -.02em; }
.vp-auth-brand::before { content: ""; display: inline-block; width: 9px; height: 9px; margin: 0 10px 2px 0; border-radius: 50%; background: var(--vp-green); }
.vp-link { color: var(--vp-navy); text-decoration: underline; text-underline-offset: 3px; }
.vp-link:hover { color: var(--vp-green-dark); }
.vp-auth-website-link { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px 0; color: var(--vp-text-muted); font-size: .84rem; }
.vp-auth-website-link:hover { color: var(--vp-navy); }
.vp-auth-container { display: flex; flex: 1; flex-direction: column; align-items: center; width: 100%; max-width: 480px; margin: 0 auto; padding: clamp(56px, 10vh, 110px) 0 48px; text-align: center; }
.vp-auth-intro { margin-bottom: 28px; }
.vp-auth-intro h1 { margin: 0 0 10px; color: var(--vp-navy); font-size: clamp(1.8rem, 3vw, 2.2rem); }
.vp-auth-intro p { margin: 0; color: var(--vp-text); font-size: 1.05rem; }
.vp-auth-intro span { display: block; margin-top: 8px; color: var(--vp-text-muted); font-size: .88rem; }
.vp-auth-card { width: 100%; padding: 32px 40px; text-align: left; }
.vp-auth-form { display: flex; flex-direction: column; }
.vp-auth-field { margin-bottom: 20px; }
.vp-auth-field .vp-label { display: block; }
.vp-auth-field .vp-input { width: 100%; height: 45px; }
.vp-auth-submit { width: 100%; margin-top: 4px; }
.vp-auth-forgot { align-self: center; margin-top: 18px; padding: 4px 8px; color: var(--vp-text-muted) !important; font-size: .84rem; }
.vp-auth-forgot:hover { color: var(--vp-navy) !important; }
.vp-auth-request { display: flex; flex-direction: column; gap: 3px; margin: 24px 0 0; color: var(--vp-text-muted); font-size: .88rem; }
.vp-auth-request .vp-link { padding: 4px 8px; font-weight: 700; }
.vp-auth-notice { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin-top: 30px; padding: 14px 16px; color: var(--vp-text); background: var(--vp-green-light); border: 1px solid var(--vp-border); border-radius: var(--vp-radius-sm); text-align: left; }
.vp-auth-notice > i { margin-top: 3px; color: var(--vp-navy); }
.vp-auth-notice strong { display: block; color: var(--vp-navy); font-size: .84rem; }
.vp-auth-notice p { margin: 3px 0 0; color: var(--vp-text-muted); font-size: .78rem; line-height: 1.45; }
.vp-auth-footer { display: flex; align-items: center; justify-content: center; gap: 18px; width: min(100%, 1180px); margin: 0 auto; padding: 20px 0 4px; color: var(--vp-text-muted); font-size: .78rem; }
.vp-auth-footer nav { display: inline-flex; gap: 16px; }
.vp-auth-footer a { color: var(--vp-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.vp-auth-footer a:hover { color: var(--vp-navy); }
.vp-auth-logged-card { max-width: 520px; }

/* =========================================================
   17. Responsive
   ========================================================= */
@media (max-width: 1199px) {
    :root { --vp-sidebar-width: 240px; }
    main { padding-right: 24px !important; padding-left: 24px !important; }
    .vp-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vp-dashboard-main-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vp-dashboard-main-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
    #main-navbar { padding: 0 16px; }
    #mobile-toggler { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 10px; padding: 0; color: var(--vp-navy); background: transparent; border: 1px solid var(--vp-border) !important; border-radius: 10px; }
    #sidenav-1 { transform: translateX(-100%) !important; }
    #sidenav-1.show-mobile { transform: translateX(0) !important; box-shadow: 12px 0 32px rgba(18,35,64,.22) !important; }
    main { margin-left: 0; padding: calc(var(--vp-navbar-height) + 24px) 20px 32px !important; }
    .vp-navbar-search { width: 42px; margin-right: 4px; padding: 0; border: 0; background: transparent; }
    .vp-navbar-search input { display: none; }
    .vp-navbar-search i { margin: 0 auto; }
    .vp-user-menu > div:not(.vp-avatar) { display: none; }
}
@media (max-width: 767.98px) {
    main { padding-right: 16px !important; padding-left: 16px !important; }
    .vp-dashboard-header, .vp-page-header, .page-header { align-items: stretch; flex-direction: column; margin-bottom: 22px; }
    .vp-dashboard-header h1 { font-size: 1.6rem; }
    .vp-dashboard-header .btn { width: 100%; }
    .vp-dashboard-grid, .vp-dashboard-main-grid { grid-template-columns: 1fr; }
    .vp-dashboard-main-grid > :first-child { grid-column: auto; }
    .vp-card-body, .card-body { padding: 16px; }
    .vp-card-header, .card-header { padding: 16px; }
    .table > :not(caption) > * > *, .vp-table > :not(caption) > * > * { padding: 12px; }
    h1 { font-size: 1.65rem; }
    .vp-guest-main { padding: 16px !important; }
    .vp-auth-main { padding: 0 16px 16px !important; }
    .vp-auth-header { padding: 20px 0; }
    .vp-auth-website-label { display: none; }
    .vp-auth-container { padding: 42px 0 32px; }
    .vp-auth-card { padding: 24px; }
    .vp-auth-footer { flex-direction: column; gap: 8px; padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media (min-width: 992px) {
    body.sidenav-open-lg { padding-left: 0 !important; }
    #mobile-toggler { display: none !important; }
}