/* ============================================================
   VadeoCheck – brand styles (anthracite + Vadeo green)
   ============================================================ */
:root {
    --vc-ink: #231F20;
    --vc-ink-2: #3A3536;
    --vc-muted: #656262;
    --vc-green: #34A845;
    --vc-green-light: #65C971;
    --vc-green-soft: #E7F6E9;
    --vc-red: #DC2626;
    --vc-red-soft: #FDECEC;
    --vc-amber: #E8A317;
    --vc-amber-soft: #FDF3DE;
    --vc-blue: #2563EB;
    --vc-blue-soft: #E8EFFD;
    --vc-card: var(--mud-palette-surface);
    --vc-line: var(--mud-palette-lines-default);
    --vc-shadow: 0 1px 2px rgba(35, 31, 32, .05), 0 6px 24px rgba(35, 31, 32, .06);
    --vc-radius: 16px;
}

body { background: var(--mud-palette-background); -webkit-font-smoothing: antialiased; }
.vc-dark { --vc-green-soft: rgba(101, 201, 113, .14); --vc-red-soft: rgba(248, 113, 113, .14); --vc-amber-soft: rgba(251, 191, 36, .14); --vc-blue-soft: rgba(96, 165, 250, .14); --vc-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); }

.text-right { text-align: right; }
.clickable { cursor: pointer; }

/* ---------- Layout ---------- */
.vc-content { padding-top: 24px; padding-bottom: 48px; }

.vc-appbar.mud-appbar {
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--vc-line);
    color: var(--mud-palette-appbar-text);
}
.vc-appbar-date { align-items: center; gap: 8px; margin-left: 8px; color: var(--mud-palette-text-secondary); font-weight: 600; font-size: .9rem; }
.vc-lang-btn { font-weight: 700 !important; min-width: 0 !important; }
.vc-lang-code { display: inline-block; width: 28px; font-weight: 800; color: var(--vc-green); }

.vc-user { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; margin-left: 4px; border-radius: 999px; cursor: pointer; transition: background .15s; }
.vc-user:hover { background: var(--mud-palette-action-default-hover); }
.vc-user-text { flex-direction: column; line-height: 1.15; }
.vc-user-name { font-weight: 700; font-size: .9rem; }
.vc-user-role { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.vc-logout-form { margin: 0; }
.vc-logout-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 20px; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--mud-palette-error); }
.vc-logout-btn:hover { background: var(--mud-palette-action-default-hover); }

/* ---------- Drawer ---------- */
.vc-drawer.mud-drawer { background: linear-gradient(180deg, #262122 0%, #1A1617 100%); border-right: 0; }
.vc-dark .vc-drawer.mud-drawer { background: linear-gradient(180deg, #161213 0%, #0E0B0C 100%); }
.vc-drawer .mud-drawer-content { display: flex; flex-direction: column; }
.vc-drawer-brand { height: 64px; display: flex; align-items: center; padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,.06); }
.vc-drawer-brand img { display: block; }
.vc-nav { padding: 8px 12px; flex: 1; overflow-y: auto; }
.vc-nav-section { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8C8686; padding: 18px 12px 6px; }
.vc-nav .mud-nav-link { border-radius: 10px !important; margin: 2px 0; color: #D9D5D5; font-weight: 600; font-size: .92rem; padding: 9px 12px; }
.vc-nav .mud-nav-link .mud-nav-link-icon { color: #9C9696; }
.vc-nav .mud-nav-link:hover:not(.mud-nav-link-disabled) { background: rgba(255,255,255,.06); color: #fff; }
.vc-nav .mud-nav-link.active:not(.mud-nav-link-disabled) { background: linear-gradient(90deg, rgba(101,201,113,.22), rgba(101,201,113,.08)); color: #fff; box-shadow: inset 3px 0 0 var(--vc-green-light); }
.vc-nav .mud-nav-link.active .mud-nav-link-icon { color: var(--vc-green-light); }
.vc-drawer-footer { display: flex; align-items: center; gap: 8px; padding: 14px 22px; font-size: .72rem; color: #8C8686; border-top: 1px solid rgba(255,255,255,.06); }

/* ---------- Page header ---------- */
.vc-page-header { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 20px; }
.vc-page-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--vc-green-light), var(--vc-green)); box-shadow: 0 6px 16px rgba(52,168,69,.28); flex: none; }
.vc-page-titles h1 { margin: 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--mud-palette-text-primary); }
.vc-page-titles p { margin: 2px 0 0; color: var(--mud-palette-text-secondary); font-size: .92rem; }
.vc-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- Cards ---------- */
.mud-paper-outlined, .vc-card {
    background: var(--vc-card);
    border: 1px solid var(--vc-line) !important;
    border-radius: var(--vc-radius) !important;
    box-shadow: var(--vc-shadow);
}
.vc-card { padding: 20px; }
.vc-card-fill { height: 100%; }
.vc-card-flush { padding: 0; overflow: hidden; }
.vc-card-map { padding: 0; overflow: hidden; min-height: 420px; }
.vc-card-map .vc-map { min-height: 420px; border-radius: 0; }
.vc-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vc-card-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.vc-badge { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; font-weight: 800; font-size: .8rem; background: var(--vc-green-soft); color: var(--vc-green); }
.vc-badge-red { background: var(--vc-red-soft); color: var(--vc-red); }
.mud-dialog { border-radius: 18px !important; }
.mud-button-root { border-radius: 10px !important; }
.mud-button-filled.mud-button-filled-primary { box-shadow: 0 4px 12px rgba(52,168,69,.25); }

/* ---------- Dashboard hero ---------- */
.vc-hero {
    position: relative; overflow: hidden; display: flex; align-items: stretch; min-height: 210px;
    border-radius: 22px; margin-bottom: 20px; color: #fff;
    background: radial-gradient(120% 140% at 85% 20%, rgba(101,201,113,.35) 0%, rgba(101,201,113,0) 45%), linear-gradient(120deg, #2C2627 0%, #1C1819 60%, #141112 100%);
    box-shadow: 0 10px 30px rgba(35,31,32,.18);
}
.vc-hero-text { position: relative; z-index: 1; padding: 28px 32px; max-width: 620px; }
.vc-hero-kicker { color: var(--vc-green-light); font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
.vc-hero h1 { margin: 6px 0 6px; font-size: 2rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.vc-hero p { margin: 0 0 18px; color: #CFCACA; font-size: 1rem; }
.vc-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vc-btn-ghost.mud-button-outlined { color: #fff !important; border-color: rgba(255,255,255,.35) !important; }
.vc-btn-ghost.mud-button-outlined:hover { background: rgba(255,255,255,.08) !important; }
.vc-hero-art { position: absolute; right: 0; top: 0; height: 100%; width: 46%; object-fit: cover; object-position: right center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%); opacity: .95; }
@media (max-width: 900px) { .vc-hero-art { opacity: .25; width: 100%; } .vc-hero h1 { font-size: 1.6rem; } }

/* ---------- Stat cards ---------- */
.vc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
@media (max-width: 1100px) { .vc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vc-stat { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--vc-card); border: 1px solid var(--vc-line); border-radius: var(--vc-radius); box-shadow: var(--vc-shadow); position: relative; overflow: hidden; }
.vc-stat::after { content: ""; position: absolute; right: -24px; bottom: -40px; width: 110px; height: 110px; border-radius: 55px 55px 0 0; opacity: .08; background: currentColor; }
.vc-stat-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.vc-stat-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--mud-palette-text-primary); }
.vc-stat-title { margin-top: 4px; font-size: .85rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.vc-tone-green { color: var(--vc-green); } .vc-tone-green .vc-stat-icon { background: var(--vc-green-soft); color: var(--vc-green); }
.vc-tone-blue { color: var(--vc-blue); } .vc-tone-blue .vc-stat-icon { background: var(--vc-blue-soft); color: var(--vc-blue); }
.vc-tone-amber { color: var(--vc-amber); } .vc-tone-amber .vc-stat-icon { background: var(--vc-amber-soft); color: var(--vc-amber); }
.vc-tone-red { color: var(--vc-red); } .vc-tone-red .vc-stat-icon { background: var(--vc-red-soft); color: var(--vc-red); }

/* ---------- People ---------- */
.vc-avatar { display: inline-grid; place-items: center; border-radius: 50%; font-weight: 800; letter-spacing: .02em; flex: none; user-select: none; }
.vc-site-group + .vc-site-group { margin-top: 14px; }
.vc-site-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .85rem; color: var(--mud-palette-text-secondary); padding: 4px 0 6px; border-bottom: 1px dashed var(--vc-line); margin-bottom: 4px; }
.vc-site-count { margin-left: auto; font-size: .75rem; font-weight: 800; color: var(--vc-green); background: var(--vc-green-soft); padding: 1px 8px; border-radius: 999px; }
.vc-person-row { display: flex; align-items: center; gap: 12px; padding: 8px 8px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .12s; }
.vc-person-row:hover { background: var(--mud-palette-action-default-hover); }
.vc-person-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vc-person-name { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-person-sub { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.vc-worker-cell { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }

/* ---------- Times & status ---------- */
.vc-time-pill { display: inline-block; padding: 2px 9px; border-radius: 8px; font-weight: 800; font-size: .86rem; font-variant-numeric: tabular-nums; }
.vc-in { background: var(--vc-green-soft); color: var(--vc-green); }
.vc-out { background: var(--vc-red-soft); color: var(--vc-red); }
.vc-open { background: var(--vc-blue-soft); color: var(--vc-blue); font-weight: 700; font-size: .78rem; }
.vc-missing { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
.vc-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.vc-status-complete { background: var(--vc-green-soft); color: var(--vc-green); }
.vc-status-open { background: var(--vc-blue-soft); color: var(--vc-blue); }
.vc-status-missingcheckout, .vc-status-missingcheckin { background: var(--vc-red-soft); color: var(--vc-red); }
.vc-hours { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Tables ---------- */
.vc-table-wrap { overflow-x: auto; }
.shift-table.mud-table, .shift-table { background: transparent !important; box-shadow: none !important; }
.shift-table th, .mud-table-head .mud-table-cell { font-size: .72rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary) !important; background: var(--mud-palette-background-gray) !important; }
.shift-table td { vertical-align: middle; }
.shift-table .precise { display: block; font-size: .7rem; color: var(--mud-palette-text-secondary); margin-top: 2px; font-variant-numeric: tabular-nums; }
.shift-table .group-row td { background: var(--mud-palette-background) !important; padding-top: 10px !important; padding-bottom: 10px !important; }
.vc-group-head { display: flex; align-items: center; gap: 10px; }
.vc-group-meta { color: var(--mud-palette-text-secondary); font-size: .8rem; }
.vc-group-total { margin-left: auto; font-weight: 800; color: var(--vc-green); }
.shift-table .detail-row td { background: var(--mud-palette-background) !important; padding: 14px !important; }
.shift-table tfoot td { border-top: 2px solid var(--vc-line); padding-top: 12px !important; padding-bottom: 12px !important; }
.kv td { padding: 3px 14px 3px 0; vertical-align: top; font-size: .85rem; }
.kv td:first-child { color: var(--mud-palette-text-secondary); white-space: nowrap; }

/* ---------- Summary strip ---------- */
.vc-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0; }
.vc-summary-item { display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 12px; background: var(--vc-card); border: 1px solid var(--vc-line); }
.vc-summary-value { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.vc-summary-label { font-size: .8rem; color: var(--mud-palette-text-secondary); font-weight: 600; }
.vc-summary-bad .vc-summary-value { color: var(--vc-red); }

/* ---------- Empty state ---------- */
.vc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 16px; text-align: center; }
.vc-empty-text { color: var(--mud-palette-text-secondary); font-weight: 600; }

/* ---------- Reports ---------- */
.report-matrix th, .report-matrix td { padding: 6px 6px !important; text-align: center; font-size: .8rem; font-variant-numeric: tabular-nums; }
.report-matrix td:first-child, .report-matrix th:first-child { text-align: left; white-space: nowrap; }
.report-matrix .weekend { background: var(--mud-palette-background-gray); }

/* ---------- Map ---------- */
.vc-map { width: 100%; border-radius: 12px; z-index: 0; }
.vc-map .leaflet-tile-pane { filter: saturate(.55) contrast(.95) brightness(1.03); }
.vc-dark .vc-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(.35) brightness(.85) contrast(.9); }
/* Marker clusters (leaflet.markercluster): brand green for attendance events, anthracite for worksites. */
.vc-cluster { background: rgba(52, 168, 69, .28); border-radius: 50%; }
.vc-cluster div {
    width: calc(100% - 8px); height: calc(100% - 8px); margin: 4px; border-radius: 50%;
    background: #34A845; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25);
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    font: 700 13px 'Plus Jakarta Sans', Manrope, sans-serif;
}
.vc-cluster-site { background: rgba(35, 31, 32, .22); }
.vc-cluster-site div { background: #231F20; }
.vc-dark .vc-cluster-site { background: rgba(245, 246, 245, .25); }
.vc-dark .vc-cluster-site div { background: #F5F6F5; color: #231F20; }
.vc-site-pin { background: none; border: none; }
.vc-site-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); cursor: pointer; }
.leaflet-popup-content-wrapper { border-radius: 12px !important; font-family: 'Plus Jakarta Sans', Manrope, sans-serif; }

.qr-preview { padding: 10px; background: #fff; border-radius: 14px; border: 1px solid var(--vc-line); }
.qr-preview svg { width: 170px; height: 170px; display: block; }
.audit-details { font-size: .72rem; word-break: break-all; }

#blazor-error-ui { background: #FFF6E5; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem; position: fixed; width: 100%; z-index: 2000; }
#blazor-error-ui .reload { margin-left: 1rem; }

/* ============================================================
   Sign-in (static pages, no MudBlazor)
   ============================================================ */
.vc-auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; font-family: 'Plus Jakarta Sans', Manrope, 'Segoe UI', Arial, sans-serif; background: #F5F6F5; color: var(--vc-ink); }
.vc-auth-hero { position: relative; overflow: hidden; background: #1A1617; }
.vc-auth-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.vc-auth-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,20,21,.92) 0%, rgba(23,20,21,.55) 38%, rgba(23,20,21,0) 60%); }
.vc-auth-hero-text { position: relative; z-index: 1; padding: 48px 56px; color: #fff; max-width: 560px; }
.vc-auth-hero-text h2 { font-size: 2.3rem; line-height: 1.12; letter-spacing: -.03em; font-weight: 800; margin: 36px 0 12px; }
.vc-auth-hero-text p { color: #D7D2D2; font-size: 1.05rem; line-height: 1.55; margin: 0; }
.vc-auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; gap: 18px; }
.vc-auth-card { width: 100%; max-width: 420px; background: #fff; border-radius: 22px; padding: 36px 34px; box-shadow: 0 1px 2px rgba(35,31,32,.05), 0 18px 48px rgba(35,31,32,.10); }
.vc-auth-logo { display: block; margin-bottom: 26px; }
.vc-auth-card h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.vc-auth-sub { color: var(--vc-muted); margin: 0 0 22px; line-height: 1.5; }
.vc-auth-form label { display: block; font-size: .82rem; font-weight: 700; color: var(--vc-ink-2); margin: 14px 0 6px; }
.vc-input { position: relative; }
.vc-input svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #9A9595; pointer-events: none; }
.vc-input input { width: 100%; box-sizing: border-box; padding: 13px 14px 13px 42px; border: 1.5px solid #E1E3E1; border-radius: 12px; font: inherit; font-size: 1rem; background: #FAFBFA; transition: border-color .15s, box-shadow .15s, background .15s; }
.vc-input input:focus { outline: none; border-color: var(--vc-green); background: #fff; box-shadow: 0 0 0 4px rgba(52,168,69,.15); }
.vc-auth-check { display: flex !important; align-items: center; gap: 8px; font-weight: 600 !important; color: var(--vc-muted) !important; margin-top: 16px !important; cursor: pointer; }
.vc-auth-check input { width: 18px; height: 18px; accent-color: var(--vc-green); }
.vc-btn-primary { width: 100%; margin-top: 22px; padding: 14px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #4DBE5C, var(--vc-green)); color: #fff; font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(52,168,69,.30); transition: transform .08s, box-shadow .15s, filter .15s; }
.vc-btn-primary:hover { filter: brightness(1.05); box-shadow: 0 10px 24px rgba(52,168,69,.38); }
.vc-btn-primary:active { transform: translateY(1px); }
.vc-auth-error { display: flex; align-items: center; gap: 10px; background: var(--vc-red-soft); color: #B91C1C; padding: 11px 14px; border-radius: 12px; font-size: .9rem; font-weight: 600; margin-bottom: 4px; }
.vc-auth-denied-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--vc-red-soft); color: var(--vc-red); margin-bottom: 16px; }
.vc-auth-alt { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border: 1.5px dashed #D5D8D5; border-radius: 14px; color: var(--vc-ink); text-decoration: none; transition: border-color .15s, background .15s; }
.vc-auth-alt:hover { border-color: var(--vc-green); background: #F3FAF4; }
.vc-auth-alt svg { flex: none; color: var(--vc-green); }
.vc-auth-alt span { display: flex; flex-direction: column; line-height: 1.3; }
.vc-auth-alt strong { font-size: .92rem; }
.vc-auth-alt small { color: var(--vc-muted); font-size: .8rem; }
.vc-auth-link { display: inline-block; margin-top: 18px; color: var(--vc-green-dark, #2A8A39); font-weight: 700; font-size: .9rem; text-decoration: none; }
.vc-auth-link:hover { text-decoration: underline; }
.vc-auth-ok-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: #E6F5E8; color: var(--vc-green); margin-bottom: 16px; }
.vc-btn-link { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
.vc-input.invalid input { border-color: #DC2626; background: #FEF6F6; }
.vc-field-error { color: #B91C1C; font-size: .8rem; font-weight: 600; margin-top: 6px; }
.vc-field-hint { color: var(--vc-muted); font-size: .8rem; margin-top: 6px; }

/* Shift breaks */
.vc-break { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: var(--vc-amber-soft); color: #9A5B00; font-size: .8rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vc-break .mud-icon-root { font-size: 14px; }
.vc-break-none { background: transparent; color: var(--mud-palette-text-secondary); font-weight: 600; }
.vc-dark .vc-break { color: #FCD38A; }
.vc-dark .vc-break-none { color: var(--mud-palette-text-secondary); }
.vc-gross { color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.vc-break-value { color: #9A5B00; }
.vc-dark .vc-break-value { color: #FCD38A; }
.vc-break-rule { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 12px; align-items: center; margin-bottom: 8px; }
@media (max-width: 600px) { .vc-break-rule { grid-template-columns: 1fr 1fr; } }

/* Server connection QR code (mobile app) */
.vc-connect { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.vc-connect-qr { flex: none; width: 220px; max-width: 100%; padding: 2px; background: #fff; border-radius: 16px; border: 1.5px solid #E1E3E1; box-sizing: border-box; }
.vc-connect-qr svg { display: block; width: 100%; height: auto; }
.vc-connect-body { flex: 1 1 260px; min-width: 0; }
.vc-connect-server { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.vc-connect-name { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.vc-connect-url { color: var(--vc-muted); font-size: .9rem; overflow-wrap: anywhere; }
.vc-connect-warn { background: #FFF7E6; color: #8A5300; border-radius: 12px; padding: 10px 12px; font-size: .85rem; font-weight: 600; margin-bottom: 14px; line-height: 1.45; }
.vc-connect-steps { margin: 0; padding-left: 20px; line-height: 1.55; font-size: .92rem; }
.vc-connect-steps li + li { margin-top: 6px; }
.vc-auth-card .vc-connect { flex-direction: column; align-items: center; gap: 18px; }
.vc-auth-card .vc-connect-qr { width: 240px; }
.vc-auth-card .vc-connect-body { flex: none; width: 100%; }
.vc-dark .vc-connect-warn { background: rgba(245, 158, 11, .14); color: #FCD38A; }
.vc-dark .vc-connect-qr { border-color: transparent; }

.vc-auth-languages { display: flex; gap: 6px; padding: 4px; background: #ECEEEC; border-radius: 999px; }
.vc-auth-languages a { padding: 6px 14px; border-radius: 999px; color: var(--vc-muted); text-decoration: none; font-size: .85rem; font-weight: 700; }
.vc-auth-languages a.active { background: #fff; color: var(--vc-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.vc-auth-footer { font-size: .78rem; color: #9A9595; }
@media (max-width: 900px) {
    .vc-auth { grid-template-columns: 1fr; }
    .vc-auth-hero { height: 220px; }
    .vc-auth-hero-img { object-position: 30% 70%; }
    .vc-auth-hero-text { padding: 22px 24px; }
    .vc-auth-main { justify-content: flex-start; padding-top: 0; margin-top: -48px; position: relative; z-index: 2; }
    .vc-auth-hero-text h2, .vc-auth-hero-text p { display: none; }
}

/* ============================================================
   QR cards print page: 85 x 54 mm (credit card), 10 per A4
   ============================================================ */
.print-page { font-family: 'Plus Jakarta Sans', Manrope, Arial, sans-serif; padding: 10mm; color: var(--vc-ink); background: #F5F6F5; min-height: 100vh; }
.print-toolbar { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; color: var(--vc-muted); }
.print-toolbar button { padding: 10px 18px; font: inherit; font-weight: 800; cursor: pointer; border: 0; border-radius: 10px; background: var(--vc-green); color: #fff; }
.cards { display: flex; flex-wrap: wrap; gap: 4mm; }
.card { width: 85mm; height: 54mm; box-sizing: border-box; border-radius: 3.5mm; display: flex; overflow: hidden; background: #fff; border: .3mm solid #DADDDA; page-break-inside: avoid; break-inside: avoid; position: relative; }
.card-side { width: 33mm; background: linear-gradient(170deg, #2C2627, #171415); color: #fff; padding: 4mm 3.5mm; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.card-side::after { content: ""; position: absolute; left: -6mm; right: -6mm; bottom: -16mm; height: 30mm; border-radius: 50% 50% 0 0; background: radial-gradient(circle at 50% 30%, rgba(101,201,113,.45), rgba(101,201,113,0) 70%); }
.card-side img { width: 26mm; position: relative; z-index: 1; }
.card-name { font-weight: 800; font-size: 10.5pt; line-height: 1.2; position: relative; z-index: 1; }
.card-meta { font-size: 7pt; color: #CFCACA; margin-top: 1mm; position: relative; z-index: 1; }
.card-qr { flex: 1; display: grid; place-items: center; padding: 2.5mm; }
.card-qr svg { width: 46mm; height: 46mm; display: block; }
@media print {
    .no-print { display: none !important; }
    .print-page { padding: 0; background: #fff; }
    .card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    @page { size: A4; margin: 10mm; }
}