/* ═══════════════════════════════════════════════════════════════════════════
   Liquid Glass — Surface Effects
   All rules scoped under [data-theme="glass"] — zero impact on other themes.
   Phases: Chrome → Cards → Inputs → Tables → Modals → Charts → Motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SVG noise texture (inline, ~400 bytes) ─────────────────────────────── */
:root {
  --zt-glass-noise-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 2 — LAYOUT SHELL: Sidebar + Navbar (glass-chrome tier)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Page Backdrop ──────────────────────────────────────────────────────── */
[data-theme="glass"] body {
  background:
    radial-gradient(ellipse at 20% 50%, color-mix(in srgb, var(--zt-primary) 6%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--zt-info) 5%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--zt-success) 4%, transparent) 0%, transparent 50%),
    var(--zt-bg) !important;
  background-attachment: fixed !important;
}

/* ── Sidebar (glass-chrome) ─────────────────────────────────────────────── */
[data-theme="glass"] .bg-menu-theme {
  background-color: var(--zt-glass-bg-chrome) !important;
  backdrop-filter: blur(var(--zt-glass-blur-chrome)) saturate(var(--zt-glass-saturate));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-chrome)) saturate(var(--zt-glass-saturate));
  border-inline-end: 1px solid var(--zt-glass-border-outer) !important;
  will-change: backdrop-filter;
}

[data-theme="glass"] .bg-menu-theme .menu-inner-shadow {
  background: linear-gradient(
    var(--zt-glass-bg-chrome) 41%,
    color-mix(in srgb, var(--zt-glass-bg-chrome) 80%, transparent) 95%,
    transparent
  ) !important;
}

/* ── Navbar (glass-chrome) ──────────────────────────────────────────────── */
[data-theme="glass"] .bg-navbar-theme {
  background-color: var(--zt-glass-bg-chrome) !important;
  backdrop-filter: blur(var(--zt-glass-blur-chrome)) saturate(var(--zt-glass-saturate));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-chrome)) saturate(var(--zt-glass-saturate));
  border-bottom: 1px solid var(--zt-glass-border-outer) !important;
  will-change: backdrop-filter;
}

[data-theme="glass"] .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page:before {
  background: transparent !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 3 — PRIMITIVE COMPONENTS: Cards, Buttons, Inputs, Badges
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Cards (glass-regular) ──────────────────────────────────────────────── */
[data-theme="glass"] .card {
  position: relative;
  background: var(--zt-glass-bg) !important;
  backdrop-filter: blur(var(--zt-glass-blur-regular)) saturate(var(--zt-glass-saturate));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-regular)) saturate(var(--zt-glass-saturate));
  border: 1px solid var(--zt-glass-border-outer) !important;
  border-radius: var(--zt-radius-lg) !important;
  box-shadow:
    inset 0 0.5px 0 var(--zt-glass-specular),
    inset 0 0 0 1px var(--zt-glass-border),
    var(--zt-shadow-sm) !important;
  overflow: hidden;
  contain: layout style paint;
}

/* Noise texture overlay */
[data-theme="glass"] .card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--zt-glass-noise-url);
  background-size: 200px 200px;
  opacity: var(--zt-glass-noise-opacity);
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 0;
}

/* Specular top-edge highlight */
[data-theme="glass"] .card::after {
  content: '';
  position: absolute;
  inset-inline: 10%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--zt-glass-specular), transparent);
  border-radius: 1px;
  pointer-events: none;
  z-index: 1;
}

/* Ensure card content sits above pseudo-elements */
[data-theme="glass"] .card > * {
  position: relative;
  z-index: 2;
}

[data-theme="glass"] .card-header,
[data-theme="glass"] .card-footer {
  background: transparent !important;
  border-color: var(--zt-glass-border-outer) !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
[data-theme="glass"] .btn {
  border-radius: var(--zt-radius-md) !important;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-theme="glass"] .btn-primary {
  background: var(--zt-primary) !important;
  border-color: var(--zt-primary) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--zt-primary) 30%, transparent);
}

[data-theme="glass"] .btn-primary:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--zt-primary) 40%, transparent);
  transform: translateY(-1px);
}

[data-theme="glass"] .btn-outline-primary {
  background: var(--zt-glass-bg-thin) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-theme="glass"] .btn-label-primary,
[data-theme="glass"] .btn-label-secondary {
  background: var(--zt-glass-bg-thin) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Form Controls ──────────────────────────────────────────────────────── */
[data-theme="glass"] .form-control,
[data-theme="glass"] .form-select {
  background: var(--zt-glass-bg-thin) !important;
  border: 1px solid var(--zt-glass-border-outer) !important;
  border-radius: var(--zt-radius-md) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--zt-text) !important;
  transition: all 0.2s ease;
}

[data-theme="glass"] .form-control:focus,
[data-theme="glass"] .form-select:focus {
  background: var(--zt-glass-bg) !important;
  border-color: var(--zt-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zt-primary) 15%, transparent),
              inset 0 0 8px color-mix(in srgb, var(--zt-primary) 5%, transparent) !important;
}

[data-theme="glass"] .form-control::placeholder {
  color: var(--zt-text-soft) !important;
}

[data-theme="glass"] .input-group-text {
  background: var(--zt-glass-bg-thin) !important;
  border-color: var(--zt-glass-border-outer) !important;
  color: var(--zt-text-muted) !important;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
[data-theme="glass"] .badge {
  border-radius: var(--zt-radius-sm) !important;
}

[data-theme="glass"] .badge.bg-label-primary,
[data-theme="glass"] .badge.bg-label-secondary,
[data-theme="glass"] .badge.bg-label-success,
[data-theme="glass"] .badge.bg-label-warning,
[data-theme="glass"] .badge.bg-label-danger,
[data-theme="glass"] .badge.bg-label-info {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 4 — COMPLEX COMPONENTS: Tables, Modals, Charts, Dropdowns
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Tables (glass-thick for max readability) ───────────────────────────── */
[data-theme="glass"] .table-responsive {
  background: var(--zt-glass-bg-thick);
  backdrop-filter: blur(var(--zt-glass-blur-thick));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-thick));
  border-radius: var(--zt-radius-lg);
}

[data-theme="glass"] .table {
  --bs-table-bg: transparent;
}

[data-theme="glass"] .table thead th {
  background: var(--zt-glass-bg-thin) !important;
  border-bottom: 1px solid var(--zt-glass-border-outer) !important;
  color: var(--zt-text) !important;
  font-weight: 600;
}

[data-theme="glass"] .table tbody tr {
  transition: background 0.15s ease;
}

[data-theme="glass"] .table tbody tr:hover {
  background: var(--zt-glass-bg-thin) !important;
}

[data-theme="glass"] .table td,
[data-theme="glass"] .table th {
  border-color: var(--zt-glass-border-outer) !important;
}

/* DataTables specific */
[data-theme="glass"] .dataTables_wrapper .dataTables_length,
[data-theme="glass"] .dataTables_wrapper .dataTables_filter,
[data-theme="glass"] .dataTables_wrapper .dataTables_info,
[data-theme="glass"] .dataTables_wrapper .dataTables_paginate {
  color: var(--zt-text-muted) !important;
}

/* ── Modals (glass-thick + overlay) ─────────────────────────────────────── */
[data-theme="glass"] .modal-content {
  position: relative;
  background: var(--zt-glass-bg-thick) !important;
  backdrop-filter: blur(var(--zt-glass-blur-thick)) saturate(var(--zt-glass-saturate));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-thick)) saturate(var(--zt-glass-saturate));
  border: 1px solid var(--zt-glass-border-outer) !important;
  border-radius: var(--zt-radius-lg) !important;
  box-shadow:
    inset 0 0.5px 0 var(--zt-glass-specular),
    inset 0 0 0 1px var(--zt-glass-border),
    var(--zt-shadow-lg) !important;
}

[data-theme="glass"] .modal-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-theme="glass"] .modal-header,
[data-theme="glass"] .modal-footer {
  background: transparent !important;
  border-color: var(--zt-glass-border-outer) !important;
}

/* ── SweetAlert2 ────────────────────────────────────────────────────────── */
[data-theme="glass"] .swal2-popup {
  background: var(--zt-glass-bg-thick) !important;
  backdrop-filter: blur(var(--zt-glass-blur-thick)) saturate(var(--zt-glass-saturate));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-thick)) saturate(var(--zt-glass-saturate));
  border: 1px solid var(--zt-glass-border-outer);
  border-radius: var(--zt-radius-lg) !important;
  box-shadow:
    inset 0 0.5px 0 var(--zt-glass-specular),
    var(--zt-shadow-lg);
  color: var(--zt-text) !important;
}

[data-theme="glass"] .swal2-title {
  color: var(--zt-text) !important;
}

[data-theme="glass"] .swal2-html-container {
  color: var(--zt-text-muted) !important;
}

/* ── Dropdowns (glass-regular) ──────────────────────────────────────────── */
[data-theme="glass"] .dropdown-menu {
  background: var(--zt-glass-bg) !important;
  backdrop-filter: blur(var(--zt-glass-blur-regular)) saturate(var(--zt-glass-saturate));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-regular)) saturate(var(--zt-glass-saturate));
  border: 1px solid var(--zt-glass-border-outer) !important;
  border-radius: var(--zt-radius-md) !important;
  box-shadow:
    inset 0 0.5px 0 var(--zt-glass-specular),
    inset 0 0 0 1px var(--zt-glass-border),
    var(--zt-shadow-md) !important;
}

[data-theme="glass"] .dropdown-item {
  color: var(--zt-text) !important;
  border-radius: var(--zt-radius-sm);
  transition: background 0.15s ease;
}

[data-theme="glass"] .dropdown-item:hover,
[data-theme="glass"] .dropdown-item:focus {
  background: var(--zt-glass-bg-thin) !important;
  color: var(--zt-text) !important;
}

/* ── Tooltips (glass-thin) ──────────────────────────────────────────────── */
[data-theme="glass"] .tooltip-inner {
  background: var(--zt-glass-bg-thick) !important;
  backdrop-filter: blur(var(--zt-glass-blur-thin));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-thin));
  color: var(--zt-text) !important;
  border: 1px solid var(--zt-glass-border-outer);
  border-radius: var(--zt-radius-sm) !important;
}

/* ── Charts (thick scrim for legibility) ────────────────────────────────── */
[data-theme="glass"] .apexcharts-canvas {
  background: var(--zt-glass-bg-thick);
  border-radius: var(--zt-radius-md);
  padding: 0.5rem;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
[data-theme="glass"] .page-item .page-link {
  background: var(--zt-glass-bg-thin) !important;
  border-color: var(--zt-glass-border-outer) !important;
  color: var(--zt-text) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--zt-radius-sm) !important;
  transition: all 0.2s ease;
}

[data-theme="glass"] .page-item .page-link:hover {
  background: var(--zt-glass-bg) !important;
  transform: translateY(-1px);
}

[data-theme="glass"] .page-item.active .page-link {
  background: var(--zt-primary) !important;
  border-color: var(--zt-primary) !important;
  color: var(--zt-primary-contrast) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--zt-primary) 30%, transparent);
}

/* ── Select2 ────────────────────────────────────────────────────────────── */
[data-theme="glass"] .select2-container--default .select2-selection {
  background: var(--zt-glass-bg-thin) !important;
  border-color: var(--zt-glass-border-outer) !important;
  border-radius: var(--zt-radius-md) !important;
}

[data-theme="glass"] .select2-container--default .select2-results__option--highlighted {
  background: color-mix(in srgb, var(--zt-primary) 15%, transparent) !important;
}

[data-theme="glass"] .select2-dropdown {
  background: var(--zt-glass-bg-thick) !important;
  backdrop-filter: blur(var(--zt-glass-blur-regular));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-regular));
  border-color: var(--zt-glass-border-outer) !important;
  border-radius: var(--zt-radius-md) !important;
}

/* ── Flatpickr ──────────────────────────────────────────────────────────── */
[data-theme="glass"] .flatpickr-calendar {
  background: var(--zt-glass-bg-thick) !important;
  backdrop-filter: blur(var(--zt-glass-blur-regular));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-regular));
  border: 1px solid var(--zt-glass-border-outer) !important;
  border-radius: var(--zt-radius-lg) !important;
  box-shadow: var(--zt-shadow-lg) !important;
}

/* ── Nav Tabs / Pills ───────────────────────────────────────────────────── */
[data-theme="glass"] .nav-tabs {
  background: var(--zt-glass-bg-thin) !important;
  backdrop-filter: blur(var(--zt-glass-blur-thin));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-thin));
  border-color: var(--zt-glass-border-outer) !important;
}

[data-theme="glass"] .nav-tabs .nav-link.active {
  background: var(--zt-glass-bg) !important;
  backdrop-filter: blur(var(--zt-glass-blur-regular));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-regular));
  box-shadow:
    inset 0 0.5px 0 var(--zt-glass-specular),
    var(--zt-shadow-sm) !important;
}

[data-theme="glass"] .nav-tabs .nav-link:hover:not(.active) {
  background: color-mix(in srgb, var(--zt-glass-bg-thin) 60%, transparent) !important;
}

[data-theme="glass"] .nav-pills .nav-link.active {
  background: var(--zt-glass-bg) !important;
  backdrop-filter: blur(var(--zt-glass-blur-thin));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-thin));
  box-shadow:
    inset 0 0.5px 0 var(--zt-glass-specular),
    var(--zt-shadow-sm);
  color: var(--zt-primary) !important;
}

/* ── Accordion ──────────────────────────────────────────────────────────── */
[data-theme="glass"] .accordion-item {
  background: var(--zt-glass-bg-thin) !important;
  border-color: var(--zt-glass-border-outer) !important;
}

[data-theme="glass"] .accordion-button {
  background: transparent !important;
  color: var(--zt-text) !important;
}

[data-theme="glass"] .accordion-button:not(.collapsed) {
  background: var(--zt-glass-bg-thin) !important;
  color: var(--zt-primary) !important;
}

/* ── List Groups ────────────────────────────────────────────────────────── */
[data-theme="glass"] .list-group-item {
  background: var(--zt-glass-bg-thin) !important;
  border-color: var(--zt-glass-border-outer) !important;
  color: var(--zt-text) !important;
}

[data-theme="glass"] .list-group-item:hover {
  background: var(--zt-glass-bg) !important;
}

/* ── Alert ──────────────────────────────────────────────────────────────── */
[data-theme="glass"] .alert {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--zt-radius-md) !important;
}

/* ── BS Stepper (Settings page) ─────────────────────────────────────────── */
[data-theme="glass"] .bs-stepper {
  background: var(--zt-glass-bg) !important;
  backdrop-filter: blur(var(--zt-glass-blur-regular));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-regular));
  border-radius: var(--zt-radius-lg) !important;
  border: 1px solid var(--zt-glass-border-outer);
  box-shadow: inset 0 0.5px 0 var(--zt-glass-specular), var(--zt-shadow-sm);
}

/* ── Loader ─────────────────────────────────────────────────────────────── */
[data-theme="glass"] .zt-loader-overlay,
[data-theme="glass"] #loading {
  background: var(--zt-glass-bg-thick) !important;
  backdrop-filter: blur(var(--zt-glass-blur-thick));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-thick));
}

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 5 — POLISH: Motion, Micro-interactions, A11y
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Card hover lift ────────────────────────────────────────────────────── */
[data-theme="glass"] .card {
  transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-theme="glass"] .card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0.5px 0 var(--zt-glass-specular),
    inset 0 0 0 1px var(--zt-glass-border),
    var(--zt-shadow-md) !important;
}

/* ── Glass appear animation ─────────────────────────────────────────────── */
@keyframes zt-glass-appear {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

[data-theme="glass"] .card {
  animation: zt-glass-appear 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* Stagger cards slightly */
[data-theme="glass"] .card:nth-child(2) { animation-delay: 0.05s; }
[data-theme="glass"] .card:nth-child(3) { animation-delay: 0.1s; }
[data-theme="glass"] .card:nth-child(4) { animation-delay: 0.15s; }

/* ── Focus visibility (high contrast on glass) ──────────────────────────── */
[data-theme="glass"] :where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid var(--zt-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--zt-primary) 20%, transparent);
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-theme="glass"] * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  [data-theme="glass"] .card::before {
    animation: none;
  }
}

/* ── Reduced transparency ───────────────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  [data-theme="glass"] {
    --zt-glass-bg: var(--zt-glass-bg-thick);
    --zt-glass-bg-thin: var(--zt-glass-bg-thick);
    --zt-glass-bg-chrome: rgba(255, 255, 255, 0.98);
    --zt-glass-noise-opacity: 0;
  }
  [data-theme="glass"][data-style="dark"] {
    --zt-glass-bg-chrome: rgba(28, 28, 30, 0.98);
  }
}

/* ── Backdrop-filter fallback ───────────────────────────────────────────── */
@supports not (backdrop-filter: blur(1px)) {
  [data-theme="glass"] .card,
  [data-theme="glass"] .modal-content,
  [data-theme="glass"] .dropdown-menu,
  [data-theme="glass"] .swal2-popup {
    background: var(--zt-glass-bg-thick) !important;
    box-shadow: var(--zt-shadow-md) !important;
  }
  [data-theme="glass"] .bg-menu-theme,
  [data-theme="glass"] .bg-navbar-theme {
    background-color: var(--zt-glass-bg-chrome) !important;
  }
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  [data-theme="glass"] * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: white !important;
    box-shadow: none !important;
  }
}

/* ── Theme Picker glass swatch style ────────────────────────────────────── */
[data-theme="glass"] .zt-picker__panel {
  background: var(--zt-glass-bg) !important;
  backdrop-filter: blur(var(--zt-glass-blur-regular)) saturate(var(--zt-glass-saturate));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-regular)) saturate(var(--zt-glass-saturate));
  border: 1px solid var(--zt-glass-border-outer) !important;
  border-radius: var(--zt-radius-md) !important;
}

/* ── Login Page (frosted glass panel) ───────────────────────────────────── */
[data-theme="glass"] .authentication-wrapper .card,
[data-theme="glass"] .auth-wrapper .card,
[data-theme="glass"] .zt-login__visual {
  background: var(--zt-glass-bg) !important;
  backdrop-filter: blur(var(--zt-glass-blur-thick)) saturate(var(--zt-glass-saturate));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur-thick)) saturate(var(--zt-glass-saturate));
  border: 1px solid var(--zt-glass-border-outer);
  box-shadow:
    inset 0 0.5px 0 var(--zt-glass-specular),
    inset 0 0 0 1px var(--zt-glass-border),
    var(--zt-shadow-lg);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Universal glassmorphic primitives (merge-plan §3.3) — work in every theme.
   `.glass` is a flat translucent surface. `.glow-card` adds a masked gradient
   border ring via ::before with mask-composite: exclude.
   ═══════════════════════════════════════════════════════════════════════════ */

.glass {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--zt-text)  6%, transparent),
    color-mix(in srgb, var(--zt-text)  2%, transparent));
  border: 1px solid color-mix(in srgb, var(--zt-text) 14%, transparent);
  border-radius: var(--zt-radius-lg);
  backdrop-filter: blur(var(--zt-glass-blur, 12px));
  -webkit-backdrop-filter: blur(var(--zt-glass-blur, 12px));
  box-shadow: var(--zt-shadow-md);
}

.glow-card {
  position: relative;
  border-radius: var(--zt-radius-lg);
  isolation: isolate;
  transition: transform var(--zt-dur-3, 480ms) var(--zt-ease-out, ease-out),
              box-shadow var(--zt-dur-3, 480ms) var(--zt-ease-out, ease-out);
}
.glow-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--zt-grad-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.glow-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--zt-shadow-lg);
}