/* ==========================================================================
   Vayunex Credential Vault - styles on top of Bootstrap 5.3

   Brand palette ("Vayunex Night & Violet")
     Night     #0B0618 · #120A2A · #1A0F3D      sidebar, hero, dark mode
     Violet    #7C3AED (600) · #6D28D9 (700)    primary actions, links
     Fuchsia   #C026D3 · #E879F9                gradient partner, accents
     Ink       #1A0F3D headings · #4A4560 text · #625C78 muted
     Paper     #F8F6FD canvas · #FFFFFF cards · #E7E2F3 lines
     Signals   Emerald #10B981 · Amber #F59E0B · Rose #F43F5E · Sky #0EA5E9
   Typeface: Inter (variable, self-hosted in static/fonts, SIL OFL 1.1)
   ========================================================================== */

/* ---------- 0. Inter (self-hosted, no third-party requests) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. Design tokens: light ---------- */
:root,
[data-bs-theme="light"] {
  --vx-primary: #6d28d9;
  --vx-primary-rgb: 109, 40, 217;
  --vx-primary-soft: #f1eafe;
  --vx-primary-line: #d8c8fb;
  --vx-accent: #c026d3;
  --vx-gradient: linear-gradient(135deg, #7c3aed 0%, #a21caf 100%);
  --vx-gradient-hover: linear-gradient(135deg, #6d28d9 0%, #86198f 100%);
  --vx-gradient-text: linear-gradient(92deg, #6d28d9 0%, #c026d3 100%);
  --vx-glow: 0 10px 24px -12px rgba(124, 58, 237, 0.7);

  --vx-bg: #f8f6fd;
  --vx-surface: #ffffff;
  --vx-surface-2: #fbfaff;
  --vx-surface-3: #f3f0fb;
  --vx-line: #e7e2f3;
  --vx-line-strong: #d7cfea;
  --vx-ink: #1a0f3d;
  --vx-text: #2f2750;
  --vx-text-2: #4a4560;
  --vx-muted: #625c78;
  --vx-input-bg: #ffffff;
  --vx-topbar-bg: rgba(248, 246, 253, 0.84);

  --vx-success: #10b981;
  --vx-warning: #f59e0b;
  --vx-danger: #e11d48;
  --vx-danger-strong: #e11d48;
  --vx-favorite: #f59e0b;

  --vx-shadow-sm: 0 1px 2px rgba(26, 15, 61, 0.04), 0 2px 6px -2px rgba(26, 15, 61, 0.06);
  --vx-shadow: 0 12px 28px -14px rgba(26, 15, 61, 0.18);
  --vx-shadow-lg: 0 24px 48px -20px rgba(26, 15, 61, 0.28);
  --vx-ring: 0 0 0 0.25rem rgba(124, 58, 237, 0.2);

  --vx-radius: 16px;
  --vx-radius-sm: 11px;
  --vx-radius-xs: 8px;
  --vx-radius-lg: 24px;
  --vx-sidebar-width: 272px;

  /* Bootstrap bridges */
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 0.9375rem;
  --bs-body-bg: var(--vx-surface);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: var(--vx-text);
  --bs-emphasis-color: var(--vx-ink);
  --bs-secondary-color: var(--vx-muted);
  --bs-tertiary-bg: var(--vx-surface-2);
  --bs-secondary-bg: var(--vx-surface-3);
  --bs-border-color: var(--vx-line);
  --bs-border-radius: var(--vx-radius-sm);
  --bs-border-radius-lg: var(--vx-radius);
  --bs-primary: #6d28d9;
  --bs-primary-rgb: 109, 40, 217;
  --bs-primary-bg-subtle: #f1eafe;
  --bs-primary-border-subtle: #d8c8fb;
  --bs-primary-text-emphasis: #4c1d95;
  --bs-link-color: #6d28d9;
  --bs-link-color-rgb: 109, 40, 217;
  --bs-link-hover-color: #5b21b6;
  --bs-link-hover-color-rgb: 91, 33, 182;
  --bs-focus-ring-color: rgba(124, 58, 237, 0.25);
  --bs-danger: #e11d48;
  --bs-danger-rgb: 225, 29, 72;
  --bs-danger-text-emphasis: #9f1239;
  --bs-danger-bg-subtle: #ffe4e6;
  --bs-danger-border-subtle: #fecdd3;
  --bs-form-invalid-color: #e11d48;
  --bs-form-invalid-border-color: #e11d48;
}

/* ---------- 2. Design tokens: dark ("night") ---------- */
[data-bs-theme="dark"] {
  --vx-primary: #b69cff;
  --vx-primary-rgb: 167, 139, 250;
  --vx-primary-soft: rgba(167, 139, 250, 0.14);
  --vx-primary-line: rgba(167, 139, 250, 0.38);
  --vx-accent: #f0abfc;
  --vx-gradient: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
  --vx-gradient-hover: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);
  --vx-gradient-text: linear-gradient(92deg, #c4b5fd 0%, #f0abfc 100%);
  --vx-glow: 0 10px 28px -10px rgba(168, 85, 247, 0.75);

  --vx-bg: #0b0618;
  --vx-surface: #120a2a;
  --vx-surface-2: #170e33;
  --vx-surface-3: #1f1442;
  --vx-line: #2a1e52;
  --vx-line-strong: #3a2b6b;
  --vx-ink: #f5f3ff;
  --vx-text: #e3def6;
  --vx-text-2: #cdc6e6;
  --vx-muted: #a59cc4;
  --vx-input-bg: #0f0823;
  --vx-topbar-bg: rgba(11, 6, 24, 0.82);

  --vx-danger: #fb7185;
  --vx-danger-strong: #e11d48;
  --vx-favorite: #fbbf24;

  --vx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --vx-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.7);
  --vx-shadow-lg: 0 26px 52px -20px rgba(0, 0, 0, 0.8);
  --vx-ring: 0 0 0 0.25rem rgba(167, 139, 250, 0.28);

  --bs-body-bg: var(--vx-surface);
  --bs-body-bg-rgb: 18, 10, 42;
  --bs-body-color: var(--vx-text);
  --bs-emphasis-color: var(--vx-ink);
  --bs-secondary-color: var(--vx-muted);
  --bs-tertiary-bg: var(--vx-surface-2);
  --bs-secondary-bg: var(--vx-surface-3);
  --bs-border-color: var(--vx-line);
  --bs-primary: #a78bfa;
  --bs-primary-rgb: 167, 139, 250;
  --bs-primary-bg-subtle: rgba(167, 139, 250, 0.14);
  --bs-primary-border-subtle: rgba(167, 139, 250, 0.38);
  --bs-primary-text-emphasis: #ddd6fe;
  --bs-link-color: #b69cff;
  --bs-link-color-rgb: 182, 156, 255;
  --bs-link-hover-color: #d4c5ff;
  --bs-link-hover-color-rgb: 212, 197, 255;
  --bs-focus-ring-color: rgba(167, 139, 250, 0.3);
  --bs-danger: #fb7185;
  --bs-danger-rgb: 251, 113, 133;
  --bs-danger-text-emphasis: #fda4af;
  --bs-danger-bg-subtle: rgba(244, 63, 94, 0.14);
  --bs-danger-border-subtle: rgba(244, 63, 94, 0.4);
  --bs-form-invalid-color: #fb7185;
  --bs-form-invalid-border-color: #fb7185;
}

/* ---------- 3. Base ---------- */
html {
  scroll-padding-top: 84px;
}

body {
  min-height: 100vh;
  background-color: var(--vx-bg);
  color: var(--vx-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--bs-emphasis-color);
  font-weight: 700;
  letter-spacing: -0.02em;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

::selection {
  color: inherit;
  background: rgba(var(--vx-primary-rgb), 0.24);
}

.min-w-0 { min-width: 0; }

.text-gradient {
  color: var(--vx-primary);
  background-image: var(--vx-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-favorite {
  color: var(--vx-favorite);
}

kbd.kbd-hint {
  padding: 0.1rem 0.42rem;
  font-size: 0.7rem;
  font-family: var(--bs-font-sans-serif);
  color: var(--vx-muted);
  background: var(--vx-surface-3);
  border: 1px solid var(--vx-line);
  border-radius: 6px;
  box-shadow: none;
}

/* Off-screen helper used by the copy-to-clipboard fallback. */
.clipboard-buffer {
  position: fixed;
  top: -1000px;
  left: -1000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.skip-link {
  z-index: 2000;
}

/* ---------- 4. Buttons ---------- */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: 0.89rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-border-radius: var(--vx-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  letter-spacing: -0.005em;
}

.btn-sm {
  --bs-btn-font-size: 0.8rem;
  --bs-btn-padding-x: 0.72rem;
  --bs-btn-padding-y: 0.34rem;
  --bs-btn-border-radius: var(--vx-radius-xs);
}

.btn-lg {
  --bs-btn-font-size: 1rem;
  --bs-btn-padding-y: 0.72rem;
}

/* Primary: the Vayunex violet -> fuchsia gradient with a soft glow. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #7c3aed;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6d28d9;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #5b21b6;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #7c3aed;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 124, 58, 237;
  background-image: var(--vx-gradient);
  box-shadow: var(--vx-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.btn-primary:hover {
  background-image: var(--vx-gradient-hover);
  box-shadow: 0 14px 30px -12px rgba(124, 58, 237, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-primary:focus-visible {
  box-shadow: var(--vx-glow), var(--vx-ring);
}

.btn-outline-secondary,
.btn-soft {
  --bs-btn-color: var(--vx-text-2);
  --bs-btn-bg: var(--vx-surface);
  --bs-btn-border-color: var(--vx-line-strong);
  --bs-btn-hover-color: var(--vx-ink);
  --bs-btn-hover-bg: var(--vx-surface-3);
  --bs-btn-hover-border-color: var(--vx-line-strong);
  --bs-btn-active-color: var(--vx-ink);
  --bs-btn-active-bg: var(--vx-surface-3);
  --bs-btn-active-border-color: var(--vx-line-strong);
  --bs-btn-disabled-color: var(--vx-muted);
  --bs-btn-disabled-bg: var(--vx-surface);
  --bs-btn-disabled-border-color: var(--vx-line);
  --bs-btn-focus-shadow-rgb: var(--vx-primary-rgb);
}

.btn-soft {
  box-shadow: var(--vx-shadow-sm);
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #e11d48;
  --bs-btn-border-color: #e11d48;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #be123c;
  --bs-btn-hover-border-color: #be123c;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #9f1239;
  --bs-btn-active-border-color: #9f1239;
  --bs-btn-focus-shadow-rgb: 225, 29, 72;
}

.btn-outline-danger {
  --bs-btn-color: #e11d48;
  --bs-btn-bg: var(--vx-surface);
  --bs-btn-border-color: rgba(225, 29, 72, 0.38);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #e11d48;
  --bs-btn-hover-border-color: #e11d48;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #be123c;
  --bs-btn-active-border-color: #be123c;
  --bs-btn-focus-shadow-rgb: 225, 29, 72;
}

[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #fb7185;
  --bs-btn-border-color: rgba(251, 113, 133, 0.4);
}

/* White button for dark banners. */
.btn-light {
  --bs-btn-color: #1a0f3d;
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #ffffff;
  --bs-btn-hover-color: #1a0f3d;
  --bs-btn-hover-bg: #f1eafe;
  --bs-btn-hover-border-color: #f1eafe;
  --bs-btn-active-color: #1a0f3d;
  --bs-btn-active-bg: #e4d8fd;
  --bs-btn-active-border-color: #e4d8fd;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
}

/* Frosted button for dark banners. */
.btn-glass {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(255, 255, 255, 0.08);
  --bs-btn-border-color: rgba(255, 255, 255, 0.22);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.16);
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.35);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.2);
  --bs-btn-active-border-color: rgba(255, 255, 255, 0.35);
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Square, quiet icon buttons (copy, reveal, menus). */
.btn-icon {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-color: var(--vx-muted);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--vx-primary);
  --bs-btn-hover-bg: var(--vx-primary-soft);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--vx-primary);
  --bs-btn-active-bg: var(--vx-primary-soft);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--vx-muted);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--vx-primary-rgb);
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  font-size: 1.02rem;
}

.btn-icon.btn-sm {
  width: 30px;
  height: 30px;
  font-size: 0.92rem;
}

.btn-icon.is-done,
.btn-icon.is-done:hover {
  color: var(--vx-success);
}

/* Favorite (star) toggles */
.fav-toggle .bi {
  transition: transform 0.2s ease, color 0.2s ease;
}

.fav-toggle:hover .bi {
  transform: scale(1.12);
}

.fav-toggle.is-favorite,
.fav-toggle.is-favorite:hover {
  color: var(--vx-favorite);
}

.btn-soft.fav-toggle.is-favorite {
  --bs-btn-bg: rgba(245, 158, 11, 0.1);
  --bs-btn-border-color: rgba(245, 158, 11, 0.45);
  --bs-btn-hover-bg: rgba(245, 158, 11, 0.16);
  --bs-btn-hover-border-color: rgba(245, 158, 11, 0.55);
  color: #b45309;
}

[data-bs-theme="dark"] .btn-soft.fav-toggle.is-favorite {
  color: #fcd34d;
}

.btn-soft.fav-toggle.is-favorite .bi {
  color: var(--vx-favorite);
}

/* ---------- 5. Forms ---------- */
.form-label {
  margin-bottom: 0.4rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--vx-text-2);
}

.form-text {
  font-size: 0.8rem;
  color: var(--vx-muted);
}

.form-control,
.form-select {
  padding: 0.6rem 0.85rem;
  font-size: 0.925rem;
  color: var(--vx-ink);
  background-color: var(--vx-input-bg);
  border-color: var(--vx-line-strong);
  border-radius: var(--vx-radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-select {
  padding-right: 2.25rem;
}

.form-control:hover,
.form-select:hover {
  border-color: rgba(var(--vx-primary-rgb), 0.45);
}

.form-control:focus,
.form-select:focus {
  color: var(--vx-ink);
  background-color: var(--vx-input-bg);
  border-color: rgba(var(--vx-primary-rgb), 0.7);
  box-shadow: var(--vx-ring);
}

.form-control::placeholder {
  color: var(--vx-muted);
  opacity: 0.72;
}

/* Secrets are typed in a monospace font; their hints are not. */
.form-control.font-monospace::placeholder {
  font-family: var(--bs-body-font-family);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}

.form-check-input {
  border-color: var(--vx-line-strong);
}

.form-check-input:checked {
  background-color: #7c3aed;
  border-color: #7c3aed;
}

.form-check-input:focus {
  border-color: rgba(var(--vx-primary-rgb), 0.7);
  box-shadow: var(--vx-ring);
}

.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c4b5fd'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb {
  background: #7c3aed;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.45);
}

.form-range::-webkit-slider-thumb:active {
  background: #6d28d9;
}

.form-range::-moz-range-thumb {
  background: #7c3aed;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.45);
}

.form-range::-webkit-slider-runnable-track {
  background-color: var(--vx-surface-3);
}

.form-range::-moz-range-track {
  background-color: var(--vx-surface-3);
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--vx-surface), var(--vx-ring);
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--vx-surface), var(--vx-ring);
}

.input-group > .btn {
  border-color: var(--vx-line-strong);
}

.input-group > .btn-primary {
  border-color: transparent;
}

.input-group > .btn-primary:not(:focus-visible) {
  box-shadow: none;
}

.invalid-feedback {
  font-size: 0.8rem;
}

/* ---------- 6. Bootstrap components ---------- */
.card {
  --bs-card-bg: var(--vx-surface);
  --bs-card-border-color: var(--vx-line);
  --bs-card-border-radius: var(--vx-radius);
  --bs-card-inner-border-radius: calc(var(--vx-radius) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-y: 1rem;
  --bs-card-cap-padding-x: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.25rem;
  box-shadow: var(--vx-shadow-sm);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom-color: var(--vx-line);
}

.card-footer {
  background: var(--vx-surface-2);
  border-top-color: var(--vx-line);
}

.card-title-sm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card-title-sm > .bi {
  color: var(--vx-primary);
}

.card-title-sm > .bi.icon-favorite {
  color: var(--vx-favorite);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--vx-surface);
  --bs-dropdown-border-color: var(--vx-line);
  --bs-dropdown-border-radius: var(--vx-radius-sm);
  --bs-dropdown-box-shadow: var(--vx-shadow-lg);
  --bs-dropdown-link-color: var(--vx-text-2);
  --bs-dropdown-link-hover-bg: var(--vx-surface-3);
  --bs-dropdown-link-hover-color: var(--vx-ink);
  --bs-dropdown-link-active-bg: var(--vx-primary-soft);
  --bs-dropdown-link-active-color: var(--vx-primary);
  --bs-dropdown-item-padding-y: 0.45rem;
  --bs-dropdown-font-size: 0.875rem;
  padding: 0.35rem;
  box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: var(--vx-radius-xs);
}

.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
  color: var(--vx-danger) !important;
  background-color: rgba(225, 29, 72, 0.1);
}

.modal {
  --bs-modal-bg: var(--vx-surface);
  --bs-modal-border-color: var(--vx-line);
  --bs-modal-border-radius: 20px;
  --bs-modal-inner-border-radius: 19px;
  --bs-modal-box-shadow: var(--vx-shadow-lg);
  --bs-modal-header-border-color: transparent;
  --bs-modal-footer-border-color: transparent;
}

.modal-content {
  box-shadow: var(--bs-modal-box-shadow);
}

.modal-backdrop,
.offcanvas-backdrop {
  --bs-backdrop-bg: #0b0618;
  --bs-backdrop-opacity: 0.6;
}

.toast {
  --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 0.96);
  --bs-toast-border-color: var(--vx-line);
  --bs-toast-border-radius: 14px;
  --bs-toast-box-shadow: var(--vx-shadow-lg);
  --bs-toast-max-width: 380px;
  --bs-toast-font-size: 0.875rem;
  --bs-toast-color: var(--vx-ink);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--vx-text);
  --bs-table-border-color: var(--vx-line);
  --bs-table-hover-bg: var(--vx-surface-2);
  --bs-table-hover-color: var(--vx-ink);
  margin-bottom: 0;
  font-size: 0.875rem;
}

.table > thead th {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--vx-muted);
  background: var(--vx-surface-2);
}

.table > :not(caption) > * > * {
  padding: 0.78rem 1rem;
  vertical-align: middle;
}

.pagination {
  --bs-pagination-color: var(--vx-text-2);
  --bs-pagination-bg: var(--vx-surface);
  --bs-pagination-border-color: var(--vx-line);
  --bs-pagination-border-radius: var(--vx-radius-xs);
  --bs-pagination-hover-color: var(--vx-ink);
  --bs-pagination-hover-bg: var(--vx-surface-3);
  --bs-pagination-hover-border-color: var(--vx-line-strong);
  --bs-pagination-focus-color: var(--vx-ink);
  --bs-pagination-focus-bg: var(--vx-surface-3);
  --bs-pagination-focus-box-shadow: var(--vx-ring);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #7c3aed;
  --bs-pagination-active-border-color: transparent;
  --bs-pagination-disabled-color: var(--vx-muted);
  --bs-pagination-disabled-bg: var(--vx-surface);
  --bs-pagination-disabled-border-color: var(--vx-line);
  gap: 0.3rem;
  flex-wrap: wrap;
}

.pagination .page-link {
  min-width: 36px;
  border-radius: var(--vx-radius-xs) !important;
  margin-left: 0 !important;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
}

.pagination .active > .page-link {
  background-image: var(--vx-gradient);
  box-shadow: var(--vx-glow);
}

.breadcrumb {
  --bs-breadcrumb-margin-bottom: 0.4rem;
  --bs-breadcrumb-font-size: 0.8rem;
  --bs-breadcrumb-divider-color: var(--vx-muted);
  --bs-breadcrumb-item-active-color: var(--vx-muted);
  flex-wrap: nowrap;
  min-width: 0;
}

.breadcrumb-item {
  white-space: nowrap;
}

.breadcrumb a {
  color: var(--vx-muted);
  font-weight: 500;
}

.breadcrumb a:hover {
  color: var(--vx-primary);
}

.alert {
  --bs-alert-border-radius: var(--vx-radius-sm);
  font-size: 0.875rem;
}

/* ---------- 7. Tones (category, environment & action colours) ---------- */
.tone-indigo  { --tone-bg: #eef2ff; --tone-fg: #4338ca; --tone-solid: #6366f1; --tone-solid-2: #4f46e5; }
.tone-sky     { --tone-bg: #e0f2fe; --tone-fg: #0369a1; --tone-solid: #0ea5e9; --tone-solid-2: #0284c7; }
.tone-violet  { --tone-bg: #f1eafe; --tone-fg: #6d28d9; --tone-solid: #8b5cf6; --tone-solid-2: #6d28d9; }
.tone-rose    { --tone-bg: #ffe4e6; --tone-fg: #be123c; --tone-solid: #f43f5e; --tone-solid-2: #e11d48; }
.tone-emerald { --tone-bg: #d1fae5; --tone-fg: #047857; --tone-solid: #10b981; --tone-solid-2: #059669; }
.tone-amber   { --tone-bg: #fef3c7; --tone-fg: #b45309; --tone-solid: #f59e0b; --tone-solid-2: #d97706; }
.tone-teal    { --tone-bg: #ccfbf1; --tone-fg: #0f766e; --tone-solid: #14b8a6; --tone-solid-2: #0d9488; }
.tone-fuchsia { --tone-bg: #fae8ff; --tone-fg: #a21caf; --tone-solid: #d946ef; --tone-solid-2: #c026d3; }
.tone-slate   { --tone-bg: #f1eff7; --tone-fg: #4a4560; --tone-solid: #7c7694; --tone-solid-2: #625c78; }

[data-bs-theme="dark"] .tone-indigo  { --tone-bg: rgba(129, 140, 248, 0.16); --tone-fg: #a5b4fc; }
[data-bs-theme="dark"] .tone-sky     { --tone-bg: rgba(56, 189, 248, 0.15);  --tone-fg: #7dd3fc; }
[data-bs-theme="dark"] .tone-violet  { --tone-bg: rgba(167, 139, 250, 0.17); --tone-fg: #c4b5fd; }
[data-bs-theme="dark"] .tone-rose    { --tone-bg: rgba(251, 113, 133, 0.15); --tone-fg: #fda4af; }
[data-bs-theme="dark"] .tone-emerald { --tone-bg: rgba(52, 211, 153, 0.15);  --tone-fg: #6ee7b7; }
[data-bs-theme="dark"] .tone-amber   { --tone-bg: rgba(251, 191, 36, 0.15);  --tone-fg: #fcd34d; }
[data-bs-theme="dark"] .tone-teal    { --tone-bg: rgba(45, 212, 191, 0.15);  --tone-fg: #5eead4; }
[data-bs-theme="dark"] .tone-fuchsia { --tone-bg: rgba(232, 121, 249, 0.15); --tone-fg: #f0abfc; }
[data-bs-theme="dark"] .tone-slate   { --tone-bg: rgba(165, 156, 196, 0.15); --tone-fg: #cdc6e6; }

.cat-badge,
.action-badge,
.env-pill,
.tag-pill,
.grade-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.2rem 0.62rem;
  font-size: 0.73rem;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  color: var(--tone-fg);
  background: var(--tone-bg);
  border-radius: 999px;
}

.tag-pill:not([class*="tone-"]) {
  color: var(--vx-text-2);
  background: var(--vx-surface-3);
  box-shadow: inset 0 0 0 1px var(--vx-line);
}

.env-pill {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone-solid) 28%, transparent);
}

.tag-pill .text-truncate {
  min-width: 0;
}

a.cat-badge:hover {
  text-decoration: none;
  filter: brightness(0.97);
}

.icon-tile {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  color: var(--tone-fg);
  background: var(--tone-bg);
  border-radius: 13px;
}

.icon-tile-sm {
  width: 34px;
  height: 34px;
  font-size: 1rem;
  border-radius: 10px;
}

.icon-tile-lg {
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
  border-radius: 16px;
}

/* ---------- 8. Brand icons ---------- */
.brand-icon {
  --size: 44px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--size);
  height: var(--size);
  font-size: calc(var(--size) * 0.46);
  font-weight: 700;
  color: #fff;
  background: var(--brand, #7c3aed);
  border-radius: 13px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 16px -10px rgba(26, 15, 61, 0.55);
}

.brand-icon-sm { --size: 36px; border-radius: 11px; }
.brand-icon-lg { --size: 60px; border-radius: 18px; }

.brand-icon.is-monogram {
  font-size: calc(var(--size) * 0.42);
  color: var(--tone-fg);
  background: var(--tone-bg);
  box-shadow: inset 0 0 0 1px rgba(26, 15, 61, 0.04);
}

/* Brand colours - keep in sync with credentials/brands.py */
.brand-icon[data-brand="google"] { --brand: #ea4335; }
.brand-icon[data-brand="youtube"] { --brand: #ff0000; }
.brand-icon[data-brand="facebook"] { --brand: #1877f2; }
.brand-icon[data-brand="meta"] { --brand: #0467df; }
.brand-icon[data-brand="instagram"] { --brand: #e4405f; background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); }
.brand-icon[data-brand="x"] { --brand: #0f1419; }
.brand-icon[data-brand="threads"] { --brand: #101010; }
.brand-icon[data-brand="linkedin"] { --brand: #0a66c2; }
.brand-icon[data-brand="whatsapp"] { --brand: #25d366; }
.brand-icon[data-brand="telegram"] { --brand: #26a5e4; }
.brand-icon[data-brand="pinterest"] { --brand: #bd081c; }
.brand-icon[data-brand="tiktok"] { --brand: #111111; }
.brand-icon[data-brand="reddit"] { --brand: #ff4500; }
.brand-icon[data-brand="discord"] { --brand: #5865f2; }
.brand-icon[data-brand="snapchat"] { --brand: #e5c800; color: #111111; }
.brand-icon[data-brand="microsoft"] { --brand: #00a4ef; }
.brand-icon[data-brand="apple"] { --brand: #1d1d1f; }
.brand-icon[data-brand="amazon"] { --brand: #232f3e; color: #ff9900; }
.brand-icon[data-brand="github"] { --brand: #181717; }
.brand-icon[data-brand="gitlab"] { --brand: #fc6d26; }
.brand-icon[data-brand="slack"] { --brand: #4a154b; }
.brand-icon[data-brand="trello"] { --brand: #0052cc; }
.brand-icon[data-brand="dropbox"] { --brand: #0061ff; }
.brand-icon[data-brand="wordpress"] { --brand: #21759b; }
.brand-icon[data-brand="paypal"] { --brand: #003087; }
.brand-icon[data-brand="stripe"] { --brand: #635bff; }
.brand-icon[data-brand="skype"] { --brand: #00aff0; }
.brand-icon[data-brand="spotify"] { --brand: #1db954; }
.brand-icon[data-brand="twitch"] { --brand: #9146ff; }
.brand-icon[data-brand="vimeo"] { --brand: #1ab7ea; }
.brand-icon[data-brand="behance"] { --brand: #1769ff; }
.brand-icon[data-brand="dribbble"] { --brand: #ea4c89; }
.brand-icon[data-brand="yelp"] { --brand: #d32323; }
.brand-icon[data-brand="godaddy"] { --brand: #00a4a6; }
.brand-icon[data-brand="namecheap"] { --brand: #de3723; }
.brand-icon[data-brand="cloudflare"] { --brand: #f38020; }
.brand-icon[data-brand="digitalocean"] { --brand: #0080ff; }
.brand-icon[data-brand="hostinger"] { --brand: #673de6; }
.brand-icon[data-brand="bluehost"] { --brand: #2f65e8; }
.brand-icon[data-brand="cpanel"] { --brand: #ff6c2c; }
.brand-icon[data-brand="zoho"] { --brand: #e42527; }
.brand-icon[data-brand="yahoo"] { --brand: #6001d2; }
.brand-icon[data-brand="figma"] { --brand: #a259ff; }
.brand-icon[data-brand="atlassian"] { --brand: #0052cc; }
.brand-icon[data-brand="vercel"] { --brand: #111111; }
.brand-icon[data-brand="openai"] { --brand: #10a37f; }
.brand-icon[data-brand="razorpay"] { --brand: #3395ff; }
.brand-icon[data-brand="hdfc"] { --brand: #004c8f; }

[data-bs-theme="dark"] .brand-icon {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

[data-bs-theme="dark"] .brand-icon[data-brand="github"],
[data-bs-theme="dark"] .brand-icon[data-brand="vercel"],
[data-bs-theme="dark"] .brand-icon[data-brand="x"],
[data-bs-theme="dark"] .brand-icon[data-brand="threads"],
[data-bs-theme="dark"] .brand-icon[data-brand="tiktok"],
[data-bs-theme="dark"] .brand-icon[data-brand="apple"] {
  --brand: #2a2145;
}

/* ---------- 9. Brand lockup (logo + wordmark) ---------- */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.brand-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 6px 14px rgba(167, 139, 250, 0.45));
}

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-wordmark {
  overflow: hidden;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #ffffff;
}

.brand-wordmark-light {
  font-weight: 400;
  color: #c4b5fd;
}

.brand-caption {
  margin-top: 0.2rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a59cc4;
}

.brand-lockup.is-compact .brand-logo {
  width: 32px;
  height: 32px;
}

/* ---------- 10. App shell: night sidebar ---------- */
.app-sidebar {
  --bs-offcanvas-width: 284px;
  --bs-offcanvas-bg: #0d0720;
  color: #cdc6e6;
}

.sidebar-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(124, 58, 237, 0.32), transparent 65%),
    radial-gradient(360px 240px at 100% 100%, rgba(192, 38, 211, 0.18), transparent 65%),
    linear-gradient(180deg, #140b30 0%, #0b0618 100%);
  border-right: 1px solid rgba(167, 139, 250, 0.12);
}

@media (min-width: 992px) {
  .app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    width: var(--vx-sidebar-width);
  }

  .app-main {
    margin-left: var(--vx-sidebar-width);
  }
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.35rem 1rem 1rem 1.25rem;
}

.sidebar-brand {
  display: flex;
  min-width: 0;
  border-radius: var(--vx-radius-sm);
}

.sidebar-brand:hover {
  text-decoration: none;
}

.sidebar-brand:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 4px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem 0.85rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.3) transparent;
}

.nav-section {
  padding: 1.1rem 0.75rem 0.45rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8b82ad;
}

.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-bottom: 3px;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  color: #cdc6e6;
  background: transparent;
  border: 0;
  border-radius: var(--vx-radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-link > .bi {
  font-size: 1.05rem;
  color: #9a90c2;
  transition: color 0.15s ease;
}

.sidebar-link:hover {
  color: #ffffff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-link:hover > .bi {
  color: #ddd6fe;
}

.sidebar-link.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.42) 0%, rgba(192, 38, 211, 0.16) 100%);
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.16), 0 10px 22px -16px rgba(168, 85, 247, 0.9);
}

.sidebar-link.active::before {
  position: absolute;
  top: 22%;
  bottom: 22%;
  left: -0.85rem;
  width: 3px;
  content: "";
  background: linear-gradient(180deg, #c4b5fd, #e879f9);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px rgba(232, 121, 249, 0.8);
}

.sidebar-link.active > .bi {
  color: #e9d5ff;
}

.sidebar-link:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 1px;
}

.sidebar-link .count {
  margin-left: auto;
  min-width: 1.6rem;
  padding: 0.05rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  color: #c4b5fd;
  background: rgba(167, 139, 250, 0.14);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.sidebar-link.active .count {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
}

.sidebar-link.is-danger:hover,
.sidebar-link.is-danger:hover > .bi {
  color: #fda4af;
}

.sidebar-note {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0.85rem 0.85rem;
  padding: 0.75rem 0.85rem;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #a59cc4;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(167, 139, 250, 0.14);
  border-radius: 14px;
}

.sidebar-note strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ede9fe;
}

.sidebar-note span span {
  display: block;
}

.sidebar-note-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
  color: #ffffff;
  background: var(--vx-gradient);
  border-radius: 10px;
  box-shadow: 0 8px 16px -8px rgba(168, 85, 247, 0.9);
}

.sidebar-footer {
  padding: 0.75rem 0.85rem 0.85rem;
  border-top: 1px solid rgba(167, 139, 250, 0.12);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.6rem 0.6rem;
}

.user-chip .name {
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #ffffff;
}

.user-chip .role {
  font-size: 0.74rem;
  color: #a59cc4;
}

.user-chip .avatar {
  color: #ffffff;
  background: var(--vx-gradient);
  box-shadow: 0 6px 14px -6px rgba(168, 85, 247, 0.8);
}

.avatar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--vx-primary);
  background: var(--vx-primary-soft);
  border-radius: 50%;
}

.avatar-sm {
  width: 26px;
  height: 26px;
  font-size: 0.62rem;
}

/* ---------- 11. Top bar & content ---------- */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--vx-topbar-bg);
  border-bottom: 1px solid var(--vx-line);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 1480px;
  min-height: 66px;
  padding: 0.7rem 2rem;
}

.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vx-ink);
}

.topbar-brand:hover {
  text-decoration: none;
  color: var(--vx-ink);
}

.topbar-search {
  flex: 1 1 auto;
  max-width: 460px;
}

.app-content {
  max-width: 1480px;
  padding: 1.75rem 2rem 3rem;
}

@media (max-width: 575.98px) {
  .topbar-inner {
    padding: 0.6rem 1rem;
  }

  .app-content {
    padding: 1.1rem 1rem 2.5rem;
  }
}

.theme-toggle .icon-dark {
  display: none;
}

[data-bs-theme="dark"] .theme-toggle .icon-light {
  display: none;
}

[data-bs-theme="dark"] .theme-toggle .icon-dark {
  display: inline-block;
}

.no-sidebar .app-main {
  margin-left: 0;
}

/* ---------- 12. Page header ---------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.page-subtitle {
  margin: 0.3rem 0 0;
  color: var(--vx-muted);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- 13. Dashboard: hero banner & security score ---------- */
.hero-panel {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem 2.5rem;
  margin-bottom: 1.5rem;
  padding: 2.1rem 2.4rem;
  overflow: hidden;
  isolation: isolate;
  color: #ede9fe;
  background:
    radial-gradient(640px 320px at 0% 0%, rgba(124, 58, 237, 0.6), transparent 62%),
    radial-gradient(520px 320px at 100% 100%, rgba(192, 38, 211, 0.45), transparent 62%),
    linear-gradient(135deg, #1f1150 0%, #140b30 52%, #0b0618 100%);
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: var(--vx-radius-lg);
  box-shadow: 0 30px 60px -32px rgba(26, 15, 61, 0.75);
}

/* Faint circuit grid */
.hero-panel::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse at 25% 30%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 25% 30%, #000 10%, transparent 70%);
}

.hero-copy {
  flex: 1 1 380px;
  min-width: 0;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.75rem 0.3rem 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #e9d5ff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(196, 181, 253, 0.22);
  border-radius: 999px;
}

.hero-title {
  margin: 0 0 0.55rem;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.35rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #ffffff;
}

.hero-text {
  max-width: 560px;
  margin: 0 0 1.4rem;
  font-size: 1rem;
  color: rgba(237, 233, 254, 0.78);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.hero-score {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.4rem 1.1rem 1.1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(196, 181, 253, 0.18);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.score-ring-wrap {
  position: relative;
  flex-shrink: 0;
  width: 132px;
  height: 132px;
}

.score-ring {
  --ring-a: #a78bfa;
  --ring-b: #e879f9;
  display: block;
  width: 100%;
  height: 100%;
}

.score-ring.tone-emerald { --ring-a: #34d399; --ring-b: #a78bfa; }
.score-ring.tone-violet  { --ring-a: #a78bfa; --ring-b: #e879f9; }
.score-ring.tone-amber   { --ring-a: #fbbf24; --ring-b: #f472b6; }
.score-ring.tone-rose    { --ring-a: #fb7185; --ring-b: #f59e0b; }

.score-ring .stop-a { stop-color: var(--ring-a); }
.score-ring .stop-b { stop-color: var(--ring-b); }

.score-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 11;
}

.score-progress {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(232, 121, 249, 0.45));
  animation: vx-ring-fill 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}

.score-ring.is-empty .score-progress {
  stroke-linecap: butt;
}

/* Starts empty and fills up to the stroke-dashoffset set in the markup. */
@keyframes vx-ring-fill {
  from { stroke-dashoffset: 326.73; }
}

.score-center {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1;
  color: #ffffff;
  transform: translateY(-50%);
}

.score-value {
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.score-max {
  margin-left: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(237, 233, 254, 0.6);
}

.score-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.score-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 233, 254, 0.66);
}

.score-sub {
  font-size: 0.82rem;
  color: rgba(237, 233, 254, 0.78);
}

.grade-pill {
  padding: 0.28rem 0.75rem;
  font-size: 0.8rem;
}

@media (max-width: 575.98px) {
  .hero-panel {
    padding: 1.5rem 1.25rem;
    border-radius: 20px;
  }

  .hero-score {
    width: 100%;
  }

  .score-ring-wrap {
    width: 112px;
    height: 112px;
  }

  .score-value {
    font-size: 2rem;
  }
}

/* ---------- 14. Dashboard: stat cards ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 1199.98px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.15rem 1.25rem 1.1rem;
  overflow: hidden;
  background: var(--vx-surface);
  border: 1px solid var(--vx-line);
  border-radius: 18px;
  box-shadow: var(--vx-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.stat-card::after {
  position: absolute;
  top: -48px;
  right: -48px;
  width: 140px;
  height: 140px;
  content: "";
  background: radial-gradient(circle, var(--tone-solid) 0%, transparent 70%);
  opacity: 0.13;
  pointer-events: none;
}

.stat-card:hover {
  box-shadow: var(--vx-shadow);
  transform: translateY(-2px);
}

.stat-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.85rem;
  font-size: 1.15rem;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tone-solid), var(--tone-solid-2));
  border-radius: 13px;
  box-shadow: 0 10px 18px -10px var(--tone-solid);
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--vx-muted);
}

.stat-value {
  margin-top: 0.1rem;
  font-size: 1.95rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--bs-emphasis-color);
  font-variant-numeric: tabular-nums;
}

.stat-hint {
  margin-top: 0.2rem;
  overflow: hidden;
  font-size: 0.76rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--vx-muted);
}

/* ---------- 15. Dashboard: health, favorites, bars, lists ---------- */
.health-list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.health-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.75rem;
  background: var(--vx-surface-2);
  border: 1px solid var(--vx-line);
  border-radius: 14px;
}

.health-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.health-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--vx-ink);
}

.health-sub {
  font-size: 0.76rem;
  color: var(--vx-muted);
}

.health-count {
  min-width: 2ch;
  font-size: 1.35rem;
  font-weight: 800;
  text-align: right;
  letter-spacing: -0.03em;
  color: var(--tone-fg);
  font-variant-numeric: tabular-nums;
}

.health-ok {
  display: inline-grid;
  place-items: center;
  width: 64px;
  font-size: 1.15rem;
  color: var(--vx-success);
}

.health-item .btn {
  width: 64px;
}

.health-footnote {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0 0;
  font-size: 0.78rem;
  color: var(--vx-muted);
}

.health-footnote .bi {
  color: var(--vx-favorite);
}

.fav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.fav-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.75rem 0.6rem 0.75rem 0.8rem;
  background: var(--vx-surface-2);
  border: 1px solid var(--vx-line);
  border-radius: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.fav-tile:hover {
  border-color: var(--vx-primary-line);
  box-shadow: var(--vx-shadow);
  transform: translateY(-2px);
}

.fav-tile .brand-icon {
  grid-row: 1 / span 2;
}

.fav-title {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--vx-ink);
}

.fav-title:hover {
  text-decoration: none;
  color: var(--vx-primary);
}

.fav-user {
  grid-column: 2;
  overflow: hidden;
  font-size: 0.76rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--vx-muted);
}

.fav-tile .btn {
  position: relative;
  z-index: 2;
  grid-column: 3;
  grid-row: 1 / span 2;
}

.category-bars {
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-bar-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.5rem;
  color: inherit;
  border-radius: var(--vx-radius-sm);
  transition: background-color 0.15s ease;
}

.category-bar-row:hover {
  text-decoration: none;
  background: var(--vx-surface-3);
}

.bar {
  display: block;
  height: 6px;
  margin-top: 0.45rem;
  overflow: hidden;
  background: var(--vx-surface-3);
  border-radius: 999px;
}

.bar-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--tone-solid), var(--tone-solid-2));
  border-radius: inherit;
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.recent-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.5rem;
  color: inherit;
  border-radius: var(--vx-radius-sm);
  transition: background-color 0.15s ease;
}

.recent-row:hover {
  text-decoration: none;
  background: var(--vx-surface-3);
}

.recent-row .title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
}

.recent-row .meta {
  font-size: 0.78rem;
  color: var(--vx-muted);
}

.activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.72rem 0;
}

.activity-item + .activity-item {
  border-top: 1px solid var(--vx-line);
}

.activity-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  font-size: 0.85rem;
  color: var(--tone-fg);
  background: var(--tone-bg);
  border-radius: 9px;
}

.activity-text {
  font-size: 0.86rem;
  color: var(--vx-text-2);
}

.activity-text strong {
  font-weight: 600;
  color: var(--bs-emphasis-color);
}

.activity-meta {
  font-size: 0.75rem;
  color: var(--vx-muted);
}

/* ---------- 16. Credential list: toolbar & filters ---------- */
.filter-card {
  border-radius: 18px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.search-field {
  position: relative;
  flex: 1 1 280px;
}

.search-field > .bi {
  position: absolute;
  top: 50%;
  left: 0.95rem;
  color: var(--vx-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.search-field .form-control {
  padding-left: 2.6rem;
  padding-right: 2.5rem;
  background-color: var(--vx-surface-2);
}

.search-field .form-control:focus {
  background-color: var(--vx-input-bg);
}

.search-field .kbd-hint {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.search-field .form-control:focus ~ .kbd-hint {
  opacity: 0;
}

.toolbar-select,
.sort-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 180px;
}

.chip-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-bottom: 0.3rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--vx-text-2);
  cursor: pointer;
  user-select: none;
  background: var(--vx-surface);
  border: 1px solid var(--vx-line);
  border-radius: 999px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.chip:hover {
  background: var(--vx-surface-3);
  border-color: var(--vx-line-strong);
}

.chip .bi {
  color: var(--tone-fg, var(--vx-muted));
}

.chip-count {
  padding: 0 0.42rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--vx-muted);
  background: var(--vx-surface-3);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.btn-check:checked + .chip {
  color: #ffffff;
  background: var(--vx-gradient);
  border-color: transparent;
  box-shadow: var(--vx-glow);
}

.btn-check:checked + .chip .bi {
  color: #ffffff;
}

.btn-check:checked + .chip .chip-count {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
}

.chip-favorite .bi {
  color: var(--vx-favorite);
}

.btn-check:checked + .chip-favorite {
  color: #78350f;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  box-shadow: 0 10px 22px -12px rgba(245, 158, 11, 0.85);
}

.btn-check:checked + .chip-favorite .bi,
.btn-check:checked + .chip-favorite .chip-count {
  color: #78350f;
}

.btn-check:checked + .chip-favorite .chip-count {
  background: rgba(120, 53, 15, 0.12);
}

.btn-check:focus-visible + .chip {
  box-shadow: var(--vx-ring);
}

.chip-divider {
  flex-shrink: 0;
  width: 1px;
  height: 22px;
  margin: 0 0.15rem;
  background: var(--vx-line-strong);
}

.filter-pill-row {
  margin-top: 0.75rem;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.35rem 0.3rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #be123c;
  background: #ffe4e6;
  border: 1px solid #fecdd3;
  border-radius: 999px;
}

[data-bs-theme="dark"] .filter-pill {
  color: #fda4af;
  background: rgba(244, 63, 94, 0.14);
  border-color: rgba(244, 63, 94, 0.35);
}

.filter-pill a {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 0.7rem;
  color: inherit;
  border-radius: 50%;
}

.filter-pill a:hover {
  text-decoration: none;
  background: rgba(225, 29, 72, 0.14);
}

.results-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 1.25rem 0 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--vx-muted);
}

[aria-busy="true"] .cred-grid {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

/* ---------- 17. Credential cards ---------- */
.cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.1rem;
}

@media (max-width: 575.98px) {
  .cred-grid {
    grid-template-columns: 1fr;
  }
}

.cred-card {
  position: relative;
  border-radius: 18px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Gradient accent that lights up on hover. */
.cred-card::before {
  position: absolute;
  top: -1px;
  right: 18px;
  left: 18px;
  height: 3px;
  content: "";
  background: var(--vx-gradient);
  border-radius: 0 0 4px 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cred-card:hover {
  border-color: var(--vx-primary-line);
  box-shadow: var(--vx-shadow-lg), 0 0 0 1px rgba(var(--vx-primary-rgb), 0.06);
  transform: translateY(-3px);
}

.cred-card:hover::before,
.cred-card:focus-within::before {
  opacity: 1;
}

/* Lift a card above its neighbours while its dropdown menu is open. */
.cred-card:hover,
.cred-card:focus-within {
  z-index: 3;
}

.cred-card .card-body {
  padding: 1.15rem 1.15rem 1rem;
}

.cred-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.cred-title {
  margin: 0.15rem 0 0.1rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.cred-title a {
  color: var(--bs-emphasis-color);
}

.cred-title a:hover,
.cred-card:hover .cred-title a {
  color: var(--vx-primary);
  text-decoration: none;
}

.cred-domain {
  overflow: hidden;
  font-size: 0.8rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--vx-muted);
}

.cred-actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin: -0.2rem -0.35rem 0 0;
}

/* Buttons sit above the card's stretched link. */
.cred-card .btn,
.cred-card .dropdown {
  position: relative;
  z-index: 2;
}

.cred-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.8rem;
}

.cred-tags .tag-pill {
  max-width: 190px;
}

.cred-fields {
  margin-top: 0.85rem;
  background: var(--vx-surface-2);
  border: 1px solid var(--vx-line);
  border-radius: 13px;
}

.cred-field {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 42px;
  padding: 0.3rem 0.4rem 0.3rem 0.8rem;
  font-size: 0.875rem;
}

.cred-field + .cred-field {
  border-top: 1px solid var(--vx-line);
}

.cred-field > .bi {
  color: var(--vx-muted);
}

.cred-field .value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mask {
  letter-spacing: 0.14em;
  color: var(--vx-muted);
}

.cred-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.4;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
}

[data-bs-theme="dark"] .cred-warning {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}

.cred-warning .bi {
  margin-top: 0.05rem;
}

.cred-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  font-size: 0.77rem;
  color: var(--vx-muted);
  border-top: 1px solid var(--vx-line);
}

/* ---------- 18. Credential detail ---------- */
.detail-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.detail-link {
  margin-left: 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.callout-stack {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.callout {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  color: var(--vx-text-2);
  background: var(--vx-surface);
  border: 1px solid var(--vx-line);
  border-left: 4px solid var(--tone-solid);
  border-radius: 14px;
  box-shadow: var(--vx-shadow-sm);
}

.callout strong {
  color: var(--vx-ink);
}

.callout-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  font-size: 0.95rem;
  color: var(--tone-fg);
  background: var(--tone-bg);
  border-radius: 9px;
}

.secret-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.secret-row {
  padding: 0.75rem 0.6rem 0.75rem 1rem;
  background: var(--vx-surface-2);
  border: 1px solid var(--vx-line);
  border-radius: 14px;
  transition: border-color 0.15s ease;
}

.secret-row:hover {
  border-color: var(--vx-line-strong);
}

.secret-row dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--vx-muted);
}

.dt-hint {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.secret-row dd {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

.secret-value {
  flex: 1;
  min-width: 0;
  padding: 0.1rem 0.3rem 0.1rem 0;
  font-size: 0.97rem;
  font-weight: 500;
  word-break: break-all;
  color: var(--vx-ink);
  border-radius: 6px;
}

.secret-value.mask {
  font-weight: 400;
  color: var(--vx-muted);
}

.secret-value.is-revealed {
  font-family: var(--bs-font-monospace);
  font-size: 0.95rem;
  color: var(--bs-emphasis-color);
  animation: vx-flash 1.4s ease-out;
}

@keyframes vx-flash {
  from { background-color: rgba(var(--vx-primary-rgb), 0.22); }
  to   { background-color: transparent; }
}

.reveal-timer {
  font-size: 0.72rem;
  color: var(--vx-muted);
  font-variant-numeric: tabular-nums;
}

.strength-chip {
  padding: 0.05rem 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
}

.strength-chip[data-score="1"] { color: #be123c; background: #ffe4e6; }
.strength-chip[data-score="2"] { color: #b45309; background: #fef3c7; }
.strength-chip[data-score="3"] { color: #047857; background: #d1fae5; }
.strength-chip[data-score="4"] { color: #047857; background: #d1fae5; }

[data-bs-theme="dark"] .strength-chip[data-score="1"] { color: #fda4af; background: rgba(244, 63, 94, 0.15); }
[data-bs-theme="dark"] .strength-chip[data-score="2"] { color: #fcd34d; background: rgba(245, 158, 11, 0.15); }
[data-bs-theme="dark"] .strength-chip[data-score="3"],
[data-bs-theme="dark"] .strength-chip[data-score="4"] { color: #6ee7b7; background: rgba(16, 185, 129, 0.15); }

/* 2FA code + countdown ring */
.totp-code.is-revealed {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--vx-primary);
}

.totp-code.is-expiring {
  color: #e11d48;
}

[data-bs-theme="dark"] .totp-code.is-expiring {
  color: #fb7185;
}

.totp-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--vx-muted);
  font-variant-numeric: tabular-nums;
}

.totp-timer[hidden] {
  display: none;
}

.totp-ring {
  width: 22px;
  height: 22px;
}

.totp-track {
  fill: none;
  stroke: var(--vx-line-strong);
  stroke-width: 4;
}

.totp-progress {
  fill: none;
  stroke: #8b5cf6;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s linear, stroke 0.2s ease;
}

.totp-timer.is-expiring .totp-progress {
  stroke: #f43f5e;
}

.notes-body {
  margin: 0;
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--vx-text-2);
}

.secure-note {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: var(--vx-muted);
}

.secure-note .bi {
  color: var(--vx-success);
}

.meta-list {
  display: grid;
  gap: 0.95rem;
  margin: 0;
}

.meta-list dt {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--vx-muted);
}

.meta-list dd {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  color: var(--vx-ink);
}

.people-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.person-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.65rem 0.18rem 0.2rem;
  font-size: 0.8rem;
  background: var(--vx-surface-3);
  border-radius: 999px;
}

/* ---------- 19. Forms: sections, generator, strength, sharing, pickers ---------- */
.form-section + .form-section {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--vx-line);
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  font-size: 1rem;
  font-weight: 700;
}

.section-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 0.95rem;
  color: #ffffff;
  background: var(--vx-gradient);
  border-radius: 9px;
  box-shadow: 0 8px 16px -10px rgba(124, 58, 237, 0.9);
}

.optional-tag {
  padding: 0.1rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--vx-muted);
  background: var(--vx-surface-3);
  border-radius: 999px;
}

.totp-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.84rem;
  font-weight: 500;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 11px;
}

[data-bs-theme="dark"] .totp-status {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}

@media (min-width: 1200px) {
  .side-stack {
    position: sticky;
    top: 90px;
  }
}

.strength {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
}

.strength.is-tight {
  margin-top: -0.5rem;
}

.strength-bar {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.strength-bar span {
  height: 5px;
  background: var(--vx-surface-3);
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.strength-label {
  min-width: 128px;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: right;
  color: var(--vx-muted);
  font-variant-numeric: tabular-nums;
}

.strength[data-score="1"] .strength-bar span:nth-child(-n + 1) { background: #f43f5e; }
.strength[data-score="2"] .strength-bar span:nth-child(-n + 2) { background: #f59e0b; }
.strength[data-score="3"] .strength-bar span:nth-child(-n + 3) { background: #22c55e; }
.strength[data-score="4"] .strength-bar span { background: linear-gradient(90deg, #10b981, #8b5cf6); }
.strength[data-score="1"] .strength-label { color: #e11d48; }
.strength[data-score="2"] .strength-label { color: #d97706; }
.strength[data-score="3"] .strength-label { color: #16a34a; }
.strength[data-score="4"] .strength-label { color: #059669; }

[data-bs-theme="dark"] .strength[data-score="1"] .strength-label { color: #fb7185; }
[data-bs-theme="dark"] .strength[data-score="2"] .strength-label { color: #fbbf24; }
[data-bs-theme="dark"] .strength[data-score="3"] .strength-label { color: #4ade80; }
[data-bs-theme="dark"] .strength[data-score="4"] .strength-label { color: #34d399; }

.generator {
  margin-top: 0.9rem;
  padding: 0.9rem 1rem 0.75rem;
  background:
    linear-gradient(var(--vx-surface-2), var(--vx-surface-2)) padding-box,
    linear-gradient(135deg, rgba(124, 58, 237, 0.4), rgba(192, 38, 211, 0.3)) border-box;
  border: 1px dashed transparent;
  border-radius: 13px;
}

.generator-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--vx-text-2);
}

.length-value {
  min-width: 2.2rem;
  padding: 0.05rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background: var(--vx-gradient);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.generator-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  font-size: 0.85rem;
}

.share-box {
  overflow: hidden;
  background: var(--vx-input-bg);
  border: 1px solid var(--vx-line-strong);
  border-radius: var(--vx-radius-sm);
}

.share-box .share-filter {
  border: 0;
  border-bottom: 1px solid var(--vx-line);
  border-radius: 0;
}

.share-box .share-filter:focus {
  box-shadow: none;
}

.share-list {
  max-height: 260px;
  padding: 0.35rem;
  overflow-y: auto;
}

.share-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.45rem 0.6rem;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: var(--vx-radius-xs);
}

.share-item:hover {
  background: var(--vx-surface-3);
}

.share-item .form-check-input {
  flex-shrink: 0;
  margin: 0;
}

.share-item[hidden] {
  display: none;
}

.icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 0.5rem;
}

.icon-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.7rem 0.35rem 0.55rem;
  font-size: 0.72rem;
  color: var(--vx-muted);
  cursor: pointer;
  background: var(--vx-surface);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.icon-option .bi {
  font-size: 1.25rem;
  color: var(--vx-text-2);
}

.icon-option:hover {
  background: var(--vx-surface-3);
  border-color: var(--vx-line-strong);
}

.btn-check:checked + .icon-option {
  color: var(--vx-primary);
  background: var(--vx-primary-soft);
  border-color: var(--vx-primary);
  box-shadow: inset 0 0 0 1px var(--vx-primary);
}

.btn-check:checked + .icon-option .bi {
  color: var(--vx-primary);
}

.btn-check:focus-visible + .icon-option,
.btn-check:focus-visible + .swatch {
  box-shadow: var(--vx-ring);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.swatch {
  position: relative;
  width: 36px;
  height: 36px;
  margin: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--tone-solid), var(--tone-solid-2));
  border: 3px solid var(--vx-surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--vx-line-strong);
  transition: transform 0.15s ease;
}

.swatch:hover {
  transform: scale(1.07);
}

.btn-check:checked + .swatch {
  box-shadow: 0 0 0 2px var(--tone-solid);
}

.btn-check:checked + .swatch::after {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 7px;
  height: 12px;
  content: "";
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.category-preview {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem;
  background: var(--vx-surface-2);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius-sm);
}

/* ---------- 20. Categories page ---------- */
.category-card {
  position: relative;
  height: 100%;
  border-radius: 18px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.category-card:hover {
  border-color: var(--vx-primary-line);
  box-shadow: var(--vx-shadow);
  transform: translateY(-2px);
}

.category-card:hover,
.category-card:focus-within {
  z-index: 3;
}

.category-card .card-body {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.category-card .icon-tile {
  color: #ffffff;
  background: linear-gradient(135deg, var(--tone-solid), var(--tone-solid-2));
  box-shadow: 0 10px 18px -10px var(--tone-solid);
}

.category-card .name {
  font-weight: 700;
  color: var(--bs-emphasis-color);
}

.category-card .name a {
  color: inherit;
}

.category-card .name a:hover {
  text-decoration: none;
}

.category-card .count {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bs-emphasis-color);
  font-variant-numeric: tabular-nums;
}

.category-card .dropdown {
  position: relative;
  z-index: 2;
}

/* ---------- 21. Audit log ---------- */
.audit-table td {
  white-space: nowrap;
}

.audit-table td.details {
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--vx-muted);
}

.audit-table .ip {
  font-family: var(--bs-font-monospace);
  font-size: 0.8rem;
  color: var(--vx-muted);
}

.code-block {
  padding: 0.85rem 1rem;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-all;
  color: #e9d5ff;
  background: #120a2a;
  border: 1px solid #2a1e52;
  border-radius: var(--vx-radius-sm);
}

/* ---------- 22. Empty states ---------- */
.empty-state {
  padding: 3.5rem 1.5rem;
  text-align: center;
}

.empty-illustration {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 1.25rem;
  font-size: 2.2rem;
  color: #ffffff;
  background: var(--vx-gradient);
  border-radius: 26px;
  box-shadow: 0 18px 32px -16px rgba(124, 58, 237, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.empty-illustration[class*="tone-"] {
  background: linear-gradient(135deg, var(--tone-solid), var(--tone-solid-2));
  box-shadow: 0 18px 32px -16px var(--tone-solid);
}

.empty-state h2,
.empty-state h3 {
  margin-bottom: 0.4rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.empty-state p {
  max-width: 440px;
  margin: 0 auto 1.25rem;
  color: var(--vx-muted);
}

.empty-inline {
  padding: 1.5rem 0.5rem;
  font-size: 0.875rem;
  text-align: center;
  color: var(--vx-muted);
}

/* ---------- 23. Sign-in & lockout (always night-themed) ---------- */
.auth-page {
  background-color: #0b0618;
}

.auth-shell {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  color: #ede9fe;
  background:
    radial-gradient(900px 560px at 8% -10%, rgba(124, 58, 237, 0.55), transparent 60%),
    radial-gradient(760px 520px at 105% 110%, rgba(192, 38, 211, 0.4), transparent 58%),
    linear-gradient(160deg, #1a0f3d 0%, #0f0824 45%, #0b0618 100%);
}

.auth-shell::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 35%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse at 30% 35%, #000 15%, transparent 72%);
}

@media (min-width: 992px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

.auth-hero {
  position: relative;
  display: none;
  overflow: hidden;
  padding: 3rem 3.5rem;
  border-right: 1px solid rgba(167, 139, 250, 0.1);
}

.auth-hero::after {
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 440px;
  height: 440px;
  content: "";
  background: url("../img/vayunex-mark.svg") center / contain no-repeat;
  opacity: 0.07;
  transform: rotate(-10deg);
  pointer-events: none;
}

@media (min-width: 992px) {
  .auth-hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
  }
}

.auth-hero > * {
  position: relative;
}

.auth-hero .brand-logo {
  width: 46px;
  height: 46px;
}

.auth-hero .brand-wordmark {
  font-size: 1.3rem;
}

.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
  padding: 0.3rem 0.8rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: #e9d5ff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(196, 181, 253, 0.22);
  border-radius: 999px;
}

.auth-hero h1 {
  max-width: 540px;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 1.2rem + 1.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #ffffff;
}

.auth-hero p {
  max-width: 480px;
  font-size: 1.03rem;
  color: rgba(237, 233, 254, 0.75);
}

.auth-features {
  display: grid;
  gap: 0.85rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.auth-features li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.94rem;
  color: rgba(237, 233, 254, 0.9);
}

.auth-features .bi {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  font-size: 1rem;
  color: #e9d5ff;
  background: rgba(167, 139, 250, 0.14);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.22);
}

.auth-hero .footnote {
  font-size: 0.8rem;
  color: rgba(237, 233, 254, 0.5);
}

.auth-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
}

.auth-card {
  width: 100%;
  max-width: 420px;
}

.auth-mobile-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 1.75rem;
}

.glass-card {
  --bs-card-bg: rgba(18, 10, 42, 0.72);
  --bs-card-border-color: rgba(167, 139, 250, 0.2);
  border-radius: 22px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.auth-card .card-body {
  padding: 2.2rem 2.1rem;
}

@media (max-width: 575.98px) {
  .auth-card .card-body {
    padding: 1.6rem 1.25rem;
  }
}

.auth-card h2 {
  margin-bottom: 0.35rem;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.auth-footnote {
  margin: 1.5rem 0 0;
  font-size: 0.82rem;
  text-align: center;
  color: rgba(237, 233, 254, 0.55);
}

.auth-shell .form-control {
  background-color: rgba(11, 6, 24, 0.6);
}

.input-icon {
  position: relative;
}

.input-icon > .bi {
  position: absolute;
  top: 50%;
  left: 0.95rem;
  z-index: 5;
  color: var(--vx-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.input-icon .form-control {
  padding-left: 2.65rem;
}

.lockout-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 1.25rem;
  font-size: 1.85rem;
  color: #ffffff;
  background: linear-gradient(135deg, #f59e0b, #e11d48);
  border-radius: 20px;
  box-shadow: 0 18px 32px -16px rgba(225, 29, 72, 0.8);
}

/* ---------- 24. Error pages ---------- */
.error-shell {
  max-width: 540px;
  margin: 3rem auto;
  text-align: center;
}

.error-mark {
  display: block;
  margin: 0 auto 0.75rem;
  filter: drop-shadow(0 10px 20px rgba(124, 58, 237, 0.45));
}

.error-code {
  font-size: 4.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--vx-primary);
  background-image: var(--vx-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 25. Toasts & idle modal ---------- */
.toast-container {
  z-index: 1090;
}

.toast-body {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
}

.toast-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  font-size: 0.9rem;
  border-radius: 8px;
}

.toast-success .toast-icon { color: #047857; background: #d1fae5; }
.toast-danger .toast-icon  { color: #be123c; background: #ffe4e6; }
.toast-warning .toast-icon { color: #b45309; background: #fef3c7; }
.toast-info .toast-icon,
.toast-secondary .toast-icon { color: #6d28d9; background: #f1eafe; }

[data-bs-theme="dark"] .toast-success .toast-icon { color: #6ee7b7; background: rgba(16, 185, 129, 0.16); }
[data-bs-theme="dark"] .toast-danger .toast-icon  { color: #fda4af; background: rgba(244, 63, 94, 0.16); }
[data-bs-theme="dark"] .toast-warning .toast-icon { color: #fcd34d; background: rgba(245, 158, 11, 0.16); }
[data-bs-theme="dark"] .toast-info .toast-icon,
[data-bs-theme="dark"] .toast-secondary .toast-icon { color: #c4b5fd; background: rgba(167, 139, 250, 0.16); }

.toast-message {
  flex: 1;
  padding-top: 0.15rem;
  line-height: 1.4;
}

.idle-countdown {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--vx-primary);
  background-image: var(--vx-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}

/* ---------- 26. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .cred-card:hover,
  .category-card:hover,
  .stat-card:hover,
  .fav-tile:hover {
    transform: none;
  }
}

/* ---------- 27. Responsive refinements ---------- */
@media (min-width: 768px) {
  .chip-row {
    flex-wrap: wrap;
    overflow: visible;
  }
}

@media (max-width: 575.98px) {
  .toolbar .form-select,
  .toolbar .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .stat-grid {
    gap: 0.75rem;
  }

  .stat-card {
    padding: 0.95rem 1rem;
  }

  .stat-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 0.6rem;
    font-size: 1rem;
    border-radius: 11px;
  }

  .stat-value {
    font-size: 1.6rem;
  }

  .stat-hint {
    display: none;
  }

  .page-title {
    font-size: 1.4rem;
  }

  .detail-hero .brand-icon-lg {
    --size: 50px;
  }

  .health-item {
    padding: 0.6rem;
  }
}