@charset "utf-8";
/* ==========================================================================
   ViviScape ID app theme. Bootstrap 5.3 + data-bs-theme="light|dark" on <html>.
   ========================================================================== */
:root, [data-bs-theme="light"] {
  --vp-bg: #f6f7fb;
  --vp-bg-glow-1: rgba(99, 102, 241, .12);
  --vp-bg-glow-2: rgba(34, 211, 238, .10);
  --vp-surface: rgba(255, 255, 255, .78);
  --vp-surface-solid: #ffffff;
  --vp-surface-2: #f1f3f9;
  --vp-border: rgba(15, 23, 42, .08);
  --vp-border-strong: rgba(15, 23, 42, .14);
  --vp-text: #0f172a;
  --vp-muted: #64748b;
  --vp-accent: #6366f1;
  --vp-accent-2: #22d3ee;
  --vp-accent-3: #a855f7;
  --vp-grad: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #22d3ee 100%);
  --vp-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --vp-nav: rgba(255, 255, 255, .72);

  --bs-body-bg: var(--vp-bg);
  --bs-body-color: var(--vp-text);
  --bs-secondary-color: var(--vp-muted);
  --bs-border-color: var(--vp-border-strong);
  --bs-primary: #6366f1;
  --bs-primary-rgb: 99, 102, 241;
  --bs-link-color: #6366f1;
  --bs-link-color-rgb: 99, 102, 241;
  --bs-link-hover-color: #4f46e5;
  --bs-link-hover-color-rgb: 79, 70, 229;
  --bs-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1rem;
}

[data-bs-theme="dark"] {
  --vp-bg: #07080d;
  --vp-bg-glow-1: rgba(99, 102, 241, .22);
  --vp-bg-glow-2: rgba(34, 211, 238, .12);
  --vp-surface: rgba(20, 22, 33, .72);
  --vp-surface-solid: #11131c;
  --vp-surface-2: #181b27;
  --vp-border: rgba(255, 255, 255, .07);
  --vp-border-strong: rgba(255, 255, 255, .12);
  --vp-text: #e7e9f2;
  --vp-muted: #8b90a7;
  --vp-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 40px rgba(0, 0, 0, .35);
  --vp-nav: rgba(7, 8, 13, .7);

  --bs-body-bg: var(--vp-bg);
  --bs-body-color: var(--vp-text);
  --bs-secondary-color: var(--vp-muted);
  --bs-border-color: var(--vp-border-strong);
  --bs-link-color: #a5b4fc;
  --bs-link-color-rgb: 165, 180, 252;
  --bs-link-hover-color: #c7d2fe;
  --bs-link-hover-color-rgb: 199, 210, 254;
  --bs-tertiary-bg: var(--vp-surface-2);
}

html { font-size: 15px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  overflow-x: clip;
  min-height: 100vh; display: flex; flex-direction: column;
  background:
    radial-gradient(900px 500px at 10% -10%, var(--vp-bg-glow-1), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, var(--vp-bg-glow-2), transparent 60%),
    var(--vp-bg);
  background-attachment: fixed;
  color: var(--vp-text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.005em;
}
body > .container { flex: 1; }
h1, h2, h3, .h1, .h2, .h3, .display-4, .display-5 { letter-spacing: -.025em; font-weight: 700; }
::selection { background: rgba(99, 102, 241, .3); }

/* ---------- navigation ---------- */
.vp-nav {
  position: sticky; top: 0; z-index: 1030;
  background: var(--vp-nav); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--vp-border);
}
.vp-nav .navbar-brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; letter-spacing: -.03em; color: var(--vp-text); }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--vp-grad); color: #fff; box-shadow: 0 6px 18px rgba(99, 102, 241, .35);
}
.vp-nav .nav-link { color: var(--vp-muted); font-weight: 500; border-radius: .6rem; padding: .45rem .8rem !important; display: flex; align-items: center; gap: .4rem; }
.vp-nav .nav-link:hover { color: var(--vp-text); background: var(--vp-surface-2); }
.vp-nav .nav-link.active { color: var(--vp-text); background: var(--vp-surface-2); }
.theme-toggle {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--vp-border-strong); background: transparent;
  color: var(--vp-text); display: inline-flex; align-items: center; justify-content: center; transition: background .2s;
}
.theme-toggle:hover { background: var(--vp-surface-2); }
[data-bs-theme="dark"] .theme-toggle .i-sun { display: inline; }
[data-bs-theme="dark"] .theme-toggle .i-moon { display: none; }
.theme-toggle .i-sun { display: none; }

/* ---------- surfaces ---------- */
.card, .glass {
  background: var(--vp-surface); border: 1px solid var(--vp-border) !important; border-radius: 1.1rem;
  box-shadow: var(--vp-shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  --bs-card-bg: transparent; --bs-card-color: var(--vp-text);
}
.card.shadow-sm { box-shadow: var(--vp-shadow) !important; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--vp-text); --bs-table-border-color: var(--vp-border); margin: 0; }
.table > thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--vp-muted); font-weight: 600; border-bottom-color: var(--vp-border-strong); padding-top: 1rem; }
.table > :not(caption) > * > * { padding: .9rem 1rem; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table > tbody > tr { transition: background .15s; }
.table > tbody > tr:hover { background: var(--vp-surface-2); }
.table-secondary { --bs-table-bg: transparent; opacity: .55; }

/* ---------- forms ---------- */
.form-control, .form-select {
  background-color: var(--vp-surface-solid); border-color: var(--vp-border-strong); color: var(--vp-text);
  border-radius: .7rem; padding: .6rem .85rem;
}
.form-control-sm, .form-select-sm { padding: .35rem .6rem; border-radius: .55rem; }
.form-control:focus, .form-select:focus {
  background-color: var(--vp-surface-solid); color: var(--vp-text);
  border-color: var(--vp-accent); box-shadow: 0 0 0 .25rem rgba(99, 102, 241, .2);
}
.form-control::placeholder { color: var(--vp-muted); opacity: .7; }
.input-group-text { background: var(--vp-surface-2); border-color: var(--vp-border-strong); color: var(--vp-muted); border-radius: .7rem; }
.form-label { font-weight: 600; font-size: .875rem; }
.form-text { color: var(--vp-muted); }
.form-check-input:checked { background-color: var(--vp-accent); border-color: var(--vp-accent); }
.form-control-color { width: 4rem; height: 2.6rem; padding: .3rem; }

/* ---------- buttons ---------- */
.btn { border-radius: .7rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; transition: transform .15s, box-shadow .2s, background .2s; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  --bs-btn-bg: #6366f1; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #5458e8; --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: #4f46e5; --bs-btn-disabled-bg: #6366f1;
  background-image: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 8px 22px -6px rgba(99, 102, 241, .6);
}
.btn-primary:hover { box-shadow: 0 10px 28px -6px rgba(99, 102, 241, .75); }
.btn-outline-primary { --bs-btn-color: var(--bs-link-color); --bs-btn-border-color: rgba(99, 102, 241, .45); --bs-btn-hover-bg: rgba(99, 102, 241, .12); --bs-btn-hover-color: var(--bs-link-color); --bs-btn-hover-border-color: rgba(99, 102, 241, .6); --bs-btn-active-bg: rgba(99, 102, 241, .2); --bs-btn-active-color: var(--bs-link-color); }
.btn-outline-secondary, .btn-light { --bs-btn-color: var(--vp-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--vp-border-strong); --bs-btn-hover-bg: var(--vp-surface-2); --bs-btn-hover-color: var(--vp-text); --bs-btn-hover-border-color: var(--vp-border-strong); --bs-btn-active-bg: var(--vp-surface-2); --bs-btn-active-color: var(--vp-text); }
.btn-outline-danger { --bs-btn-border-color: rgba(239, 68, 68, .4); }

/* ---------- misc ---------- */
.alert { border-radius: .9rem; border: 1px solid var(--vp-border); }
.alert-success { background: rgba(16, 185, 129, .12); color: inherit; border-color: rgba(16, 185, 129, .3); }
.alert-warning { background: rgba(245, 158, 11, .12); color: inherit; border-color: rgba(245, 158, 11, .35); }
.alert-danger { background: rgba(239, 68, 68, .12); color: inherit; border-color: rgba(239, 68, 68, .35); }
.alert-info { background: rgba(99, 102, 241, .1); color: inherit; border-color: rgba(99, 102, 241, .3); }
.badge { font-weight: 600; border-radius: 999px; padding: .38em .7em; letter-spacing: .01em; }
.text-bg-success { background: rgba(16, 185, 129, .15) !important; color: #059669 !important; }
.text-bg-warning { background: rgba(245, 158, 11, .15) !important; color: #b45309 !important; }
.text-bg-secondary { background: var(--vp-surface-2) !important; color: var(--vp-muted) !important; }
.text-bg-dark { background: var(--vp-text) !important; color: var(--vp-bg) !important; }
[data-bs-theme="dark"] .text-bg-success { color: #34d399 !important; }
[data-bs-theme="dark"] .text-bg-warning { color: #fbbf24 !important; }
.text-secondary { color: var(--vp-muted) !important; }
.code { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.icon { flex: none; vertical-align: -.15em; }
.text-gradient { background: var(--vp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vp-accent); }
[data-bs-theme="dark"] .eyebrow { color: #a5b4fc; }
.page-head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-end; margin-bottom: 1.75rem; }
.page-head h1 { margin: 0; }
.vp-footer { border-top: 1px solid var(--vp-border); color: var(--vp-muted); }

.avatar-sm { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--vp-surface-2); flex: none; }
.avatar-initials { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; }

.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(99, 102, 241, .12); color: var(--vp-accent); margin-bottom: .9rem; }
[data-bs-theme="dark"] .stat-card .stat-icon { color: #a5b4fc; }
.stat { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.stat-card::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 140px; height: 140px; border-radius: 50%;
  background: var(--vp-grad); opacity: .08; filter: blur(10px); }

.qr-box { background: #fff; border-radius: 1rem; padding: .75rem; display: inline-block; }
.qr-box svg { width: 100%; height: auto; max-width: 220px; display: block; }

.nfc-pulse { width: 116px; height: 116px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(168, 85, 247, .25), rgba(99, 102, 241, .15)); color: var(--vp-accent);
  border: 1px solid rgba(99, 102, 241, .3); }
[data-bs-theme="dark"] .nfc-pulse { color: #c4b5fd; }
.nfc-pulse.active { animation: pulse 1.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, .5); } 100% { box-shadow: 0 0 0 30px rgba(99, 102, 241, 0); } }

/* ---------- landing ---------- */
.hero-title { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.04; font-weight: 800; letter-spacing: -.045em; }
.hero-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .4rem; border-radius: 999px;
  border: 1px solid var(--vp-border-strong); background: var(--vp-surface); font-size: .85rem; color: var(--vp-muted); }
.hero-pill b { background: var(--vp-grad); color: #fff; border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; }
.feature { padding: 1.4rem; height: 100%; }
.feature .stat-icon { margin-bottom: 1rem; }
.feature h3 { font-size: 1.05rem; margin-bottom: .35rem; }

.phone {
  width: 280px; height: 560px; border-radius: 44px; padding: 12px; margin: 0 auto; position: relative;
  background: linear-gradient(160deg, #2a2d3a, #0d0e14); box-shadow: 0 40px 80px -20px rgba(15, 23, 42, .5), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.phone-screen { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #0b0c12; position: relative; color: #e7e9f2; }
.phone-screen .cover { height: 140px; background: var(--vp-grad); }
.phone-screen .pav { width: 84px; height: 84px; border-radius: 26px; margin: -42px auto 0; background: linear-gradient(135deg, #f472b6, #6366f1);
  border: 4px solid #0b0c12; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.6rem; color: #fff; }
.phone-screen .pname { text-align: center; font-weight: 800; margin-top: .6rem; font-size: 1.1rem; }
.phone-screen .ptitle { text-align: center; color: #8b90a7; font-size: .8rem; }
.phone-screen .pbtn { margin: 1rem 1rem .6rem; padding: .7rem; border-radius: 14px; text-align: center; font-weight: 700; font-size: .85rem; background: var(--vp-grad); }
.phone-screen .prow { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 1rem; }
.phone-screen .prow div { height: 54px; border-radius: 14px; background: #161824; border: 1px solid rgba(255, 255, 255, .06); }
.phone-screen .plink { margin: .5rem 1rem 0; height: 44px; border-radius: 14px; background: #161824; border: 1px solid rgba(255, 255, 255, .06); }
.tap-card {
  position: absolute; right: -70px; top: 70px; width: 190px; height: 118px; border-radius: 16px; transform: rotate(-14deg);
  background: linear-gradient(135deg, #1e1b4b, #312e81 60%, #4c1d95); border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 30px 50px -10px rgba(76, 29, 149, .6); color: #fff; padding: 14px; display: flex; flex-direction: column; justify-content: space-between;
  animation: float 5s ease-in-out infinite;
}
.tap-card .chip { width: 30px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #fde68a, #d97706); }
@keyframes float { 0%, 100% { transform: rotate(-14deg) translateY(0); } 50% { transform: rotate(-12deg) translateY(-10px); } }
@media (max-width: 991px) { .tap-card { right: -10px; } }
@media (prefers-reduced-motion: reduce) { .tap-card, .nfc-pulse.active { animation: none; } }

.swatch { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--vp-border-strong); padding: 0; cursor: pointer; transition: transform .15s; }
.swatch:hover { transform: scale(1.12); }

/* ---------- external sign-in (default Identity UI renders <button name="provider" value="Google">) ---------- */
button[name="provider"][value="Google"] {
  --bs-btn-bg: #fff; --bs-btn-color: #1f1f1f; --bs-btn-border-color: #dadce0;
  --bs-btn-hover-bg: #f8f9fa; --bs-btn-hover-color: #1f1f1f; --bs-btn-hover-border-color: #d2e3fc;
  --bs-btn-active-bg: #f1f3f4; --bs-btn-active-color: #1f1f1f;
  background-image: none; box-shadow: none; width: 100%; padding: .7rem 1rem; gap: .65rem;
}
button[name="provider"][value="Google"]::before {
  content: ""; width: 18px; height: 18px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-bs-theme="dark"] button[name="provider"][value="Google"] {
  --bs-btn-bg: #131314; --bs-btn-color: #e3e3e3; --bs-btn-border-color: #8e918f;
  --bs-btn-hover-bg: #1f1f20; --bs-btn-hover-color: #e3e3e3; --bs-btn-active-bg: #262628; --bs-btn-active-color: #e3e3e3;
}