@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Sora:wght@500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    /* ── Dracula Light — white canvas, Dracula vocabulary ── */
    --zvv-bg:       #f8f8f2;   /* Dracula cream — keeps the warmth */
    --zvv-panel:    #ffffff;
    --zvv-ink:      #282a36;   /* Dracula bg as text — deep purple-gray */
    --zvv-muted:    #6272a4;   /* Dracula comment */
    --zvv-line:     #e4e2f0;   /* lavender-tinted separator */
    --zvv-green:    #16a34a;
    --zvv-teal:     #0891b2;
    --zvv-blue:     #4f46e5;
    --zvv-card-dark:#282a36;
    /* ── Dracula accent palette (darkened for white bg readability) ── */
    --drac-purple:  #7c3aed;
    --drac-pink:    #db2777;
    --drac-cyan:    #0891b2;
    --drac-green:   #16a34a;
    --drac-yellow:  #ca8a04;
    --drac-orange:  #ea580c;
    --drac-red:     #dc2626;
}

/* ── Dracula dark ── */
[data-bs-theme="dark"] {
    --zvv-bg:       #282a36;   /* Dracula background */
    --zvv-panel:    #1e1f2e;   /* slightly deeper panel */
    --zvv-ink:      #f8f8f2;   /* Dracula foreground */
    --zvv-muted:    #6272a4;   /* Dracula comment */
    --zvv-line:     #44475a;   /* Dracula current line */
    --zvv-card-dark:#191a26;
    /* ── Full Dracula accent palette ── */
    --drac-purple:  #bd93f9;
    --drac-pink:    #ff79c6;
    --drac-cyan:    #8be9fd;
    --drac-green:   #50fa7b;
    --drac-yellow:  #f1fa8c;
    --drac-orange:  #ffb86c;
    --drac-red:     #ff5555;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(124, 58, 237, 0.06), transparent 38rem),
        radial-gradient(circle at 85% 80%, rgba(219, 39, 119, 0.04), transparent 34rem),
        linear-gradient(180deg, var(--zvv-bg), var(--zvv-bg));
    color: var(--zvv-ink);
    font-family: "Plus Jakarta Sans", "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Sticky footer: main content grows to fill all space above the footer */
body > main,
body > .wallet-app {
    flex: 1 0 0%;
}

.zvv-footer {
    flex-shrink: 0;
}

.wallet-app {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
}

.fw-black {
    font-weight: 900;
}

/* ══════════════════════════════════════════════════════════════
   ZVV SITE HEADER  (zvv-header-*)
   Dark-glass violet theme — shared across all public pages
══════════════════════════════════════════════════════════════ */

.zvv-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: rgba(40, 42, 54, 0.92);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid rgba(189, 147, 249, 0.22);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.32);
}

/* Subtle top-edge violet glow line */
.zvv-header::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124,58,237,0.7) 30%, rgba(79,70,229,0.7) 70%, transparent);
}

.zvv-header-inner {
    display: flex;
    align-items: center;
    gap: 0;
    height: 64px;
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Brand ── */
.zvv-header-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 28px;
}

.zvv-header-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 20px rgba(124,58,237,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
    flex-shrink: 0;
}

.zvv-header-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.zvv-header-brand-text strong {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
}

.zvv-header-sub {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.zvv-header-admin-badge {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    letter-spacing: 0.8px;
    vertical-align: middle;
}

/* ── Primary nav links ── */
.zvv-header-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.zvv-header-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    position: relative;
    white-space: nowrap;
}

.zvv-header-link i { font-size: 14px; }

.zvv-header-link:hover {
    background: rgba(124,58,237,0.14);
    color: rgba(255,255,255,0.9);
}

.zvv-header-link.active {
    background: rgba(124,58,237,0.2);
    color: #bd93f9;
    box-shadow: inset 0 0 0 1px rgba(124,58,237,0.3);
}

.zvv-header-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(124,58,237,0.5);
    margin-left: 2px;
}

/* ── Right-side actions ── */
.zvv-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Icon buttons (dark mode, bell) */
.zvv-header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(189,147,249,0.08);
    color: rgba(255,255,255,0.7);
    font-size: 15px;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
    position: relative;
}

.zvv-header-icon-btn:hover {
    background: rgba(124,58,237,0.18);
    border-color: rgba(124,58,237,0.4);
    color: #bd93f9;
}

/* Show sun/moon based on theme */
.zvv-icon-light { display: none; }
.zvv-icon-dark  { display: block; }
[data-bs-theme="dark"] .zvv-icon-light { display: block; }
[data-bs-theme="dark"] .zvv-icon-dark  { display: none; }

/* Notification button + dot */
.zvv-header-notif-btn { gap: 0; }

.zvv-header-notif-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #7c3aed;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(10,6,30,0.8);
    line-height: 1;
}

/* CTA / primary button */
.zvv-header-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 17px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(124,58,237,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: opacity 0.14s, transform 0.12s;
    white-space: nowrap;
}

.zvv-header-cta:hover { opacity: 0.88; transform: translateY(-1px); color: #fff; }
.zvv-header-cta i { font-size: 14px; }

/* Ghost button (sign in) */
.zvv-header-ghost-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.15);
    text-decoration: none;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.zvv-header-ghost-btn:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}

/* ── User menu button ── */
.zvv-header-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 5px 5px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(189,147,249,0.08);
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    max-width: 200px;
    transition: background 0.14s, border-color 0.14s;
}

.zvv-header-user-btn:hover {
    background: rgba(124,58,237,0.15);
    border-color: rgba(124,58,237,0.35);
    color: #fff;
}

.zvv-header-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
}

.zvv-header-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
}

.zvv-header-chevron {
    font-size: 10px;
    opacity: 0.5;
    flex-shrink: 0;
}

/* ── User dropdown ── */
.zvv-user-dropdown {
    background: #100c28 !important;
    border: 1px solid rgba(124,58,237,0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(124,58,237,0.08) !important;
    min-width: 220px;
    overflow: hidden;
    padding: 8px !important;
}

.zvv-user-dropdown-who {
    padding: 10px 12px 6px;
}

.zvv-user-dropdown-who strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.zvv-user-dropdown-who span {
    display: block;
    font-size: 11.5px;
    color: rgba(255,255,255,0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zvv-dd-sep {
    border-color: rgba(124,58,237,0.15) !important;
    margin: 6px 0 !important;
}

.zvv-dd-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
    width: 100%;
}

.zvv-dd-item i { font-size: 14px; color: #bd93f9; flex-shrink: 0; }

.zvv-dd-item:hover {
    background: rgba(124,58,237,0.14);
    color: #fff;
}

.zvv-dd-badge {
    margin-left: auto;
    background: #7c3aed;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 999px;
}

.zvv-dd-logout { color: rgba(255,100,100,0.8) !important; }
.zvv-dd-logout i { color: rgba(255,100,100,0.8) !important; }
.zvv-dd-logout:hover { background: rgba(239,68,68,0.12) !important; color: #f87171 !important; }

/* ── Notification dropdown ── */
.zvv-notif-dropdown {
    background: #100c28 !important;
    border: 1px solid rgba(124,58,237,0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important;
    overflow: hidden;
    width: min(92vw, 360px);
}

.zvv-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(124,58,237,0.14);
}

.zvv-notif-head strong {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.zvv-notif-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
}

.zvv-notif-list { max-height: 380px; overflow-y: auto; }

.zvv-notif-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(124,58,237,0.08);
    text-decoration: none;
    transition: background 0.13s;
}

.zvv-notif-item:hover { background: rgba(124,58,237,0.1); }
.zvv-notif-item.unread { background: rgba(124,58,237,0.07); }
.zvv-notif-item:last-child { border-bottom: none; }

.zvv-notif-title-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.zvv-notif-new-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: #7c3aed;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.6;
    flex-shrink: 0;
}

.zvv-notif-unread-dot {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}

.zvv-notif-item.unread .zvv-notif-body strong { color: #c4b5fd; }

.zvv-notif-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed33, #4f46e533);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zvv-notif-icon i { font-size: 14px; color: #bd93f9; }

.zvv-notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.zvv-notif-body strong { font-size: 13px; font-weight: 700; color: #fff; }

.zvv-notif-body small {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zvv-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 20px;
    color: rgba(255,255,255,0.3);
    font-size: 13px;
    font-weight: 600;
}

.zvv-notif-empty i { font-size: 28px; opacity: 0.4; }

/* ── Mobile hamburger ── */
.zvv-header-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(189,147,249,0.08);
    cursor: pointer;
}

.zvv-header-hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: rgba(255,255,255,0.75);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s, width 0.2s;
}

.zvv-header-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.zvv-header-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.zvv-header-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer ── */
.zvv-header-drawer {
    position: fixed;
    inset: 64px 0 0 0;
    background: rgba(8, 5, 24, 0.97);
    backdrop-filter: blur(18px);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    z-index: 1035;
    overflow-y: auto;
    border-right: 1px solid rgba(124,58,237,0.18);
    max-width: 300px;
}

.zvv-header-drawer.open { transform: translateX(0); }

.zvv-header-backdrop {
    position: fixed;
    inset: 64px 0 0 0;
    background: rgba(0,0,0,0.5);
    z-index: 1034;
    display: none;
    backdrop-filter: blur(2px);
}

.zvv-header-backdrop.open { display: block; }

.zvv-drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    gap: 2px;
}

.zvv-drawer-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
}

.zvv-drawer-link i { font-size: 16px; color: #bd93f9; }

.zvv-drawer-link:hover,
.zvv-drawer-link.active {
    background: rgba(124,58,237,0.15);
    color: #fff;
}

.zvv-drawer-link.active { color: #bd93f9; }

.zvv-drawer-cta {
    background: linear-gradient(135deg, #7c3aed22, #4f46e522);
    color: #bd93f9 !important;
    border: 1px solid rgba(124,58,237,0.3);
    margin-top: 4px;
}

.zvv-drawer-logout { color: rgba(255,100,100,0.8) !important; }
.zvv-drawer-logout i { color: rgba(255,100,100,0.6) !important; }

.zvv-drawer-sep {
    height: 1px;
    background: rgba(124,58,237,0.12);
    margin: 8px 0;
}

/* ── Image helpers shared across avatar contexts ── */
.nav-avatar img,
.zvv-header-avatar img,
.message-avatar img,
.comment-avatar img,
.author-profile-avatar img,
.author-widget-avatar img,
.admin-user-avatar img,
.profile-card-avatar img,
.profile-picture-preview img {
    border-radius: inherit;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* Legacy aliases — some pages still reference these */
.nav-unread-badge {
    background: #7c3aed;
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    margin-left: 5px;
    min-width: 20px;
    padding: 4px 6px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .zvv-header-nav { display: none; }
    .zvv-header-hamburger { display: flex; }
    .zvv-header-cta span { display: none; }
    .zvv-header-cta { padding: 8px 12px; }
    .zvv-header-ghost-btn { display: none; }
    .zvv-header-user-name { display: none; }
    .zvv-header-user-btn { padding: 5px; border-radius: 50%; }
    .zvv-header-chevron { display: none; }
}

@media (max-width: 600px) {
    .zvv-header-inner { padding: 0 14px; gap: 6px; }
    .zvv-header-brand-text { display: none; }
    .zvv-header-logo { width: 38px; height: 38px; }
    .zvv-header-cta { display: none; }
}

/* ── Legacy compat: pages that still use .notification-head etc. ── */
.notification-dropdown { display: none; } /* replaced by zvv-notif-dropdown */
.notification-head {
    align-items: center;
    border-bottom: 1px solid var(--zvv-line);
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
}

.notification-head strong {
    color: var(--zvv-ink);
    font-weight: 900;
}

.notification-auto-read {
    color: var(--zvv-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.notification-list {
    max-height: 390px;
    overflow: auto;
}

.notification-item {
    align-items: start;
    border-bottom: 1px solid color-mix(in srgb, var(--zvv-line) 70%, transparent);
    color: var(--zvv-ink);
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 13px 16px;
    text-decoration: none;
}

.notification-item:hover {
    background: color-mix(in srgb, var(--zvv-bg) 78%, transparent);
    color: var(--zvv-ink);
}

.notification-item.unread {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.12), rgba(37, 99, 235, 0.07));
}

.notification-item i {
    align-items: center;
    background: var(--zvv-green);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.notification-item span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.notification-item strong {
    font-size: 0.92rem;
    font-weight: 900;
}

.notification-item small {
    color: var(--zvv-muted);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-empty {
    color: var(--zvv-muted);
    font-weight: 800;
    padding: 18px;
    text-align: center;
}

.pending-payment-list {
    display: grid;
    gap: 12px;
}

.pending-payment-item {
    align-items: center;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.1), rgba(37, 99, 235, 0.07));
    border: 1px solid color-mix(in srgb, var(--zvv-green) 36%, var(--zvv-line));
    border-radius: 8px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 14px;
}

.pending-payment-item strong,
.pending-payment-item span {
    display: block;
}

.pending-payment-item strong {
    color: var(--zvv-ink);
    font-size: 1.04rem;
    font-weight: 900;
}

.pending-payment-item span {
    color: var(--zvv-muted);
    font-size: 0.9rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.mini-label {
    color: var(--zvv-muted);
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.auth-page {
    display: grid;
    min-height: calc(100vh - 74px);
    place-items: center;
    padding: 24px;
}

.auth-shell {
    width: min(100%, 1040px);
}

.auth-shell-register {
    width: min(100%, 1240px);
}

.auth-shell-narrow {
    width: min(100%, 560px);
}

.reward-announcement {
    align-items: center;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.14), rgba(37, 99, 235, 0.11));
    border: 1px solid color-mix(in srgb, var(--zvv-green) 34%, var(--zvv-line));
    border-radius: 8px;
    color: var(--zvv-ink);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
}

.reward-announcement i {
    align-items: center;
    background: var(--zvv-green);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.reward-announcement span {
    color: var(--zvv-ink);
    font-weight: 800;
}

.reward-announcement a {
    color: var(--zvv-teal);
    font-weight: 900;
    margin-left: auto;
    text-decoration: none;
}

.nav-unread-badge {
    background: var(--zvv-green);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    margin-left: 5px;
    min-width: 20px;
    padding: 4px 6px;
}

.messages-hero {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(16, 24, 40, 0.94), rgba(15, 118, 110, 0.88)),
        var(--zvv-card-dark);
    border-radius: 8px;
    color: #ffffff;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(28px, 5vw, 48px);
    position: relative;
}

.messages-hero::after {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 34px 34px;
    content: "";
    inset: 0;
    opacity: 0.18;
    position: absolute;
}

.messages-hero > * {
    position: relative;
    z-index: 1;
}

.messages-hero h1 {
    font-size: clamp(2.2rem, 5vw, 4.3rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.96;
    margin: 8px 0;
}

.messages-hero p {
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    max-width: 620px;
}

.message-list {
    display: grid;
    gap: 10px;
}

.message-row {
    align-items: center;
    background: color-mix(in srgb, var(--zvv-bg) 70%, transparent);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    color: var(--zvv-ink);
    display: grid;
    gap: 14px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 14px;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.message-row:hover {
    border-color: color-mix(in srgb, var(--zvv-green) 42%, var(--zvv-line));
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
    color: var(--zvv-ink);
    transform: translateY(-1px);
}

.message-row.unread {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.12), rgba(37, 99, 235, 0.08));
    border-color: color-mix(in srgb, var(--zvv-green) 40%, var(--zvv-line));
}

.message-avatar {
    align-items: center;
    background: linear-gradient(135deg, var(--zvv-teal), var(--zvv-blue));
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-weight: 900;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.message-content {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.message-content strong,
.message-content span,
.message-content small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-content small {
    color: var(--zvv-muted);
    font-weight: 800;
}

.message-content span {
    color: var(--zvv-muted);
}

.message-unread-dot {
    background: var(--zvv-green);
    border-radius: 999px;
    height: 10px;
    width: 10px;
}

.empty-message-box {
    align-items: center;
    border: 1px dashed var(--zvv-line);
    border-radius: 8px;
    color: var(--zvv-muted);
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 40px 20px;
    text-align: center;
}

.empty-message-box i {
    color: var(--zvv-green);
    font-size: 2rem;
}

.message-detail h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    margin: 10px 0 18px;
}

.message-meta {
    border-bottom: 1px solid var(--zvv-line);
    color: var(--zvv-muted);
    display: grid;
    gap: 8px;
    font-weight: 800;
    margin-bottom: 24px;
    padding-bottom: 18px;
}

.message-body {
    color: var(--zvv-ink);
    font-size: 1.06rem;
    line-height: 1.8;
}

[data-bs-theme="dark"] .reward-announcement {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.2), rgba(37, 99, 235, 0.16));
}

.security-status {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 900;
    gap: 6px;
    padding: 8px 12px;
    white-space: nowrap;
}

.security-status.enabled {
    background: rgba(22, 163, 74, 0.14);
    color: var(--zvv-green);
}

.security-status.disabled {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.profile-detail-list {
    display: grid;
    gap: 8px;
}

.profile-detail-list div {
    align-items: center;
    color: var(--zvv-muted);
    display: flex;
    font-size: 0.94rem;
    font-weight: 800;
    gap: 8px;
}

.profile-detail-list i {
    color: var(--zvv-green);
}

.account-type-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-type-option {
    align-items: start;
    background: color-mix(in srgb, var(--zvv-bg) 72%, transparent);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 12px;
}

.account-type-option:has(input:checked) {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.13), rgba(37, 99, 235, 0.08));
    border-color: color-mix(in srgb, var(--zvv-green) 45%, var(--zvv-line));
}

.account-type-option input {
    margin-top: 4px;
}

.account-type-option strong,
.account-type-option small {
    display: block;
}

.account-type-option strong {
    color: var(--zvv-ink);
    font-weight: 900;
}

.account-type-option small {
    color: var(--zvv-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}

.two-factor-setup {
    align-items: center;
    background: color-mix(in srgb, var(--zvv-bg) 78%, transparent);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 12px;
}

.two-factor-qr-panel {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(22, 163, 74, 0.1), rgba(37, 99, 235, 0.08)),
        var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    display: grid;
    gap: 18px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 16px;
}

.two-factor-qr {
    align-items: center;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--zvv-line) 70%, #ffffff);
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
    color: var(--zvv-muted);
    display: flex;
    font-weight: 900;
    height: 204px;
    justify-content: center;
    padding: 12px;
    width: 204px;
}

/* qrcodejs promotes the generated QR image and hides its canvas inline. */
.two-factor-qr canvas { display: none; }
.two-factor-qr img {
    display: block;
    height: 180px;
    width: 180px;
}

.two-factor-qr.qr-unavailable {
    color: #b45309;
    text-align: center;
}

.two-factor-setup span {
    color: var(--zvv-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.two-factor-setup code {
    color: var(--zvv-ink);
    font-size: 0.95rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.two-factor-input {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.28rem;
}

.two-factor-input.compact {
    font-size: 1.05rem;
    letter-spacing: 0.18rem;
}

.brand-panel {
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.95), rgba(37, 99, 235, 0.9)),
        var(--zvv-card-dark);
    border-radius: 8px;
    color: #ffffff;
    min-height: 100%;
    overflow: hidden;
    padding: clamp(28px, 4vw, 48px);
    position: relative;
}

.brand-panel::after {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    inset: 0;
    opacity: 0.35;
    position: absolute;
}

.brand-panel > * {
    position: relative;
    z-index: 1;
}

.brand-mark {
    align-items: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    display: inline-flex;
    font-size: 1.25rem;
    font-weight: 900;
    height: 54px;
    justify-content: center;
    width: 76px;
}

.brand-panel h1 {
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    font-weight: 900;
    line-height: 0.95;
    margin: 64px 0 18px;
}

.auth-card,
.wallet-card,
.profile-card {
    background: var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
}

.profile-card-avatar,
.profile-picture-preview,
.author-widget-avatar {
    align-items: center;
    background: linear-gradient(135deg, var(--zvv-teal), var(--zvv-blue));
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
}

.profile-card-avatar {
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
    font-size: 1.7rem;
    height: 86px;
    width: 86px;
}

.profile-picture-card {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(22, 163, 74, 0.08), rgba(37, 99, 235, 0.08)),
        var(--zvv-bg);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    display: grid;
    gap: 16px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 16px;
}

.profile-picture-preview {
    font-size: 1.8rem;
    height: 92px;
    width: 92px;
}

.author-widget-avatar {
    font-size: 1.35rem;
    height: 58px;
    margin: 10px 0 8px;
    width: 58px;
}

.auth-card {
    padding: clamp(26px, 4vw, 44px);
}

.auth-card h2 {
    font-weight: 900;
}

.wallet-layout {
    max-width: 1440px;
}

.app-sidebar {
    align-content: start;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 118, 110, 0.92)),
        #101828;
    color: #ffffff;
    display: grid;
    gap: 28px;
    min-height: 100vh;
    padding: 28px 20px;
    position: sticky;
    top: 0;
}

.sidebar-brand {
    align-items: center;
    color: inherit;
    display: inline-flex;
    gap: 12px;
    text-decoration: none;
}

.sidebar-brand:hover {
    color: inherit;
}

.sidebar-brand span {
    align-items: center;
    background: linear-gradient(135deg, #20c997, #60a5fa);
    border-radius: 8px;
    color: #ffffff;
    display: inline-flex;
    font-weight: 900;
    height: 44px;
    justify-content: center;
    width: 60px;
}

.sidebar-brand strong {
    font-size: 1.2rem;
    font-weight: 900;
}

.sidebar-nav {
    display: grid;
    gap: 8px;
}

.sidebar-nav a,
.sidebar-nav button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    font: inherit;
    font-weight: 800;
    gap: 12px;
    padding: 13px 14px;
    text-align: left;
    text-decoration: none;
}

.sidebar-nav a:hover,
.sidebar-nav button:hover,
.sidebar-nav .active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.sidebar-nav i {
    font-size: 1.15rem;
}

.sidebar-footer {
    align-self: end;
}

.app-main {
    min-width: 0;
    padding: clamp(18px, 3vw, 36px);
}

.mobile-topbar {
    align-items: center;
    background: var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    display: none;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 12px;
}

.dashboard-header {
    align-items: end;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 24px;
}

.dashboard-header h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    letter-spacing: 0;
    margin: 4px 0;
}

.header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-wallet {
    position: relative;
}

.wallet-card,
.wallet-glass-card {
    background:
        linear-gradient(135deg, rgba(16, 24, 40, 0.97), rgba(15, 118, 110, 0.9)),
        var(--zvv-card-dark);
    color: #ffffff;
    overflow: hidden;
    padding: clamp(24px, 4vw, 38px);
    position: relative;
}

.wallet-glass-card {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.2);
}

.wallet-card::after,
.wallet-glass-card::after {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 46px 46px;
    content: "";
    inset: 0;
    opacity: 0.3;
    position: absolute;
}

.wallet-card > *,
.wallet-glass-card > * {
    position: relative;
    z-index: 1;
}

.wallet-card-top {
    align-items: start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.balance-display {
    font-size: clamp(2.1rem, 6vw, 5rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    margin: 0.4rem 0 0;
    overflow-wrap: anywhere;
}

.balance-display span {
    color: #b7f7d0;
    font-size: clamp(1rem, 2vw, 1.5rem);
}

.status-pill {
    align-self: start;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: #dffbea;
    font-weight: 800;
    padding: 8px 13px;
}

.wallet-address-box {
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 12px;
}

.wallet-address-box.compact {
    background: color-mix(in srgb, var(--zvv-bg) 72%, transparent);
    border-color: var(--zvv-line);
}

.wallet-address-box span {
    color: color-mix(in srgb, currentColor 72%, transparent);
    font-size: 0.8rem;
    font-weight: 800;
}

.wallet-address-box code {
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-tile {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 16px;
}

.metric-tile span {
    color: #cfd8e3;
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
}

.metric-tile strong {
    display: block;
    font-size: 1.2rem;
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.chain-orbit {
    align-items: center;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: grid;
    justify-items: center;
    min-width: 132px;
    position: relative;
}

.chain-orbit span {
    border: 1px solid rgba(183, 247, 208, 0.75);
    border-radius: 50%;
    position: absolute;
}

.chain-orbit span:nth-child(1) {
    height: 28px;
    width: 28px;
}

.chain-orbit span:nth-child(2) {
    height: 74px;
    width: 74px;
}

.chain-orbit span:nth-child(3) {
    height: 112px;
    width: 112px;
}

.asset-icon {
    align-items: center;
    background: linear-gradient(135deg, #16a34a, #2563eb);
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    font-size: 1.35rem;
    font-weight: 900;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.asset-row {
    align-items: center;
    border-bottom: 1px solid var(--zvv-line);
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
}

.asset-row span {
    color: var(--zvv-muted);
    font-weight: 700;
}

.asset-row strong {
    font-weight: 900;
    overflow-wrap: anywhere;
    text-align: right;
}

.wallet-feature-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wallet-feature-card {
    align-items: start;
    background:
        linear-gradient(135deg, rgba(22, 163, 74, 0.1), rgba(37, 99, 235, 0.07)),
        var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 18px;
}

.wallet-feature-card i {
    align-items: center;
    background: linear-gradient(135deg, var(--zvv-green), var(--zvv-blue));
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.wallet-feature-card strong,
.wallet-feature-card span {
    display: block;
}

.wallet-feature-card strong {
    color: var(--zvv-ink);
    font-weight: 900;
    margin-bottom: 4px;
}

.wallet-feature-card span {
    color: var(--zvv-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.crypto-rating-panel {
    overflow: hidden;
}

.crypto-rating-stamp {
    align-items: center;
    background: color-mix(in srgb, var(--zvv-bg) 74%, transparent);
    border: 1px solid var(--zvv-line);
    border-radius: 999px;
    color: var(--zvv-ink);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 900;
    gap: 7px;
    padding: 8px 12px;
}

.crypto-rating-list {
    display: grid;
    gap: 10px;
}

.crypto-rating-row {
    align-items: center;
    background: color-mix(in srgb, var(--zvv-bg) 70%, transparent);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(170px, 1.2fr) minmax(120px, 1fr) auto auto;
    padding: 12px;
}

.crypto-asset-cell {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.crypto-asset-cell > span {
    align-items: center;
    background: linear-gradient(135deg, #101828, var(--zvv-teal));
    border-radius: 8px;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 900;
    height: 38px;
    justify-content: center;
    width: 52px;
}

.crypto-asset-cell strong,
.crypto-asset-cell small {
    display: block;
}

.crypto-asset-cell strong {
    color: var(--zvv-ink);
    font-weight: 900;
}

.crypto-asset-cell small {
    color: var(--zvv-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.crypto-score-cell {
    background: color-mix(in srgb, var(--zvv-line) 62%, transparent);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.crypto-score-cell span {
    background: linear-gradient(90deg, var(--zvv-green), var(--zvv-blue));
    border-radius: inherit;
    display: block;
    height: 100%;
}

.crypto-grade {
    color: var(--zvv-ink);
    font-size: 1rem;
    font-weight: 900;
    text-align: center;
}

.crypto-risk {
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    padding: 6px 10px;
    text-align: center;
    white-space: nowrap;
}

.crypto-risk.medium {
    background: rgba(37, 99, 235, 0.13);
    color: var(--zvv-blue);
}

.crypto-risk.high {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

.crypto-risk.platform {
    background: rgba(22, 163, 74, 0.14);
    color: var(--zvv-green);
}

.card,
.modal-content,
.form-control,
.form-select {
    border-radius: 8px;
}

.card {
    background: var(--zvv-panel);
}

.wallet-table td,
.wallet-table th {
    padding: 1rem 1.25rem;
    white-space: nowrap;
}

.wallet-table thead th {
    color: var(--zvv-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tx-cell {
    align-items: center;
    display: flex;
    gap: 12px;
}

.tx-icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 auto;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.tx-icon.credit {
    background: rgba(22, 163, 74, 0.14);
    color: #16a34a;
}

.tx-icon.debit {
    background: rgba(245, 158, 11, 0.16);
    color: #d97706;
}

.qr-card {
    aspect-ratio: 1;
    background:
        linear-gradient(90deg, currentColor 10px, transparent 10px) 0 0 / 22px 22px,
        linear-gradient(currentColor 10px, transparent 10px) 0 0 / 22px 22px,
        var(--zvv-bg);
    border: 10px solid var(--zvv-panel);
    box-shadow: inset 0 0 0 1px var(--zvv-line), 0 16px 38px rgba(15, 23, 42, 0.12);
    color: var(--zvv-ink);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 34px;
    padding: 18px;
    width: min(100%, 220px);
}

.qr-card-large {
    width: 260px;
}

.qr-card span {
    background: var(--zvv-panel);
    border: 8px solid currentColor;
}

.qr-card span:nth-child(4) {
    opacity: 0.28;
}

.small-address {
    background: color-mix(in srgb, var(--zvv-bg) 78%, transparent);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    overflow: hidden;
    padding: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.security-list {
    display: grid;
    gap: 12px;
}

.security-list div {
    align-items: center;
    background: color-mix(in srgb, var(--zvv-bg) 80%, transparent);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    display: flex;
    gap: 10px;
    padding: 12px;
}

.security-list i {
    color: var(--zvv-green);
}

.blog-hero {
    align-items: end;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(37, 99, 235, 0.88)),
        var(--zvv-card-dark);
    border-radius: 8px;
    color: #ffffff;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    min-height: 300px;
    overflow: hidden;
    padding: clamp(28px, 5vw, 56px);
    position: relative;
}

.blog-hero::after {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 48px 48px;
    content: "";
    inset: 0;
    opacity: 0.34;
    position: absolute;
}

.blog-hero > * {
    position: relative;
    z-index: 1;
}

.blog-hero h1 {
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-weight: 900;
    line-height: 0.95;
    margin: 6px 0 14px;
}

.blog-hero p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.1rem;
    margin: 0;
    max-width: 680px;
}

.official-blog {
    background:
        radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.09), transparent 28rem),
        radial-gradient(circle at 88% 4%, rgba(99, 102, 241, 0.07), transparent 26rem),
        var(--zvv-bg);
}

.official-hero {
    background:
        linear-gradient(135deg, rgba(12, 20, 34, 0.96), rgba(15, 118, 110, 0.9)),
        #101828;
    color: #ffffff;
    overflow: hidden;
    padding: clamp(70px, 11vw, 150px) 0 clamp(42px, 8vw, 90px);
    position: relative;
}

.official-hero::after {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 56px 56px;
    content: "";
    inset: 0;
    opacity: 0.32;
    position: absolute;
}

.official-hero .container {
    position: relative;
    z-index: 1;
}

.official-hero h1 {
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.86;
    margin: 10px 0 22px;
}

.official-hero p {
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.6;
    margin: 0;
    max-width: 780px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.official-stat-panel {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    backdrop-filter: blur(18px);
    display: grid;
    gap: 1px;
    min-width: min(100%, 280px);
    overflow: hidden;
}

.official-stat-panel div {
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
}

.official-stat-panel span {
    color: rgba(255, 255, 255, 0.68);
    font-weight: 700;
}

.official-stat-panel strong {
    font-weight: 900;
    text-align: right;
}

.section-kicker {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.section-kicker h2 {
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.5rem, 3.2vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}

.official-feature {
    background: var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12);
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) 1fr;
    overflow: hidden;
}

.official-feature-art {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(22, 163, 74, 0.88)),
        #101828;
    color: #ffffff;
    display: grid;
    min-height: 360px;
    place-items: center;
    overflow: hidden;
    position: relative;
}

.official-feature-art span {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: inline-flex;
    font-size: clamp(5rem, 12vw, 10rem);
    font-weight: 900;
    height: 220px;
    justify-content: center;
    position: relative;
    width: 220px;
    z-index: 1;
}

.official-feature-body {
    align-content: center;
    display: grid;
    padding: clamp(28px, 5vw, 58px);
}

.official-feature-body h3 {
    font-size: clamp(2rem, 5vw, 4.4rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.96;
    margin: 14px 0 18px;
}

.official-feature-body p {
    color: var(--zvv-muted);
    font-size: 1.08rem;
    line-height: 1.7;
}

.official-empty {
    background: var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 24px;
    box-shadow: 0 8px 36px rgba(91, 33, 182, 0.07);
    padding: clamp(40px, 6vw, 72px);
    text-align: center;
}

.official-empty h2 {
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 8px 0 12px;
}

.official-empty p {
    color: var(--zvv-muted);
    font-size: 1.05rem;
}

.official-footer {
    background: var(--zvv-panel);
    border-top: 1px solid var(--zvv-line);
    color: var(--zvv-muted);
    font-size: 0.9rem;
    font-weight: 800;
    padding: 28px 0;
}

.newspaper-blog {
    background:
        radial-gradient(circle at 18% 0%, rgba(124, 58, 237, 0.08), transparent 30rem),
        radial-gradient(circle at 82% 8%, rgba(99, 102, 241, 0.07), transparent 28rem),
        var(--zvv-bg);
}

.newspaper-masthead {
    background:
        radial-gradient(circle at 85% 20%, rgba(96, 165, 250, 0.28), transparent 22rem),
        radial-gradient(circle at 15% 88%, rgba(22, 163, 74, 0.24), transparent 24rem),
        linear-gradient(135deg, #13141f 0%, #10243a 48%, #0f766e 100%);
    color: #ffffff;
    overflow: hidden;
    padding: clamp(34px, 7vw, 82px) 0 clamp(46px, 8vw, 98px);
    position: relative;
}

.hero-particles {
    height: 100%;
    inset: 0;
    opacity: 0.44;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.newspaper-masthead::after {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 54px 54px;
    content: "";
    inset: 0;
    opacity: 0.28;
    position: absolute;
}

.newspaper-masthead::before {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    content: "";
    height: 520px;
    position: absolute;
    right: -160px;
    top: 80px;
    width: 520px;
}

.newspaper-masthead .container {
    position: relative;
    z-index: 2;
}

.masthead-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.74);
    display: flex;
    font-size: 0.86rem;
    font-weight: 800;
    gap: 18px;
    justify-content: space-between;
    padding: 10px 0;
    text-transform: uppercase;
}

.newspaper-masthead h1 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: clamp(4.2rem, 12vw, 10.5rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.82;
    margin: 14px 0 20px;
}

.newspaper-masthead p {
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.55;
    max-width: 820px;
}

.hero-editorial-grid {
    align-items: end;
    display: grid;
    gap: 34px;
    grid-template-columns: minmax(0, 1fr) 390px;
    margin-top: clamp(30px, 6vw, 74px);
}

.hero-label {
    background: rgba(167, 139, 250, 0.16);
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 999px;
    color: #bd93f9;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    padding: 8px 14px;
    text-transform: uppercase;
}

.hero-topic-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.hero-topic-strip span {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.84);
    font-weight: 800;
    padding: 8px 12px;
}

.hero-copy p {
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    max-width: 780px;
}

.hero-edition-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    backdrop-filter: blur(18px);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
    padding: 26px;
}

.hero-edition-card h2 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    font-weight: 900;
    line-height: 1.02;
    margin: 12px 0;
}

.hero-edition-card p {
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.98rem;
}

.hero-edition-meta {
    border-top: 1px solid rgba(167, 139, 250, 0.22);
    display: grid;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
}

.hero-edition-meta span {
    align-items: center;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    gap: 9px;
    font-size: 0.9rem;
    font-weight: 800;
}

.masthead-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.modern-blog {
    background:
        radial-gradient(circle at 18% 6%, rgba(124, 58, 237, 0.1), transparent 28rem),
        radial-gradient(circle at 82% 2%, rgba(99, 102, 241, 0.08), transparent 26rem),
        linear-gradient(180deg, var(--zvv-bg), color-mix(in srgb, var(--zvv-bg) 86%, #f5f3ff));
}

.modern-blog-hero {
    background:
        radial-gradient(ellipse at 8% 20%, rgba(167, 139, 250, 0.36), transparent 30rem),
        radial-gradient(ellipse at 78% 0%, rgba(129, 140, 248, 0.32), transparent 32rem),
        radial-gradient(ellipse at 90% 85%, rgba(192, 132, 252, 0.22), transparent 24rem),
        linear-gradient(150deg, #0f0a2e 0%, #1a0f4a 42%, #2e1065 100%);
    padding: clamp(36px, 6vw, 72px) 0 clamp(40px, 7vw, 88px);
}

.modern-blog-hero::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(167, 139, 250, 0.18), transparent 60%);
    border-radius: 0;
    height: auto;
    inset: 0;
    opacity: 1;
    right: auto;
    top: auto;
    width: auto;
}

.modern-blog-hero::after {
    background:
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.1), transparent 50%),
        linear-gradient(180deg, transparent 40%, rgba(15, 10, 46, 0.82));
    opacity: 1;
}

.blog-aurora-canvas {
    height: 100%;
    inset: 0;
    opacity: 0.72;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.modern-masthead-top {
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(167, 139, 250, 0.22);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.12) inset;
    margin-bottom: clamp(28px, 5vw, 60px);
    padding: 9px 18px;
}

.modern-hero-grid {
    align-items: center;
    gap: clamp(24px, 4vw, 54px);
    grid-template-columns: minmax(0, 1.04fr) minmax(340px, 0.76fr);
    margin-top: 0;
}

.modern-hero-copy h1 {
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(3.2rem, 8.2vw, 7.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 0.88;
    margin: 20px 0 24px;
    max-width: 12ch;
    text-shadow: 0 2px 40px rgba(139, 92, 246, 0.4);
}

.modern-hero-copy p {
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(1.05rem, 1.8vw, 1.22rem);
    line-height: 1.75;
    max-width: 680px;
}

.modern-blog .hero-label {
    background: rgba(167, 139, 250, 0.18);
    border-color: rgba(167, 139, 250, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    color: #bd93f9;
}

.modern-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.modern-hero-metrics span {
    align-items: baseline;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(167, 139, 250, 0.26);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.72);
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    padding: 12px 16px;
}

.modern-hero-metrics strong {
    color: #e9d5ff;
    font-size: 1.28rem;
    font-weight: 900;
}

.modern-story-panel {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(167, 139, 250, 0.28);
    border-radius: 28px;
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.12) inset,
        0 40px 100px rgba(0, 0, 0, 0.36),
        0 0 60px rgba(124, 58, 237, 0.2);
    backdrop-filter: blur(28px);
    display: grid;
    overflow: hidden;
    position: relative;
}

.modern-story-panel::after {
    background:
        linear-gradient(135deg, rgba(167, 139, 250, 0.18), transparent 50%),
        linear-gradient(to bottom, transparent 60%, rgba(15, 10, 46, 0.6));
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

.modern-story-visual {
    align-items: center;
    aspect-ratio: 16 / 10;
    background:
        radial-gradient(circle at 30% 30%, rgba(167, 139, 250, 0.3), transparent 60%),
        linear-gradient(135deg, rgba(109, 40, 217, 0.92), rgba(79, 70, 229, 0.88)),
        #1a0f4a;
    color: #ffffff;
    display: grid;
    overflow: hidden;
    place-items: center;
    position: relative;
    text-decoration: none;
}

.modern-story-visual img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.modern-story-visual span {
    align-items: center;
    background: rgba(139, 92, 246, 0.28);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: inline-flex;
    font-size: clamp(4rem, 9vw, 7rem);
    font-weight: 900;
    height: 150px;
    justify-content: center;
    width: 150px;
}

.modern-story-content {
    padding: clamp(22px, 3vw, 32px);
    position: relative;
    z-index: 3;
}

.modern-story-content h2 {
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.45rem, 2.5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.06;
    margin: 10px 0 12px;
}

.modern-story-content p {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.96rem;
    line-height: 1.6;
}

.modern-edition-meta {
    grid-template-columns: 1fr;
}

.modern-topic-dock {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 999px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: clamp(28px, 5vw, 56px);
    padding: 8px;
    position: relative;
    z-index: 2;
}

.modern-topic-dock a {
    align-items: center;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.72);
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 800;
    gap: 7px;
    padding: 9px 14px;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}

.modern-topic-dock a.active,
.modern-topic-dock a:hover {
    background: rgba(255, 255, 255, 0.96);
    color: #1a0f4a;
}

.modern-topic-dock span {
    background: rgba(167, 139, 250, 0.25);
    border-radius: 999px;
    color: #bd93f9;
    font-size: 0.74rem;
    font-weight: 900;
    padding: 2px 8px;
}

.modern-blog .newspaper-kicker {
    border: 0;
    margin-bottom: 22px;
}

.modern-blog .newspaper-kicker h2 {
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    letter-spacing: -0.02em;
}

.modern-blog .frontpage-body h3,
.modern-blog .lead-story-card h3,
.modern-blog .latest-feed-item h3,
.modern-blog .sidebar-widget h3 {
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
}

.modern-blog .frontpage-story,
.modern-blog .lead-story-card,
.modern-blog .latest-feed-item,
.modern-blog .sidebar-widget {
    border-color: color-mix(in srgb, var(--zvv-line) 75%, rgba(124, 58, 237, 0.1));
    border-radius: 22px;
    box-shadow: 0 8px 32px rgba(91, 33, 182, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
}

.modern-blog .latest-feed-item:hover,
.modern-blog .lead-story-card:hover {
    box-shadow: 0 18px 56px rgba(91, 33, 182, 0.13), 0 4px 14px rgba(15, 23, 42, 0.06);
    transform: translateY(-2px);
}

.modern-blog .frontpage-story {
    background:
        radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.06), transparent 40%),
        linear-gradient(135deg, color-mix(in srgb, var(--zvv-panel) 97%, transparent), color-mix(in srgb, var(--zvv-panel) 90%, #ede9fe)),
        var(--zvv-panel);
    border: 1px solid color-mix(in srgb, var(--zvv-line) 72%, rgba(139, 92, 246, 0.15));
}

.modern-blog .frontpage-art,
.modern-blog .lead-story-art,
.modern-blog .latest-feed-art {
    background:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.2), transparent 8rem),
        linear-gradient(135deg, rgba(109, 40, 217, 0.94), rgba(79, 70, 229, 0.88)),
        #1a0f4a;
}

.modern-blog .frontpage-body h3 {
    max-width: 16ch;
}

.modern-blog .btn-success {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    border-color: transparent;
    box-shadow: 0 10px 28px rgba(124, 58, 237, 0.32);
}

.modern-blog .btn-success:hover {
    background: linear-gradient(135deg, #6d28d9, #4338ca);
    border-color: transparent;
    box-shadow: 0 14px 34px rgba(124, 58, 237, 0.42);
}

.blog-search-widget {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--zvv-panel) 94%, transparent), color-mix(in srgb, var(--zvv-panel) 88%, #ede9fe)),
        var(--zvv-panel);
}

.blog-php-search .input-group {
    border: 1px solid var(--zvv-line);
    border-radius: 16px;
    overflow: hidden;
}

.blog-php-search .input-group-text,
.blog-php-search .form-control {
    border: 0;
}

.blog-php-search .form-control {
    min-width: 0;
}

.search-clear-link {
    color: var(--zvv-muted);
    display: inline-flex;
    font-size: 0.88rem;
    font-weight: 900;
    margin-top: 10px;
    text-decoration: none;
}

.search-clear-link:hover {
    color: #7c3aed;
}

.newspaper-grid {
    align-items: start;
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 1fr) 380px;
}

.newspaper-kicker {
    border-bottom: 0;
    border-left: 4px solid #7c3aed;
    margin-bottom: 24px;
    padding-bottom: 0;
    padding-left: 14px;
}

.frontpage-story,
.lead-story-card,
.latest-feed-item,
.sidebar-widget {
    background: var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(91, 33, 182, 0.07), 0 1px 4px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.frontpage-story {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) 1fr;
    overflow: hidden;
}

.frontpage-art,
.lead-story-art,
.latest-feed-art {
    align-items: center;
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.18), transparent 8rem),
        linear-gradient(135deg, rgba(109, 40, 217, 0.94), rgba(79, 70, 229, 0.88)),
        #1a0f4a;
    color: #ffffff;
    display: grid;
    min-height: 100%;
    overflow: hidden;
    place-items: center;
    position: relative;
    text-decoration: none;
}

.frontpage-art {
    min-height: 340px;
}

.frontpage-art img,
.lead-story-art img,
.latest-feed-art img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    transition: transform 0.5s ease;
    width: 100%;
}

.frontpage-story:hover .frontpage-art img,
.lead-story-card:hover .lead-story-art img,
.latest-feed-item:hover .latest-feed-art img {
    transform: scale(1.04);
}

.frontpage-art span,
.lead-story-art span,
.latest-feed-art span {
    align-items: center;
    background: rgba(109, 40, 217, 0.3);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.post-card-badge-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.post-category-badge {
    align-items: center;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.22);
    border-radius: 999px;
    color: #7c3aed;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 900;
    gap: 5px;
    letter-spacing: 0.01em;
    line-height: 1;
    margin-bottom: 10px;
    max-width: 100%;
    padding: 7px 11px;
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.post-category-badge:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #ffffff;
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .post-category-badge {
    background: rgba(167, 139, 250, 0.12);
    border-color: rgba(167, 139, 250, 0.28);
    color: #bd93f9;
}

[data-bs-theme="dark"] .post-category-badge:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #ffffff;
}

.admin-public-edit-btn {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-weight: 900;
    gap: 6px;
    justify-content: center;
    margin: 8px 0;
}

.latest-feed-item .admin-public-edit-btn,
.lead-story-card .admin-public-edit-btn {
    justify-self: start;
}

.clean-property-art {
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 8px !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
    display: grid;
    height: 45%;
    justify-items: center;
    min-height: 86px;
    overflow: visible;
    position: relative;
    width: 72%;
    z-index: 2;
}

.clean-property-roof {
    border: 0;
    border-radius: 0;
    background: #1f2937;
    clip-path: polygon(50% 0, 100% 62%, 100% 82%, 0 82%, 0 62%);
    display: block;
    height: 52%;
    left: 12%;
    position: absolute;
    top: 18%;
    width: 76%;
}

.clean-property-base {
    align-items: end;
    bottom: 14%;
    display: grid;
    gap: 9%;
    grid-template-columns: 1fr 1.15fr 1fr;
    height: 38%;
    position: absolute;
    width: 68%;
    z-index: 2;
}

.clean-property-base span,
.clean-property-base strong {
    border: 0;
    border-radius: 0;
    background: #cbd5e1;
    display: block;
    height: 78%;
    position: static;
    width: auto;
}

.clean-property-base strong {
    background: linear-gradient(180deg, #38bdf8, #2563eb);
    height: 100%;
}

.frontpage-art span {
    font-size: 6rem;
    height: 180px;
    width: 180px;
}

.lead-story-art span,
.latest-feed-art span {
    font-size: 2.4rem;
    height: 84px;
    width: 84px;
}

.frontpage-body {
    align-content: center;
    display: grid;
    padding: clamp(24px, 3.4vw, 40px);
}

.frontpage-body h3,
.lead-story-card h3,
.latest-feed-item h3 {
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.frontpage-body h3 {
    font-size: clamp(2.2rem, 3.6vw, 3.4rem);
    line-height: 1.04;
    margin: 14px 0 18px;
    max-width: 14ch;
}

.frontpage-body a,
.lead-story-card a,
.latest-feed-item a {
    color: inherit;
    text-decoration: none;
}

.frontpage-body p,
.lead-story-card p,
.latest-feed-item p {
    color: var(--zvv-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.frontpage-body p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.post-meta-row {
    color: var(--zvv-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.35;
}

.post-meta-row a {
    color: inherit;
    text-decoration: none;
}

.post-meta-row a:hover {
    color: #7c3aed;
}

.post-discussion {
    background: var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 22px;
    margin-top: 24px;
    padding: clamp(22px, 4vw, 34px);
}

.discussion-head {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.discussion-head h2 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 900;
    margin: 4px 0 0;
}

.rating-summary {
    align-items: end;
    display: grid;
    justify-items: end;
}

.rating-summary strong {
    color: var(--zvv-ink);
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1;
}

.rating-summary span {
    color: #f59e0b;
    letter-spacing: 0;
}

.rating-summary small {
    color: var(--zvv-muted);
    font-weight: 800;
}

.rating-form {
    align-items: center;
    background: color-mix(in srgb, var(--zvv-bg) 72%, transparent);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px;
}

.rating-choice {
    direction: rtl;
    display: inline-flex;
    gap: 2px;
}

.rating-choice input {
    position: absolute;
    opacity: 0;
}

.rating-choice label {
    color: #cbd5e1;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
}

.rating-choice input:checked ~ label,
.rating-choice label:hover,
.rating-choice label:hover ~ label {
    color: #f59e0b;
}

.comment-form {
    border-top: 1px solid var(--zvv-line);
    padding-top: 20px;
}

.comment-captcha {
    align-items: center;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--zvv-green) 10%, var(--zvv-panel)), color-mix(in srgb, var(--zvv-blue) 8%, var(--zvv-panel)));
    border: 1px solid color-mix(in srgb, var(--zvv-green) 24%, var(--zvv-line));
    border-radius: 16px;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) 130px;
    margin-top: 14px;
    padding: 14px;
}

.comment-captcha strong {
    color: var(--zvv-ink);
    display: block;
    font-size: 1.15rem;
    font-weight: 900;
    margin-top: 4px;
}

.comment-captcha .form-control {
    border-radius: 12px;
    font-weight: 900;
    text-align: center;
}

.member-only-box {
    align-items: center;
    background: color-mix(in srgb, var(--zvv-green) 9%, var(--zvv-panel));
    border: 1px solid color-mix(in srgb, var(--zvv-green) 22%, var(--zvv-line));
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding: 16px;
}

.member-only-box span {
    color: var(--zvv-muted);
    font-weight: 800;
}

.comment-list {
    display: grid;
    gap: 14px;
}

.comment-card {
    align-items: start;
    border-top: 1px solid var(--zvv-line);
    display: grid;
    gap: 12px;
    grid-template-columns: 46px minmax(0, 1fr);
    padding-top: 16px;
}

.comment-avatar,
.author-profile-avatar {
    align-items: center;
    background: linear-gradient(135deg, #16a34a, #2563eb);
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
}

.comment-avatar {
    height: 46px;
    width: 46px;
}

.comment-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-weight: 900;
}

.comment-meta a {
    color: var(--zvv-ink);
    text-decoration: none;
}

.comment-meta span {
    color: var(--zvv-muted);
    font-size: 0.85rem;
}

.comment-card p {
    color: var(--zvv-muted);
    line-height: 1.65;
    margin: 6px 0 0;
}

.author-widget h3 a {
    color: inherit;
    text-decoration: none;
}

.author-profile-hero {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(15, 118, 110, 0.9)),
        #101828;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
    color: #ffffff;
    display: grid;
    gap: 24px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: clamp(26px, 5vw, 54px);
}

.author-profile-avatar {
    font-size: clamp(3rem, 8vw, 5rem);
    height: clamp(110px, 18vw, 160px);
    width: clamp(110px, 18vw, 160px);
}

.author-profile-hero h1 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: clamp(2.6rem, 7vw, 5rem);
    font-weight: 900;
    line-height: 0.95;
    margin: 8px 0 10px;
}

.author-profile-hero p,
.author-profile-bio {
    color: rgba(255, 255, 255, 0.76);
    font-size: 1.05rem;
    max-width: 760px;
}

.author-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.author-profile-meta span,
.author-profile-meta a {
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #ffffff;
    font-weight: 900;
    padding: 8px 12px;
    text-decoration: none;
}

.author-post-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.author-post-grid .blog-card h2 a {
    color: inherit;
    text-decoration: none;
}

.lead-story-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 24px;
}

.lead-story-card {
    align-items: stretch;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    overflow: hidden;
}

.lead-story-art {
    aspect-ratio: auto;
    min-height: 100%;
}

.lead-story-card > div:last-child {
    align-content: center;
    display: grid;
    padding: 18px;
}

.lead-story-card h3 {
    font-size: 1.28rem;
    line-height: 1.12;
    margin: 8px 0 10px;
}

.lead-story-card p {
    display: -webkit-box;
    font-size: 0.93rem;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.latest-feed {
    display: grid;
    gap: 18px;
}

.latest-feed-item {
    align-items: stretch;
    display: grid;
    gap: 18px;
    grid-template-columns: 190px minmax(0, 1fr);
    min-height: 172px;
    padding: 18px;
}

.latest-feed-item > div:last-child,
.lead-story-card > div:last-child,
.frontpage-body {
    min-width: 0;
}

.latest-feed-art {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    min-height: 136px;
}

.latest-feed-item h3 {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.12;
    margin: 8px 0 10px;
}

.latest-feed-item p {
    display: -webkit-box;
    margin-bottom: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.modern-blog .latest-feed {
    gap: 22px;
}

.modern-blog .latest-feed-item {
    align-items: stretch;
    background:
        radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.04), transparent 40%),
        linear-gradient(135deg, color-mix(in srgb, var(--zvv-panel) 98%, transparent), color-mix(in srgb, var(--zvv-panel) 93%, #ede9fe)),
        var(--zvv-panel);
    border-radius: 22px;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
    min-height: 190px;
    overflow: hidden;
    padding: 18px;
}

.modern-blog .lead-story-card {
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    overflow: hidden;
}

.modern-blog .latest-feed-art,
.modern-blog .lead-story-art {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.modern-blog .latest-feed-art img,
.modern-blog .lead-story-art img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.modern-blog .latest-feed-item > div:last-child {
    align-content: center;
    display: grid;
    min-width: 0;
    padding: 4px 8px 4px 0;
}

.modern-blog .latest-feed-item h3 {
    font-size: clamp(1.35rem, 2.4vw, 2.05rem);
    line-height: 1.08;
    margin: 10px 0 10px;
    max-width: 24ch;
    overflow-wrap: anywhere;
}

.modern-blog .latest-feed-item p {
    font-size: 1rem;
    line-height: 1.65;
}

.modern-blog .latest-feed-item .post-meta-row {
    gap: 10px;
}

.newspaper-sidebar {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 88px;
}

.sidebar-widget {
    padding: 24px;
}

.sidebar-widget h3 {
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 10px 0;
}

.editor-widget,
.market-widget {
    background:
        linear-gradient(135deg, rgba(15, 10, 46, 0.97), rgba(109, 40, 217, 0.88)),
        #0f0a2e;
    color: #ffffff;
}

.editor-widget p,
.market-widget p {
    color: rgba(255, 255, 255, 0.72);
}

.popular-list,
.category-list {
    display: grid;
    gap: 6px;
    margin-top: 14px;
}

.popular-list a {
    align-items: center;
    border-bottom: 0;
    border-radius: 12px;
    color: inherit;
    display: grid;
    gap: 12px;
    grid-template-columns: auto 1fr;
    padding: 10px 10px;
    text-decoration: none;
    transition: background 0.16s ease;
}

.popular-list a:hover {
    background: rgba(124, 58, 237, 0.06);
}

.category-list a {
    align-items: center;
    border-bottom: 0;
    border-radius: 12px;
    color: inherit;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr auto;
    padding: 10px 12px;
    text-decoration: none;
    transition: background 0.16s ease;
}

.category-list a:hover {
    background: rgba(124, 58, 237, 0.06);
}

.popular-list a:last-child,
.category-list a:last-child {
    border-bottom: 0;
}

.popular-list strong {
    align-items: center;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    border-radius: 10px;
    color: #ffffff;
    display: inline-flex;
    font-family: "Sora", sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    line-height: 1;
    min-width: 30px;
}

.popular-list span {
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.35;
}

.category-list a.active {
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
    font-weight: 900;
}

.category-list strong {
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 999px;
    color: #7c3aed;
    font-size: 0.78rem;
    font-weight: 900;
    min-width: 30px;
    padding: 3px 8px;
    text-align: center;
}

.blog-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 32px;
}

.blog-pagination a {
    align-items: center;
    background: var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 12px;
    color: var(--zvv-ink);
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 900;
    height: 42px;
    justify-content: center;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    width: 42px;
}

.blog-pagination a.active,
.blog-pagination a:hover {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.3);
    color: #ffffff;
}

.blog-pagination-arrow {
    align-items: center;
    background: var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 12px;
    color: var(--zvv-ink);
    display: inline-flex;
    font-size: 1rem;
    height: 42px;
    justify-content: center;
    text-decoration: none;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    width: 42px;
}

.blog-pagination-arrow:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.3);
    color: #7c3aed;
}

.blog-pagination-arrow.disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

.blog-pagination-ellipsis {
    align-items: center;
    color: var(--zvv-muted);
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 700;
    height: 42px;
    justify-content: center;
    letter-spacing: 0.05em;
    padding: 0 4px;
    user-select: none;
}

.admin-dashboard-grid,
.admin-tools-grid {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.admin-dashboard-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-tools-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
}

.admin-wp-shell {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: 230px minmax(0, 1fr);
    min-width: 0;
}

.admin-wp-sidebar {
    background: #101828;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
    color: #ffffff;
    display: grid;
    gap: 6px;
    padding: 14px;
    position: sticky;
    top: 18px;
}

.admin-wp-brand {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    padding: 6px 8px 14px;
}

.admin-wp-brand span {
    align-items: center;
    background: linear-gradient(135deg, #16a34a, #2563eb);
    border-radius: 8px;
    display: inline-flex;
    font-weight: 900;
    height: 40px;
    justify-content: center;
    width: 46px;
}

.admin-wp-brand strong {
    font-size: 0.95rem;
    font-weight: 900;
}

.admin-wp-sidebar a {
    align-items: center;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    font-weight: 900;
    gap: 10px;
    padding: 11px 12px;
    text-decoration: none;
}

.admin-wp-sidebar a:hover,
.admin-wp-sidebar a.active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.admin-wp-content {
    min-width: 0;
}

.admin-dashboard-shell {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: calc(100vh - 76px);
    padding: 24px;
}

.admin-dashboard-sidebar {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 118, 110, 0.9)),
        #101828;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
    color: #ffffff;
    display: grid;
    gap: 6px;
    padding: 14px;
    position: sticky;
    top: 92px;
}

.admin-dashboard-sidebar a {
    align-items: center;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    font-weight: 900;
    gap: 10px;
    padding: 12px;
    text-decoration: none;
}

.admin-dashboard-sidebar a:hover,
.admin-dashboard-sidebar a.active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.admin-dashboard-main {
    min-width: 0;
}

.admin-dashboard-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.admin-dashboard-action-card {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(25, 135, 84, 0.12), rgba(33, 100, 216, 0.06)),
        var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
    color: var(--zvv-ink);
    display: flex;
    gap: 12px;
    min-height: 86px;
    padding: 18px;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.admin-dashboard-action-card:hover {
    border-color: rgba(25, 135, 84, 0.34);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.14);
    color: var(--zvv-ink);
    transform: translateY(-2px);
}

.admin-dashboard-action-card i {
    background: linear-gradient(135deg, #15996a, #2164d8);
    border-radius: 8px;
    color: #ffffff;
    display: inline-grid;
    flex: 0 0 40px;
    height: 40px;
    place-items: center;
    width: 40px;
}

.admin-dashboard-action-card strong,
.admin-dashboard-action-card small {
    display: block;
}

.admin-dashboard-action-card small {
    color: var(--zvv-muted);
    font-weight: 800;
    margin-top: 2px;
}

.admin-settings-layout {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1fr) 340px;
}

.admin-settings-card {
    display: grid;
    gap: 0;
    padding: 0;
}

.admin-settings-row {
    align-items: start;
    border-bottom: 1px solid var(--zvv-line);
    display: grid;
    gap: 22px;
    grid-template-columns: 240px minmax(0, 1fr);
    padding: 22px;
}

.admin-settings-row label strong {
    color: var(--zvv-ink);
    display: block;
    font-weight: 900;
}

.admin-settings-row label span,
.admin-settings-preview dd,
.admin-settings-preview small {
    color: var(--zvv-muted);
    font-weight: 700;
}

.admin-settings-actions {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.smtp-test-row {
    display: flex;
    gap: 8px;
}

.smtp-test-row .form-control {
    flex: 1;
    min-width: 0;
}

.smtp-test-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
}

.smtp-test-msg-success {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #15803d;
}

.smtp-test-msg-error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #dc2626;
}

.admin-settings-preview {
    padding: 22px;
    position: sticky;
    top: 92px;
}

.admin-settings-preview-brand {
    align-items: center;
    display: flex;
    gap: 14px;
    margin: 18px 0;
}

.admin-settings-preview-brand > span {
    align-items: center;
    background: linear-gradient(135deg, #15996a, #2164d8);
    border-radius: 14px;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 54px;
    font-weight: 900;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.admin-settings-preview-brand strong,
.admin-settings-preview-brand small {
    display: block;
}

.admin-settings-preview dl {
    display: grid;
    gap: 12px;
    margin: 0;
}

.admin-settings-preview dl div {
    border-top: 1px solid var(--zvv-line);
    padding-top: 12px;
}

.admin-settings-preview dt {
    color: var(--zvv-ink);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-settings-preview dd {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
}

.admin-stat-card,
.admin-tool-card {
    background: var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
    min-width: 0;
}

.admin-stat-card {
    padding: 18px;
}

.admin-stat-card span,
.admin-stat-card small {
    color: var(--zvv-muted);
    display: block;
    font-weight: 800;
}

.admin-stat-card strong {
    color: var(--zvv-ink);
    display: block;
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 900;
    line-height: 1;
    margin: 10px 0;
}

.admin-tool-card {
    padding: clamp(18px, 3vw, 26px);
}

.admin-tool-card-dark {
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.97), rgba(15, 118, 110, 0.92)),
        #101828;
    color: #ffffff;
}

.admin-tool-card-dark p {
    color: rgba(255, 255, 255, 0.72);
}

.admin-section-head {
    align-items: end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    min-width: 0;
}

.admin-section-head h2,
.admin-tool-card h2 {
    color: var(--zvv-ink);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    margin: 4px 0 0;
}

.admin-tool-card-dark h2 {
    color: #ffffff;
}

.admin-count-pill {
    background: color-mix(in srgb, var(--zvv-green) 12%, var(--zvv-panel));
    border: 1px solid color-mix(in srgb, var(--zvv-green) 25%, var(--zvv-line));
    border-radius: 999px;
    color: var(--zvv-green);
    flex: 0 0 auto;
    font-size: 0.85rem;
    font-weight: 900;
    padding: 8px 12px;
}

.admin-category-form {
    margin: 18px 0;
}

.admin-category-table-wrap {
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    overflow: hidden;
}

.admin-category-table {
    border-collapse: collapse;
    margin: 0;
    table-layout: fixed;
    width: 100%;
}

.admin-category-table th,
.admin-category-table td {
    border-bottom: 1px solid var(--zvv-line);
    padding: 13px 14px;
    vertical-align: middle;
}

.admin-category-table th {
    background: color-mix(in srgb, var(--zvv-bg) 76%, transparent);
    color: var(--zvv-muted);
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-category-table th:nth-child(2),
.admin-category-table td:nth-child(2) {
    text-align: right;
    width: 96px;
}

.admin-category-table th:nth-child(3),
.admin-category-table td:nth-child(3) {
    text-align: right;
    width: 330px;
}

.admin-category-table tr:last-child td {
    border-bottom: 0;
}

.admin-category-name {
    align-items: center;
    color: var(--zvv-ink);
    display: inline-flex;
    font-weight: 900;
    gap: 8px;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.admin-category-name:hover {
    color: var(--zvv-green);
}

.admin-category-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.admin-category-actions .btn {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    gap: 5px;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    white-space: nowrap;
}

.admin-category-remove-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
    margin: 0;
}

.admin-category-remove-form .form-select {
    max-width: 130px;
}

.admin-category-remove-form small {
    color: var(--zvv-muted);
    flex-basis: 100%;
    font-weight: 800;
}

.admin-post-filter-card {
    background: var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
    padding: 14px;
}

.admin-post-filter-form {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(260px, 1fr) auto;
}

.admin-filter-tabs {
    background: color-mix(in srgb, var(--zvv-bg) 72%, transparent);
    border: 1px solid var(--zvv-line);
    border-radius: 999px;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
}

.admin-filter-tabs a {
    border-radius: 999px;
    color: var(--zvv-muted);
    font-size: 0.86rem;
    font-weight: 900;
    padding: 8px 12px;
    text-decoration: none;
    white-space: nowrap;
}

.admin-filter-tabs a.active,
.admin-filter-tabs a:hover {
    background: var(--zvv-panel);
    color: var(--zvv-ink);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.admin-post-filter-form .input-group {
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    background: var(--zvv-panel);
}

.admin-post-filter-form .input-group-text {
    align-items: center;
    background: color-mix(in srgb, var(--zvv-panel) 82%, var(--zvv-green));
    border: 0;
    color: var(--zvv-green);
    display: inline-flex;
    justify-content: center;
    min-width: 42px;
    padding: 0;
}

.admin-post-filter-form .input-group-text i {
    font-size: 0.95rem;
    line-height: 1;
}

.admin-post-filter-form .form-control {
    border: 0;
    box-shadow: none !important;
    height: 38px;
}

.admin-post-filter-form .form-control:focus {
    box-shadow: none !important;
}

.admin-post-filter-form .btn {
    align-items: center;
    display: inline-flex;
    height: 38px;
    justify-content: center;
}

.admin-post-filter-form .select2-container {
    max-width: 100%;
    width: 320px !important;
}

.admin-post-filter-form .select2-container--default .select2-selection--single {
    align-items: center;
    background: var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    display: flex;
    height: 38px;
    padding: 0 2.1rem 0 0.75rem;
}

.admin-post-filter-form .select2-container--default.select2-container--focus .select2-selection--single,
.admin-post-filter-form .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--zvv-green);
    box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.12);
}

.admin-post-filter-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--zvv-ink);
    font-size: 1rem;
    line-height: 1.5;
    padding: 0;
}

.admin-post-filter-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--zvv-muted);
}

.admin-post-filter-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 0.55rem;
    top: 0;
}

.admin-user-filter-dropdown {
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.admin-user-filter-dropdown .select2-search--dropdown {
    padding: 0.5rem;
}

.admin-user-filter-dropdown .select2-search__field {
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    outline: none;
    padding: 0.45rem 0.65rem;
}

.admin-user-filter-dropdown .select2-results__option {
    color: var(--zvv-ink);
    font-size: 0.94rem;
    padding: 0.55rem 0.75rem;
}

.admin-user-filter-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--zvv-green);
    color: #fff;
}

.admin-clear-filter {
    color: var(--zvv-muted);
    font-size: 0.88rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.admin-clear-filter:hover {
    color: var(--zvv-green);
}

.admin-pagination {
    justify-content: center;
}

.admin-edit-shell {
    min-width: 0;
}

.admin-edit-shell h1 {
    color: var(--zvv-ink);
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 900;
    line-height: 1;
    margin: 4px 0 0;
}

.admin-edit-preview {
    align-items: center;
    aspect-ratio: 16 / 10;
    background:
        linear-gradient(135deg, rgba(20, 184, 166, 0.9), rgba(37, 99, 235, 0.86)),
        #101828;
    border-radius: 8px;
    color: #ffffff;
    display: grid;
    overflow: hidden;
    place-items: center;
    position: relative;
}

.admin-edit-preview img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.admin-edit-preview span {
    align-items: center;
    background: rgba(15, 23, 42, 0.34);
    border-radius: 50%;
    display: inline-flex;
    font-size: 3rem;
    font-weight: 900;
    height: 90px;
    justify-content: center;
    position: relative;
    width: 90px;
}

.admin-user-list {
    display: grid;
    gap: 12px;
}

.admin-user-row {
    align-items: center;
    background: var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 14px;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    min-width: 0;
    padding: 14px;
}

.admin-user-avatar {
    align-items: center;
    background: linear-gradient(135deg, var(--zvv-green), var(--zvv-blue));
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    font-weight: 900;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.admin-user-main {
    min-width: 0;
}

.admin-user-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.admin-user-title h2 {
    color: var(--zvv-ink);
    font-size: 1.05rem;
    font-weight: 900;
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-user-wallet {
    color: var(--zvv-muted);
    display: block;
    font-size: 0.78rem;
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.admin-user-actions {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: end;
    max-width: 620px;
}

.admin-user-actions > .btn {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    gap: 5px;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    white-space: nowrap;
}

.admin-delete-user-modal {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
}

.admin-delete-user-modal .modal-header,
.admin-delete-user-modal .modal-footer {
    border-color: var(--zvv-line);
}

.admin-delete-user-modal .modal-title {
    color: var(--zvv-ink);
    font-weight: 900;
}

.admin-delete-user-copy {
    color: var(--zvv-muted);
    font-weight: 700;
    line-height: 1.6;
}

.admin-delete-user-copy strong {
    color: var(--zvv-ink);
}

.admin-delete-post-count,
.admin-delete-no-posts {
    align-items: center;
    background: color-mix(in srgb, var(--zvv-green) 9%, var(--zvv-panel));
    border: 1px solid color-mix(in srgb, var(--zvv-green) 22%, var(--zvv-line));
    border-radius: 12px;
    color: var(--zvv-ink);
    display: flex;
    font-weight: 800;
    gap: 10px;
    padding: 12px 14px;
}

.admin-delete-no-posts {
    background: color-mix(in srgb, var(--zvv-blue) 8%, var(--zvv-panel));
    border-color: color-mix(in srgb, var(--zvv-blue) 20%, var(--zvv-line));
}

.admin-delete-post-count i,
.admin-delete-no-posts i {
    color: var(--zvv-green);
    font-size: 1.2rem;
}

.admin-user-edit-card {
    border-radius: 8px;
}

.admin-user-delete-form {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
    margin: 0;
    max-width: 420px;
}

.admin-user-delete-form .form-select {
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 800;
    height: 34px;
    max-width: 130px;
    padding-bottom: 4px;
    padding-top: 4px;
}

.admin-user-delete-form .btn {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    gap: 5px;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    white-space: nowrap;
}

.admin-user-delete-form small {
    color: var(--zvv-muted);
    flex-basis: 100%;
    font-weight: 800;
    text-align: right;
}

@media (min-width: 1000px) {
    .admin-user-delete-form {
        display: grid;
        grid-template-columns: minmax(118px, 128px) minmax(118px, 128px) auto;
    }

    .admin-user-delete-form .btn {
        grid-column: auto;
    }

    .admin-user-delete-form small {
        grid-column: 1 / -1;
    }

    .admin-user-delete-form .btn:first-child {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

.admin-category-pills,
.admin-workflow-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.admin-category-pill,
.admin-workflow-list span {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-weight: 900;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
    padding: 10px 12px;
}

.admin-category-pill {
    background: color-mix(in srgb, var(--zvv-bg) 72%, transparent);
    border: 1px solid var(--zvv-line);
    color: var(--zvv-ink);
    text-decoration: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.admin-category-pill:hover {
    border-color: color-mix(in srgb, var(--zvv-green) 36%, var(--zvv-line));
    color: var(--zvv-ink);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.admin-category-pill strong {
    background: var(--zvv-green);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.75rem;
    height: 22px;
    justify-content: center;
    min-width: 22px;
    padding: 0 7px;
}

.admin-workflow-list {
    margin-top: 18px;
}

.admin-workflow-list span {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.admin-hero {
    align-items: end;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(37, 99, 235, 0.86)),
        #101828;
    border-radius: 8px;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    padding: clamp(28px, 5vw, 56px);
    min-width: 0;
}

.admin-hero > div:first-child {
    min-width: 0;
}

.admin-hero h1 {
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 900;
    line-height: 0.95;
    margin: 8px 0 14px;
    overflow-wrap: anywhere;
}

.admin-hero p {
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

.admin-thumb {
    border-radius: 8px;
    display: inline-grid;
    height: 58px;
    object-fit: cover;
    place-items: center;
    width: 86px;
}

.admin-thumb.placeholder {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.9), rgba(37, 99, 235, 0.86));
    color: #ffffff;
    font-weight: 900;
}

.admin-review-list {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.admin-review-card {
    align-items: center;
    background: var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 16px;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    min-width: 0;
    padding: 14px;
}

.admin-review-media {
    min-width: 0;
}

.admin-review-card .admin-thumb {
    height: 68px;
    width: 96px;
}

.admin-review-main {
    min-width: 0;
}

.admin-review-top,
.admin-review-meta,
.admin-review-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-review-top {
    color: var(--zvv-muted);
    font-size: 0.84rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.admin-review-top a {
    color: inherit;
    text-decoration: none;
}

.admin-review-top a:hover {
    color: var(--zvv-green);
}

.admin-active-filter {
    align-items: center;
    background: color-mix(in srgb, var(--zvv-green) 8%, var(--zvv-panel));
    border: 1px solid color-mix(in srgb, var(--zvv-green) 22%, var(--zvv-line));
    border-radius: 8px;
    color: var(--zvv-ink);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 14px;
}

.admin-active-filter span {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.admin-active-filter a {
    color: var(--zvv-green);
    font-weight: 900;
    text-decoration: none;
}

.admin-review-card h2 {
    color: var(--zvv-ink);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.22;
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-review-card h2 a {
    color: inherit;
    text-decoration: none;
}

.admin-review-card h2 a:hover {
    color: #7c3aed;
    text-decoration: underline;
}

.admin-review-card p {
    color: var(--zvv-muted);
    display: -webkit-box;
    font-size: 0.92rem;
    line-height: 1.45;
    margin: 6px 0 8px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.admin-review-meta {
    color: var(--zvv-muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.admin-review-meta span {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.admin-review-actions {
    justify-content: end;
    min-width: 110px;
}

.blog-card {
    background: var(--zvv-panel);
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
    display: grid;
    overflow: hidden;
}

.blog-card.featured {
    grid-template-columns: minmax(220px, 0.7fr) 1fr;
}

.blog-card-art {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(22, 163, 74, 0.92), rgba(37, 99, 235, 0.86)),
        #101828;
    color: #ffffff;
    display: grid;
    min-height: 180px;
    overflow: hidden;
    place-items: center;
    position: relative;
}

.blog-card-art span {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    display: inline-flex;
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 900;
    height: 140px;
    justify-content: center;
    position: relative;
    width: 140px;
    z-index: 1;
}

.blog-card-art img,
.official-feature-art img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
    z-index: 0;
}

.blog-card-art img + span,
.official-feature-art img + span {
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(8px);
}

.blog-card-body {
    padding: 24px;
}

.blog-card h2 {
    font-weight: 900;
}

.post-shell {
    min-width: 0;
}

.single-post-layout {
    align-items: start;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) 340px;
}

.single-post-sidebar {
    display: grid;
    gap: 20px;
    position: sticky;
    top: 88px;
}

.author-widget h3 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 900;
    margin: 10px 0;
}

.post-thumbnail {
    border-radius: 8px;
    box-shadow: 0 22px 58px rgba(15, 23, 42, 0.14);
    margin-bottom: 22px;
    overflow: hidden;
}

.post-thumbnail img {
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
    width: 100%;
}

.post-header {
    background:
        radial-gradient(circle at 16% 0%, rgba(20, 184, 166, 0.13), transparent 20rem),
        linear-gradient(135deg, color-mix(in srgb, var(--zvv-panel) 96%, transparent), color-mix(in srgb, var(--zvv-panel) 88%, #dbeafe));
    border: 1px solid color-mix(in srgb, var(--zvv-line) 74%, transparent);
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.11);
    margin-bottom: 22px;
    padding: clamp(28px, 5vw, 56px);
}

.post-header h1 {
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 0.98;
    margin: 12px 0 18px;
}

.post-header p {
    color: var(--zvv-muted);
    font-size: 1.2rem;
    margin: 0;
}

.story-action-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.post-share-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.post-share-actions a,
.post-share-actions button {
    align-items: center;
    background: color-mix(in srgb, var(--zvv-panel) 84%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--zvv-line) 78%, transparent);
    border-radius: 999px;
    color: var(--zvv-ink);
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 900;
    gap: 6px;
    height: 36px;
    justify-content: center;
    line-height: 1;
    min-width: 36px;
    padding: 0 11px;
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.post-share-actions a:hover,
.post-share-actions button:hover {
    background: var(--zvv-green);
    border-color: var(--zvv-green);
    color: #ffffff;
    transform: translateY(-1px);
}

.post-share-actions button {
    cursor: pointer;
}

.post-share-actions .post-share-copy.copied,
.post-share-actions .post-share-button.copied {
    background: #101828;
    border-color: #101828;
    color: #ffffff;
}

.post-share-actions-compact {
    margin-top: 12px;
}

.post-share-actions-compact a,
.post-share-actions-compact .post-share-copy {
    height: 32px;
    min-width: 32px;
    padding: 0;
}

.post-share-actions-compact .post-share-button {
    height: 32px;
    padding: 0 10px;
}

.post-share-actions .post-share-button.is-shared {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #ffffff;
}

.post-share-actions .post-share-button.is-shared:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

.post-share-actions-single {
    margin-top: 24px;
}

.post-share-actions-single a,
.post-share-actions-single button,
.post-share-actions-sidebar a,
.post-share-actions-sidebar button {
    height: 42px;
    min-width: 42px;
    padding: 0 13px;
}

.post-share-actions-sidebar {
    margin-top: 14px;
}

.post-body {
    background: var(--zvv-panel);
    border: 1px solid color-mix(in srgb, var(--zvv-line) 80%, transparent);
    border-radius: 24px;
    box-shadow: 0 18px 60px rgba(15, 23, 42, 0.08);
    font-size: 1.08rem;
    line-height: 1.8;
    padding: clamp(28px, 5vw, 52px);
    white-space: normal;
}

.modern-blog .post-thumbnail {
    border-radius: 24px;
}

.modern-blog .post-discussion {
    border-radius: 24px;
    box-shadow: 0 22px 70px rgba(15, 23, 42, 0.1);
}

.modern-blog .discussion-head h2 {
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
}

.blog-textarea {
    min-height: 360px;
    resize: vertical;
}

.note-editor.note-frame {
    border-color: var(--zvv-line);
    border-radius: 8px;
    overflow: visible;
}

.note-editor,
.note-toolbar,
.note-dropdown-menu,
.note-modal {
    z-index: 1065;
}

.note-editor .note-toolbar {
    background: color-mix(in srgb, var(--zvv-bg) 78%, transparent);
    border-color: var(--zvv-line);
}

.note-editor .note-editable {
    background: var(--zvv-panel);
    color: var(--zvv-ink);
    min-height: 420px;
}

.summernote-content h1,
.summernote-content h2,
.summernote-content h3 {
    font-weight: 900;
    margin-top: 1.4em;
}

.summernote-content img {
    border-radius: 8px;
    height: auto;
    max-width: 100%;
}

.summernote-content blockquote {
    border-left: 4px solid var(--zvv-green);
    color: var(--zvv-muted);
    padding-left: 18px;
}

.sticky-preview {
    position: sticky;
    top: 92px;
}

/* Live preview body — renders Summernote HTML inside the card */
.blog-preview-body {
    font-size: 0.88rem;
    line-height: 1.65;
    overflow: hidden;
    max-height: 280px;
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.blog-preview-body p { margin-bottom: 0.5rem; }
.blog-preview-body p:last-child { margin-bottom: 0; }
.blog-preview-body h1, .blog-preview-body h2,
.blog-preview-body h3, .blog-preview-body h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    margin-top: 0.5rem;
}
.blog-preview-body ul, .blog-preview-body ol {
    padding-left: 1.2rem;
    margin-bottom: 0.5rem;
}
.blog-preview-body li { margin-bottom: 0.2rem; }

.btn {
    font-weight: 800;
}

.theme-toggle {
    min-width: 70px;
}

/* old nav mobile rules removed — replaced by zvv-header responsive CSS */

@media (max-width: 768px) {
    .wallet-address-box {
        grid-template-columns: 1fr;
    }

    .two-factor-setup {
        grid-template-columns: 1fr;
    }

    .two-factor-qr-panel {
        grid-template-columns: 1fr;
    }

    .two-factor-qr {
        margin: 0 auto;
    }

    .messages-hero {
        align-items: flex-start;
        display: grid;
    }

    .message-row {
        align-items: start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .message-unread-dot {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .pending-payment-item {
        align-items: stretch;
        display: grid;
    }

    .account-type-grid {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-grid,
    .admin-tools-grid {
        grid-template-columns: 1fr;
    }

    .admin-wp-shell {
        grid-template-columns: 1fr;
    }

    .admin-wp-sidebar {
        position: static;
    }

    .admin-dashboard-shell {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .admin-dashboard-sidebar {
        position: static;
    }

    .admin-dashboard-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-settings-layout {
        grid-template-columns: 1fr;
    }

    .admin-settings-preview {
        position: static;
    }

    .admin-settings-row {
        grid-template-columns: 1fr;
    }

    .admin-user-row {
        align-items: start;
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .admin-user-avatar {
        height: 46px;
        width: 46px;
    }

    .admin-user-actions {
        grid-column: 1 / -1;
        justify-content: start;
    }

    .admin-user-delete-form {
        display: grid;
        justify-content: stretch;
        max-width: none;
        width: 100%;
    }

    .admin-user-delete-form .form-select {
        max-width: none;
    }

    .admin-user-delete-form small {
        text-align: left;
    }

    .admin-category-table th,
    .admin-category-table td {
        padding: 11px 10px;
    }

    .admin-category-table th:nth-child(2),
    .admin-category-table td:nth-child(2) {
        width: 72px;
    }

    .admin-category-table th:nth-child(3),
    .admin-category-table td:nth-child(3) {
        width: 190px;
    }

    .admin-category-remove-form {
        display: grid;
        justify-content: stretch;
    }

    .admin-category-remove-form .form-select {
        max-width: none;
    }

    .admin-post-filter-form {
        grid-template-columns: 1fr;
    }

    .admin-post-filter-form .select2-container {
        width: 100% !important;
    }

    .admin-filter-tabs {
        justify-self: start;
    }

    .admin-clear-filter {
        justify-self: start;
    }

    .admin-section-head {
        align-items: start;
        display: grid;
    }

    .admin-review-card {
        align-items: start;
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .admin-review-card .admin-thumb {
        height: 56px;
        width: 72px;
    }

    .admin-review-actions {
        grid-column: 1 / -1;
        justify-content: start;
        min-width: 0;
    }

    .discussion-head,
    .member-only-box {
        align-items: start;
        display: grid;
        justify-items: start;
    }

    .comment-captcha {
        grid-template-columns: 1fr;
    }

    .comment-captcha .form-control {
        text-align: left;
    }

    .rating-summary {
        justify-items: start;
    }

    .author-profile-hero,
    .author-post-grid {
        grid-template-columns: 1fr;
    }

    .wallet-feature-grid {
        grid-template-columns: 1fr;
    }

    .crypto-rating-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .crypto-grade,
    .crypto-risk {
        justify-self: start;
    }

    .brand-panel h1 {
        margin-top: 38px;
    }

    .blog-card.featured {
        grid-template-columns: 1fr;
    }

    .blog-hero {
        align-items: start;
        display: grid;
    }

    .official-feature {
        grid-template-columns: 1fr;
    }

    .official-feature-art {
        min-height: 260px;
    }

    .section-kicker {
        align-items: start;
        display: grid;
    }
}

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

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

    .newspaper-sidebar,
    .single-post-sidebar {
        position: static;
    }

    .single-post-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .hero-editorial-grid {
        grid-template-columns: 1fr;
    }

    .modern-hero-grid {
        grid-template-columns: 1fr;
    }

    .modern-story-panel {
        max-width: 620px;
    }

    .modern-masthead-top {
        border-radius: 18px;
    }

    .frontpage-story,
    .latest-feed-item {
        grid-template-columns: 1fr;
    }

    .modern-blog .latest-feed-item,
    .modern-blog .lead-story-card {
        grid-template-columns: 1fr;
    }

    .modern-blog .latest-feed-item > div:last-child {
        padding: 2px;
    }

    .modern-blog .latest-feed-art,
    .modern-blog .lead-story-art {
        aspect-ratio: 16 / 9;
    }

    .frontpage-art {
        min-height: 300px;
    }

    .lead-story-grid {
        grid-template-columns: 1fr;
    }

    .masthead-top {
        display: grid;
        justify-content: start;
    }

    .modern-topic-dock {
        border-radius: 18px;
    }
}

@media (max-width: 1100px) {
    .wallet-app {
        display: block;
    }

    .app-sidebar {
        display: none;
    }

    .mobile-topbar {
        display: flex;
    }

    .dashboard-header {
        align-items: start;
        display: grid;
    }
}

@media (max-width: 576px) {
    .app-main {
        padding: 14px;
    }

    .wallet-card-top {
        display: grid;
    }

    .chain-orbit {
        display: none;
    }

    .header-actions .btn {
        flex: 1 1 auto;
    }
}

/* ============================================================
   ZVV BLOG — REDESIGNED COMPONENTS (zvv-* classes)
   ============================================================ */

/* ── HERO / MASTHEAD ── */
.zvv-masthead {
    position: relative;
    background: linear-gradient(150deg, #0f0a2e 0%, #1a0f4a 42%, #2e1065 100%);
    overflow: hidden;
}

.zvv-masthead::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 40%, rgba(124, 58, 237, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 50% 45% at 75% 60%, rgba(79, 70, 229, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

.zvv-masthead .blog-aurora-canvas,
.zvv-masthead .hero-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.zvv-masthead-inner {
    position: relative;
    z-index: 2;
    padding-top: 3rem;
}

.zvv-masthead-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.78rem;
    color: rgba(196, 181, 253, 0.65);
    letter-spacing: 0.02em;
    margin-bottom: 2.5rem;
    font-family: 'Space Grotesk', sans-serif;
}

.zvv-meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(167, 139, 250, 0.4);
    flex-shrink: 0;
}

.zvv-masthead-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

.zvv-masthead-copy {
    color: #fff;
}

.zvv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #bd93f9;
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.25);
    border-radius: 999px;
    padding: 4px 14px;
    margin-bottom: 1.25rem;
}

.zvv-masthead-heading {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 1rem;
}

.zvv-masthead-sub {
    font-size: 1rem;
    color: rgba(196, 181, 253, 0.75);
    line-height: 1.65;
    max-width: 420px;
    margin-bottom: 2rem;
}

.zvv-masthead-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.zvv-stat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(167, 139, 250, 0.25);
    border-radius: 14px;
    padding: 10px 18px;
    min-width: 80px;
}

.zvv-stat-pill strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.zvv-stat-pill span {
    font-size: 0.68rem;
    color: rgba(196, 181, 253, 0.6);
    margin-top: 3px;
    letter-spacing: 0.03em;
}

.zvv-masthead-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.zvv-btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 11px 26px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}

.zvv-btn-hero:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 28px rgba(124, 58, 237, 0.55);
}

.zvv-btn-hero-ghost {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.08);
    color: #e2d9fa;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 11px 26px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    backdrop-filter: blur(8px);
}

.zvv-btn-hero-ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ── Hero Card (right side) ── */
.zvv-hero-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 24px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(189,147,249,0.1);
}

.zvv-hero-card-art {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.94) 0%, rgba(79, 70, 229, 0.88) 100%);
}

.zvv-hero-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zvv-hero-card-art .clean-property-art {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.zvv-hero-card-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 10, 46, 0.65) 0%, transparent 55%);
}

.zvv-hero-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 12px;
    font-family: 'Space Grotesk', sans-serif;
    z-index: 2;
}

.zvv-hero-card-body {
    padding: 20px 22px 22px;
}

.zvv-hero-card-cat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #bd93f9;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.zvv-hero-card-cat:hover { color: #bd93f9; }

.zvv-hero-card-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
}

.zvv-hero-card-title a {
    color: #fff;
    text-decoration: none;
}

.zvv-hero-card-title a:hover { color: #bd93f9; }

.zvv-hero-card-excerpt {
    font-size: 0.83rem;
    color: rgba(196, 181, 253, 0.6);
    line-height: 1.55;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zvv-hero-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.74rem;
    color: rgba(196, 181, 253, 0.5);
}

.zvv-hero-card-meta a {
    color: rgba(196, 181, 253, 0.7);
    text-decoration: none;
}

.zvv-hero-card-meta a:hover { color: #bd93f9; }

.zvv-hero-card-empty {
    padding: 3rem 2rem;
    text-align: center;
    color: rgba(196, 181, 253, 0.65);
}

.zvv-hero-card-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 1rem;
    color: rgba(167, 139, 250, 0.4);
}

/* ── Category Strip ── */
.zvv-cat-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid rgba(167, 139, 250, 0.12);
    flex-wrap: wrap;
    padding: 1rem 0;
}

.zvv-cat-strip::-webkit-scrollbar { display: none; }

.zvv-cat-strip a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(196, 181, 253, 0.6);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-decoration: none;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(167, 139, 250, 0.15);
    transition: all 0.18s;
    white-space: nowrap;
}

.zvv-cat-strip a span {
    font-size: 0.66rem;
    background: rgba(124, 58, 237, 0.35);
    color: #bd93f9;
    border-radius: 999px;
    padding: 1px 7px;
}

.zvv-cat-strip a:hover,
.zvv-cat-strip a.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.4), rgba(79, 70, 229, 0.35));
    border-color: rgba(167, 139, 250, 0.4);
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.zvv-blog-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
}

.zvv-blog-main { min-width: 0; }

/* ── Section Head ── */
.zvv-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, #7c3aed, #4f46e5, transparent) 1;
}

.zvv-section-head-stack {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.2rem;
}

.zvv-section-head-stack .zvv-section-title {
    line-height: 1.1;
}

.zvv-section-eyebrow {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7c3aed;
    margin-bottom: 3px;
}

.zvv-section-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--zvv-ink);
    margin: 0;
    line-height: 1.2;
}

.zvv-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: #7c3aed;
    text-decoration: none;
    padding: 5px 12px;
    border: 1px solid rgba(124, 58, 237, 0.28);
    border-radius: 999px;
    transition: all 0.18s;
}

.zvv-clear-btn:hover {
    background: rgba(124, 58, 237, 0.07);
    color: #6d28d9;
}

/* ── Tag pill ── */
.zvv-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.07);
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 999px;
    padding: 3px 10px;
    text-decoration: none;
    transition: all 0.15s;
}

.zvv-tag:hover {
    color: #6d28d9;
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.28);
}

/* ── Read time badge ── */
.zvv-read-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--zvv-muted);
    background: rgba(124,58,237,0.06);
    border-radius: 999px;
    padding: 3px 10px;
}

/* ── Author chip ── */
.zvv-author-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--zvv-ink);
    text-decoration: none;
}

.zvv-author-chip:hover { color: #7c3aed; }

/* ============================================================
   FEATURED STORY HERO
   ============================================================ */
.zvv-story-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 24px;
    overflow: hidden;
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    box-shadow: 0 4px 32px rgba(124, 58, 237, 0.08), 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.zvv-story-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 48px rgba(124, 58, 237, 0.14), 0 2px 6px rgba(0,0,0,0.07);
}

.zvv-story-hero-art {
    display: block;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.94) 0%, rgba(79, 70, 229, 0.88) 100%);
    min-height: 320px;
}

.zvv-story-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
    transition: transform 0.4s ease;
}

.zvv-story-hero-art .clean-property-art {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.zvv-story-hero:hover .zvv-story-hero-art img { transform: scale(1.04); }

.zvv-story-hero-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 10, 46, 0.15), transparent);
    z-index: 1;
}

.zvv-story-hero-body {
    padding: 2.2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.zvv-story-hero-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 10px 0 14px;
}

.zvv-story-hero-title a {
    color: var(--zvv-ink);
    text-decoration: none;
}

.zvv-story-hero-title a:hover { color: #7c3aed; }

.zvv-story-hero-excerpt {
    font-size: 0.95rem;
    color: var(--zvv-muted, #6b7280);
    line-height: 1.65;
    margin-bottom: 1.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zvv-story-hero-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.76rem;
    color: var(--zvv-muted, #9ca3af);
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
}

.zvv-story-hero-meta a {
    color: var(--zvv-ink);
    text-decoration: none;
    font-weight: 600;
}

.zvv-story-hero-meta a:hover { color: #7c3aed; }

.zvv-story-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.zvv-btn-primary-solid {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
}

.zvv-btn-primary-solid:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(124, 58, 237, 0.5);
}

/* ============================================================
   LEAD CARDS GRID
   ============================================================ */
.zvv-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.zvv-editor-picks {
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
}

.zvv-editor-picks-head {
    margin-bottom: 0.9rem;
}

.zvv-editor-picks-controls {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.zvv-editor-picks-btn {
    align-items: center;
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 999px;
    color: var(--zvv-ink);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
    width: 40px;
}

.zvv-editor-picks-btn:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.24);
    color: #7c3aed;
    transform: translateY(-1px);
}

.zvv-editor-picks-track {
    display: flex;
    gap: 16px;
    width: max-content;
    min-width: 100%;
    padding: 6px 6px 16px;
    position: relative;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    mask-image: linear-gradient(90deg, transparent 0, #000 2.2rem, #000 calc(100% - 2.2rem), transparent 100%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.zvv-editor-picks::before,
.zvv-editor-picks::after {
    content: '';
    position: absolute;
    top: 4.85rem;
    bottom: 0.5rem;
    width: 3.25rem;
    pointer-events: none;
    z-index: 2;
}

.zvv-editor-picks::before {
    left: 0;
    background: linear-gradient(90deg, var(--zvv-bg, #f8f7ff), rgba(248,247,255,0));
}

.zvv-editor-picks::after {
    right: 0;
    background: linear-gradient(270deg, var(--zvv-bg, #f8f7ff), rgba(248,247,255,0));
}

.zvv-editor-pick-card {
    flex: 0 0 clamp(290px, 34vw, 390px);
    min-width: 290px;
    position: relative;
    box-shadow:
        0 18px 50px rgba(91, 33, 182, 0.10),
        0 2px 10px rgba(15, 23, 42, 0.05);
    border-radius: 22px;
}

.zvv-editor-pick-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.04) 100%),
        radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.10), transparent 34%);
    opacity: 0.8;
}

.zvv-editor-pick-art {
    aspect-ratio: 16 / 10;
}

.zvv-editor-pick-card .zvv-card-title {
    font-size: 1.14rem;
    line-height: 1.12;
    margin-top: 2px;
}

.zvv-editor-pick-card .zvv-card-body {
    position: relative;
    z-index: 1;
}

.zvv-editor-pick-card .zvv-card-footer {
    padding-top: 12px;
}

.zvv-editor-pick-card .zvv-card-top .zvv-read-badge {
    background: rgba(124, 58, 237, 0.08);
}

.zvv-editor-pick-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 24px 64px rgba(91, 33, 182, 0.16),
        0 4px 14px rgba(15, 23, 42, 0.08);
}

.zvv-card {
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(124, 58, 237, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.zvv-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 36px rgba(124, 58, 237, 0.14);
}

.zvv-card-art {
    display: block;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.94) 0%, rgba(79, 70, 229, 0.88) 100%);
    position: relative;
}

.zvv-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.zvv-card-art .clean-property-art {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.zvv-card:hover .zvv-card-art img { transform: scale(1.04); }

.zvv-card-body {
    padding: 1.1rem 1.25rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.zvv-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.zvv-card-title {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
}

.zvv-card-title a {
    color: var(--zvv-ink);
    text-decoration: none;
}

.zvv-card-title a:hover { color: #7c3aed; }

.zvv-card-excerpt {
    font-size: 0.84rem;
    color: var(--zvv-muted, #6b7280);
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem;
}

.zvv-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--zvv-line, #f0edff);
    flex-wrap: wrap;
}

/* ============================================================
   LATEST FEED
   ============================================================ */
.zvv-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.zvv-feed-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0;
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(124, 58, 237, 0.04);
    transition: transform 0.18s, box-shadow 0.18s;
}

.zvv-feed-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(124, 58, 237, 0.1);
}

.zvv-feed-art {
    display: block;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.94) 0%, rgba(79, 70, 229, 0.88) 100%);
}

.zvv-feed-art img {
    width: 100%;
    height: 100%;
    min-height: 140px;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.zvv-feed-art .clean-property-art {
    width: 100%;
    height: 100%;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.zvv-feed-item:hover .zvv-feed-art img { transform: scale(1.06); }

.zvv-feed-body {
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.zvv-feed-title {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 6px 0 6px;
}

.zvv-feed-title a {
    color: var(--zvv-ink);
    text-decoration: none;
}

.zvv-feed-title a:hover { color: #7c3aed; }

.zvv-feed-excerpt {
    font-size: 0.83rem;
    color: var(--zvv-muted, #6b7280);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.zvv-feed-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.73rem;
    color: var(--zvv-muted, #9ca3af);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.zvv-feed-meta a {
    color: var(--zvv-ink, #374151);
    text-decoration: none;
    font-weight: 600;
}

.zvv-feed-meta a:hover { color: #7c3aed; }

.zvv-feed-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.zvv-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #7c3aed;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid rgba(124, 58, 237, 0.3);
    border-radius: 999px;
    padding: 5px 14px;
    transition: all 0.18s;
}

.zvv-btn-ghost:hover {
    background: rgba(124, 58, 237, 0.07);
    border-color: #7c3aed;
    color: #5b21b6;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.zvv-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 80px;
}

.zvv-sw {
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.04);
}

.zvv-sw-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--zvv-muted, #9ca3af);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Search */
.zvv-search-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zvv-search-bar {
    display: flex;
    border: 1.5px solid var(--zvv-line, #e5e1ff);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color 0.18s;
}

.zvv-search-bar:focus-within { border-color: #7c3aed; }

.zvv-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 9px 14px;
    font-size: 0.86rem;
    color: var(--zvv-ink);
    outline: none;
}

.zvv-search-btn {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    width: 48px;
    padding: 0;
    cursor: pointer;
    font-size: 0.92rem;
    line-height: 1;
    transition: opacity 0.15s;
}

.zvv-search-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1;
}

.zvv-search-btn:hover { opacity: 0.85; }

/* Write CTA */
.zvv-sw-cta {
    background: linear-gradient(135deg, #1a0f4a 0%, #2e1065 100%);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 18px;
    padding: 1.4rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(15, 10, 46, 0.18);
}

.zvv-sw-cta-icon {
    font-size: 2rem;
    color: #bd93f9;
    margin-bottom: 10px;
}

.zvv-sw-cta h4 {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.zvv-sw-cta p {
    font-size: 0.8rem;
    color: rgba(196, 181, 253, 0.6);
    line-height: 1.55;
    margin-bottom: 1rem;
}

.zvv-sw-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
}

.zvv-sw-cta-btn:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(124, 58, 237, 0.55);
}

/* Popular List */
.zvv-popular-list { display: flex; flex-direction: column; }

.zvv-popular-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--zvv-line, #f0edff);
    text-decoration: none;
}

.zvv-popular-item:last-child { border-bottom: none; }

.zvv-popular-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.zvv-popular-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zvv-popular-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.zvv-popular-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--zvv-ink);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}

.zvv-popular-item:hover .zvv-popular-title { color: #7c3aed; }

.zvv-popular-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--zvv-muted, #8b88a3);
}

.zvv-popular-meta-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.zvv-popular-meta-item i { font-size: 0.72rem; color: #7c3aed; }

[data-bs-theme="dark"] .zvv-popular-meta-item i { color: #bd93f9; }

/* Categories */
.zvv-cat-list { display: flex; flex-direction: column; }

.zvv-cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--zvv-line, #f0edff);
    text-decoration: none;
    color: var(--zvv-ink, #374151);
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.15s;
}

.zvv-cat-item:last-child { border-bottom: none; }

.zvv-cat-item strong {
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
    border-radius: 999px;
    padding: 2px 9px;
    font-family: 'Space Grotesk', sans-serif;
}

.zvv-cat-item span { display: flex; align-items: center; gap: 6px; }
.zvv-cat-item:hover { color: #7c3aed; }
.zvv-cat-item.active {
    color: #6d28d9;
    font-weight: 700;
    background: linear-gradient(90deg, rgba(109,40,217,0.08), rgba(124,58,237,0.03));
    border-radius: 8px;
    padding: 9px 10px;
    margin: 2px -10px;
    border-bottom-color: transparent;
}
.zvv-cat-item.active strong {
    background: #6d28d9;
    color: #fff;
    font-weight: 800;
}

/* Shared posts */
.zvv-shared-list {
    display: flex;
    flex-direction: column;
}

.zvv-shared-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--zvv-line, #f0edff);
    color: var(--zvv-ink, #374151);
    text-decoration: none;
    transition: color 0.15s;
}

.zvv-shared-item-profile {
    align-items: center;
    gap: 12px;
}

.zvv-shared-item-link {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.zvv-shared-item-action {
    flex-shrink: 0;
}

.zvv-shared-unshare-btn {
    align-items: center;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 999px;
    color: #b91c1c;
    display: inline-flex;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.zvv-shared-unshare-btn:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
    transform: translateY(-1px);
}

.zvv-shared-unshare-btn i {
    font-size: 0.95rem;
}

.zvv-shared-thumb,
.zvv-act-thumb {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(59,130,246,0.12));
    border: 1px solid rgba(124,58,237,0.14);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7c3aed;
}

.zvv-shared-thumb img,
.zvv-act-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zvv-shared-thumb i,
.zvv-act-thumb i {
    font-size: 18px;
}

.zvv-shared-item:last-child {
    border-bottom: none;
}

.zvv-shared-item:hover {
    color: #7c3aed;
}

.zvv-shared-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.zvv-shared-item-main strong {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
}

.zvv-shared-item-main small {
    font-size: 11px;
    color: var(--zvv-muted, #6272a4);
}

.zvv-shared-item > i {
    flex-shrink: 0;
    margin-top: 2px;
    color: #7c3aed;
}

.zvv-cred-shared-panel .zvv-tool-head {
    align-items: center;
}

.zvv-cred-shared-panel .zvv-shared-list {
    gap: 10px;
}

.zvv-cred-shared-panel .zvv-shared-item {
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 12px;
    border: 1px solid rgba(124,58,237,0.10);
    border-radius: 14px;
    background: rgba(124,58,237,0.035);
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.zvv-cred-shared-panel .zvv-shared-item:hover {
    background: rgba(124,58,237,0.07);
    border-color: rgba(124,58,237,0.22);
    transform: translateY(-1px);
}

.zvv-cred-shared-panel .zvv-shared-thumb {
    width: 58px;
    height: 58px;
    border-radius: 12px;
}

.zvv-cred-shared-panel .zvv-shared-item-main {
    flex: 1 1 auto;
}

.zvv-cred-shared-panel .zvv-shared-item-main strong {
    color: var(--zvv-ink, #374151);
    font-size: 0.94rem;
}

.zvv-cred-shared-panel .zvv-shared-item-main small {
    margin-top: 3px;
}

.zvv-cred-shared-panel .zvv-shared-item > i {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(124,58,237,0.08);
    color: #7c3aed;
}

.zvv-act-item { align-items: center; }
.zvv-act-body { min-width: 0; }

/* Tools / credibility pages */
.zvv-tools-hero,
.zvv-credibility-hero {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 24px;
}

.zvv-cred-hero {
    background:
        linear-gradient(180deg, rgba(124,58,237,0.12), rgba(124,58,237,0.03)),
        var(--zvv-panel);
    border: 1px solid rgba(124,58,237,0.10);
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
    margin-bottom: 20px;
}

.zvv-cred-hero-top {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.zvv-cred-page-title {
    margin: 4px 0 6px;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1.08;
}

.zvv-cred-page-subtitle {
    margin: 0;
    color: var(--zvv-muted);
    font-size: 15px;
    font-weight: 600;
}

.zvv-cred-back-btn {
    white-space: nowrap;
    border-radius: 999px;
    font-weight: 700;
    padding-inline: 16px;
}

.zvv-cred-hero-layout {
    display:grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 18px;
}

.zvv-cred-profile-card,
.zvv-cred-summary-card {
    background: rgba(124,58,237,0.04);
    border: 1px solid rgba(124,58,237,0.10);
    border-radius: 20px;
    padding: 18px;
    min-width: 0;
}

.zvv-cred-profile-card {
    display:flex;
    flex-direction:column;
    gap: 16px;
    align-items:flex-start;
}

.zvv-cred-profile-media {
    width: 100%;
    display:flex;
    justify-content:flex-start;
}

.zvv-tools-grid,
.zvv-cred-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.zvv-tool-panel {
    background: var(--zvv-panel);
    border: 1px solid rgba(124,58,237,0.10);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.05);
}

.zvv-tool-head {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-end;
    margin-bottom:16px;
}

.zvv-tool-head h2 {
    margin:0;
    font-family:'Sora',sans-serif;
    font-size:1.15rem;
    font-weight:800;
}

.zvv-tool-head span {
    color: var(--zvv-muted);
    font-size: 12px;
    font-weight: 600;
}

.zvv-tool-form {
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.zvv-tool-form label {
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--zvv-muted);
}

.zvv-tool-form input {
    width:100%;
    border-radius:12px;
    border:1px solid var(--zvv-line);
    background: color-mix(in srgb, var(--zvv-panel) 85%, #ffffff);
    color: var(--zvv-ink);
    padding:10px 12px;
    font-weight:700;
}

.zvv-tool-results {
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.zvv-tool-results > div,
.zvv-cred-list > div {
    background: rgba(124,58,237,0.05);
    border: 1px solid rgba(124,58,237,0.10);
    border-radius: 14px;
    padding: 12px 14px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.zvv-tool-results strong,
.zvv-cred-list strong {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--zvv-muted);
}

.zvv-tool-results span,
.zvv-cred-list span {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--zvv-ink);
}

.zvv-credibility-head {
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.zvv-cred-avatar {
    width: clamp(112px, 18vw, 160px);
    height: clamp(112px, 18vw, 160px);
    border-radius: 26px;
    overflow: hidden;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    border: 4px solid rgba(255,255,255,0.1);
    box-shadow: 0 16px 44px rgba(124,58,237,0.22);
    flex-shrink: 0;
    display: inline-flex;
    align-items:center;
    justify-content:center;
}

.zvv-cred-avatar img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.zvv-cred-score {
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    width:100%;
}

.zvv-cred-score-ring {
    width:104px;
    height:104px;
    border-radius:50%;
    border: 10px solid rgba(124,58,237,0.16);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    background: rgba(124,58,237,0.06);
}

.zvv-cred-score-ring strong {
    font-size: 1.65rem;
    line-height: 1;
    font-weight: 900;
    color: #7c3aed;
}

.zvv-cred-score-ring span {
    font-size: 11px;
    color: var(--zvv-muted);
    font-weight: 700;
}

.zvv-cred-score-copy h2 {
    margin:0;
    font-size: 1.1rem;
    font-weight: 800;
}

.zvv-cred-score-copy p {
    margin:6px 0 0;
    color: var(--zvv-muted);
}

.zvv-cred-list {
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.zvv-cred-summary-grid {
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.zvv-cred-summary-grid > div {
    background: rgba(124,58,237,0.05);
    border: 1px solid rgba(124,58,237,0.10);
    border-radius: 16px;
    padding: 14px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.zvv-cred-summary-grid strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--zvv-ink);
}

.zvv-cred-summary-grid span {
    font-size: 12px;
    font-weight: 700;
    color: var(--zvv-muted);
}

.zvv-cred-posts {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.zvv-cred-post {
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color: var(--zvv-ink);
    padding:10px 0;
    border-bottom:1px solid var(--zvv-line);
}

.zvv-cred-post:last-child { border-bottom:none; }
.zvv-cred-post:hover { color:#7c3aed; }

.zvv-cred-post-thumb {
    width:56px;
    height:56px;
    border-radius:14px;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: rgba(124,58,237,0.08);
    flex-shrink:0;
}

.zvv-cred-post-thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.zvv-cred-post-copy {
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
    flex:1;
}

.zvv-cred-post-copy strong {
    font-size: 0.92rem;
    font-weight: 800;
}

.zvv-cred-post-copy small {
    color: var(--zvv-muted);
    font-size: 11px;
}

.zvv-cred-post > i {
    color:#7c3aed;
    flex-shrink:0;
}

.zvv-cred-empty {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding: 16px 0 6px;
    color: var(--zvv-muted);
}

.zvv-cred-empty i {
    font-size: 1.2rem;
    color:#7c3aed;
}

.zvv-cred-empty strong {
    color: var(--zvv-ink);
    font-size: 1rem;
}

[data-bs-theme="dark"] .zvv-tool-panel {
    border-color: rgba(189,147,249,0.14);
    background: rgba(30,27,75,.35);
}
[data-bs-theme="dark"] .zvv-cred-hero {
    background:
        linear-gradient(180deg, rgba(189,147,249,0.12), rgba(189,147,249,0.03)),
        rgba(30,27,75,.45);
    border-color: rgba(189,147,249,0.16);
}
[data-bs-theme="dark"] .zvv-cred-profile-card,
[data-bs-theme="dark"] .zvv-cred-summary-card,
[data-bs-theme="dark"] .zvv-cred-summary-grid > div {
    background: rgba(189,147,249,0.06);
    border-color: rgba(189,147,249,0.14);
}
[data-bs-theme="dark"] .zvv-tool-form input {
    background: #1e1f2e;
    border-color: rgba(189,147,249,0.18);
    color: #f8f8f2;
}
[data-bs-theme="dark"] .zvv-tool-results > div,
[data-bs-theme="dark"] .zvv-cred-list > div {
    background: rgba(189,147,249,0.06);
    border-color: rgba(189,147,249,0.14);
}
[data-bs-theme="dark"] .zvv-cred-score-ring {
    background: rgba(189,147,249,0.08);
    border-color: rgba(189,147,249,0.18);
}
[data-bs-theme="dark"] .zvv-cred-score-ring strong { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-cred-post { border-bottom-color: rgba(189,147,249,0.14); }

@media (max-width: 900px) {
    .zvv-cred-hero-layout,
    .zvv-tools-grid,
    .zvv-cred-grid,
    .zvv-tool-form,
    .zvv-tool-results,
    .zvv-cred-list,
    .zvv-cred-summary-grid {
        grid-template-columns: 1fr;
    }

    .zvv-cred-hero-top {
        flex-direction:column;
        align-items:flex-start;
    }
}

/* Wallet CTA */
.zvv-sw-wallet {
    background: linear-gradient(135deg, #0f0a2e 0%, #1a0f4a 60%, #2e1065 100%);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 18px;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 24px rgba(15, 10, 46, 0.18);
}

.zvv-sw-wallet-icon {
    font-size: 1.8rem;
    color: #bd93f9;
}

.zvv-sw-wallet strong {
    font-family: 'Sora', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.zvv-sw-wallet p {
    font-size: 0.77rem;
    color: rgba(196, 181, 253, 0.55);
    line-height: 1.5;
    margin: 0;
}

.zvv-sw-wallet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.28);
    color: #e2d9fa;
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.83rem;
    font-weight: 700;
    text-decoration: none;
    margin-top: 4px;
    transition: all 0.18s;
}

.zvv-sw-wallet-btn:hover {
    color: #fff;
    background: rgba(124, 58, 237, 0.5);
    border-color: rgba(167, 139, 250, 0.5);
}

/* ============================================================
   NEWSLETTER WIDGET
   ============================================================ */
.zvv-nl-widget { }

.zvv-nl-desc {
    font-size: .85rem;
    color: var(--zvv-muted);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.zvv-nl-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zvv-nl-input-wrap {
    position: relative;
    display: block;
}

.zvv-nl-input-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #9ca3af;
    pointer-events: none;
}

.zvv-nl-input {
    width: 100%;
    padding: 9px 13px 9px 36px;
    font-size: .85rem;
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    background: var(--zvv-bg);
    color: var(--zvv-ink);
    outline: none;
    transition: border-color .15s;
}

.zvv-nl-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,.08);
}

.zvv-nl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
}

.zvv-nl-btn:hover { opacity: .88; transform: translateY(-1px); }
.zvv-nl-btn:active { transform: none; }
.zvv-nl-btn:disabled { opacity: .55; cursor: default; transform: none; }

.zvv-nl-msg {
    margin-top: 10px;
    font-size: .82rem;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 500;
}

.zvv-nl-msg.success {
    background: rgba(22,163,74,.08);
    color: #15803d;
    border: 1px solid rgba(22,163,74,.2);
}

.zvv-nl-msg.error {
    background: rgba(220,38,38,.08);
    color: #dc2626;
    border: 1px solid rgba(220,38,38,.18);
}

[data-bs-theme="dark"] .zvv-nl-input {
    background: var(--zvv-panel);
    border-color: var(--zvv-line);
    color: var(--zvv-ink);
}

[data-bs-theme="dark"] .zvv-nl-input-icon {
    color: #c4b5fd;
}

[data-bs-theme="dark"] .zvv-nl-input:focus {
    border-color: #bd93f9;
    box-shadow: 0 0 0 3px rgba(189,147,249,.1);
}

[data-bs-theme="dark"] .zvv-nl-btn {
    background: linear-gradient(135deg, #bd93f9, #9580ff);
    color: #1e1f2e;
}

[data-bs-theme="dark"] .zvv-nl-msg.success { color: #50fa7b; border-color: rgba(80,250,123,.2); background: rgba(80,250,123,.07); }
[data-bs-theme="dark"] .zvv-nl-msg.error   { color: #ff5555; border-color: rgba(255,85,85,.2);  background: rgba(255,85,85,.07);  }

/* ============================================================
   EMPTY STATES
   ============================================================ */
.zvv-empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.zvv-empty-state.zvv-empty-sm { padding: 2.5rem 1.5rem; }

.zvv-empty-icon {
    font-size: 2.5rem;
    color: rgba(124, 58, 237, 0.22);
    margin-bottom: 1rem;
}

.zvv-empty-state h2,
.zvv-empty-state h3 {
    font-family: 'Sora', sans-serif;
    color: var(--zvv-ink);
    margin-bottom: 8px;
}

.zvv-empty-state p {
    color: var(--zvv-muted, #6b7280);
    margin-bottom: 1.5rem;
}

/* ============================================================
   ERROR PAGES
   ============================================================ */
.zvv-error-page {
    min-height: 100vh;
    background: rgba(124,58,237,0.04);
}

.zvv-error-page .zvv-footer {
    margin-top: 0;
}

.zvv-error-shell {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(124, 58, 237, 0.18), transparent 32%),
        radial-gradient(circle at 86% 20%, rgba(14, 165, 233, 0.14), transparent 28%),
        linear-gradient(150deg, #0f0a2e 0%, #1a0f4a 48%, #312e81 100%);
    color: #fff;
}

.zvv-error-shell-forbidden {
    background:
        radial-gradient(circle at 12% 18%, rgba(239, 68, 68, 0.16), transparent 32%),
        radial-gradient(circle at 86% 20%, rgba(124, 58, 237, 0.18), transparent 28%),
        linear-gradient(150deg, #12091f 0%, #1a0f4a 48%, #3b0764 100%);
}

.zvv-error-shell .blog-aurora-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.72;
}

.zvv-error-inner {
    position: relative;
    z-index: 2;
    padding: clamp(56px, 8vw, 104px) 12px clamp(44px, 6vw, 76px);
}

.zvv-error-hero {
    display: grid;
    grid-template-columns: minmax(220px, 360px) minmax(0, 620px);
    gap: clamp(28px, 6vw, 76px);
    align-items: center;
    min-height: 430px;
}

.zvv-error-orbit {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)),
        radial-gradient(circle at 35% 30%, rgba(189,147,249,0.34), transparent 46%);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 28px 90px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.18);
}

.zvv-error-orbit::before,
.zvv-error-orbit::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.16);
}

.zvv-error-orbit::before {
    inset: 10%;
}

.zvv-error-orbit::after {
    inset: -8%;
    border-style: dashed;
    opacity: 0.55;
}

.zvv-error-orbit span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(4.5rem, 12vw, 8rem);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow: 0 10px 35px rgba(0,0,0,0.28);
}

.zvv-error-orbit i {
    position: absolute;
    right: 12%;
    bottom: 15%;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 1.45rem;
    box-shadow: 0 14px 36px rgba(124,58,237,0.42);
}

.zvv-error-orbit-locked i {
    background: linear-gradient(135deg, #ef4444, #7c3aed);
}

.zvv-error-copy h1 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.1rem, 5vw, 4.4rem);
    font-weight: 800;
    line-height: 1.06;
    color: #fff;
    margin: 0 0 18px;
    max-width: 780px;
}

.zvv-error-copy p {
    max-width: 620px;
    color: rgba(232, 224, 255, 0.78);
    font-size: 1.04rem;
    line-height: 1.7;
    margin: 0;
}

.zvv-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.zvv-error-actions .zvv-btn-hero-ghost {
    color: #fff;
    text-decoration: none;
}

.zvv-error-panel {
    margin-top: 28px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 20px 70px rgba(0,0,0,0.18);
    backdrop-filter: blur(18px);
}

.zvv-error-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    font-family: 'Space Grotesk', sans-serif;
}

.zvv-error-panel-head span {
    color: #fff;
    font-weight: 700;
}

.zvv-error-panel-head a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c4b5fd;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 700;
}

.zvv-error-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.zvv-error-links a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.11);
    color: #fff;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.zvv-error-links a:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.12);
    border-color: rgba(189,147,249,0.34);
}

.zvv-error-links strong {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(124,58,237,0.22);
    color: #d8b4fe;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.86rem;
}

.zvv-error-links span {
    min-width: 0;
    color: rgba(255,255,255,0.88);
    font-weight: 700;
    line-height: 1.3;
}

.zvv-error-links i {
    color: #bd93f9;
}

@media (max-width: 991.98px) {
    .zvv-error-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        text-align: center;
    }

    .zvv-error-orbit {
        width: min(280px, 78vw);
        margin: 0 auto;
    }

    .zvv-error-copy p {
        margin-left: auto;
        margin-right: auto;
    }

    .zvv-error-actions {
        justify-content: center;
    }

    .zvv-error-links {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .zvv-error-inner {
        padding-top: 42px;
    }

    .zvv-error-panel {
        border-radius: 18px;
        padding: 12px;
    }

    .zvv-error-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ============================================================
   FOOTER
   ============================================================ */
.zvv-footer {
    background: linear-gradient(135deg, #0f0a2e 0%, #1a0f4a 60%);
    border-top: 1px solid rgba(167, 139, 250, 0.12);
    padding: 2rem 0;
    margin-top: 3rem;
}

.zvv-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.zvv-footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.zvv-footer-mark {
    font-family: 'Sora', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    background: linear-gradient(135deg, #bd93f9, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.zvv-footer-brand strong {
    display: block;
    font-size: 0.9rem;
    color: #fff;
}

.zvv-footer-brand span {
    font-size: 0.75rem;
    color: rgba(196, 181, 253, 0.45);
}

.zvv-footer-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.zvv-footer-nav a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(196, 181, 253, 0.5);
    text-decoration: none;
    transition: color 0.15s;
}

.zvv-footer-nav a:hover { color: #bd93f9; }

/* ============================================================
   DARK MODE
   ============================================================ */
[data-bs-theme="dark"] .zvv-section-title { color: var(--zvv-ink); }
[data-bs-theme="dark"] .zvv-story-hero { background: rgba(189,147,249,0.04); border-color: rgba(189,147,249,0.14); }
[data-bs-theme="dark"] .zvv-story-hero-title a,
[data-bs-theme="dark"] .zvv-card-title a,
[data-bs-theme="dark"] .zvv-feed-title a { color: var(--zvv-ink); }
[data-bs-theme="dark"] .zvv-card { background: rgba(189,147,249,0.04); border-color: rgba(189,147,249,0.12); }
[data-bs-theme="dark"] .zvv-feed-item { background: rgba(189,147,249,0.04); border-color: rgba(189,147,249,0.12); }
[data-bs-theme="dark"] .zvv-editor-picks::before {
    background: linear-gradient(90deg, var(--zvv-bg), rgba(18,19,26,0));
}
[data-bs-theme="dark"] .zvv-editor-picks::after {
    background: linear-gradient(270deg, var(--zvv-bg), rgba(18,19,26,0));
}
[data-bs-theme="dark"] .zvv-editor-picks-btn {
    background: var(--zvv-panel);
    border-color: var(--zvv-line);
    color: var(--zvv-ink);
}
[data-bs-theme="dark"] .zvv-editor-picks-btn:hover {
    background: rgba(189,147,249,0.08);
    border-color: rgba(189,147,249,0.24);
    color: #bd93f9;
}
[data-bs-theme="dark"] .zvv-sw { background: rgba(189,147,249,0.04); border-color: rgba(189,147,249,0.12); }
[data-bs-theme="dark"] .zvv-sw-title { color: rgba(189,147,249,0.55); }
[data-bs-theme="dark"] .zvv-search-input { color: var(--zvv-ink); }
[data-bs-theme="dark"] .zvv-popular-title { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-popular-thumb { background: linear-gradient(135deg, #5b21b6, #3730a3); }
[data-bs-theme="dark"] .zvv-cat-item { color: rgba(189,147,249,0.8); }
[data-bs-theme="dark"] .zvv-cat-item.active { color: #ff79c6; background: linear-gradient(90deg, rgba(255,121,198,0.14), rgba(189,147,249,0.04)); }
[data-bs-theme="dark"] .zvv-cat-item.active strong { background: linear-gradient(90deg, #ff79c6, #bd93f9); color: #282a36; font-weight: 800; }
[data-bs-theme="dark"] .zvv-author-chip { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-feed-meta a { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-read-badge { background: rgba(189,147,249,0.1); color: rgba(189,147,249,0.8); }
[data-bs-theme="dark"] .zvv-card-footer { border-top-color: rgba(189,147,249,0.1); }
[data-bs-theme="dark"] .zvv-popular-item,
[data-bs-theme="dark"] .zvv-cat-item { border-bottom-color: rgba(189,147,249,0.12); }
[data-bs-theme="dark"] .zvv-shared-item { border-bottom-color: rgba(189,147,249,0.12); color: rgba(189,147,249,0.85); }
[data-bs-theme="dark"] .zvv-shared-item:hover { color: #ff79c6; }
[data-bs-theme="dark"] .zvv-shared-item-main small { color: rgba(189,147,249,0.55); }
[data-bs-theme="dark"] .zvv-shared-item > i { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-shared-thumb,
[data-bs-theme="dark"] .zvv-act-thumb { background: linear-gradient(135deg, rgba(189,147,249,0.18), rgba(139,233,253,0.10)); border-color: rgba(189,147,249,0.16); color: #bd93f9; }
[data-bs-theme="dark"] .zvv-cred-shared-panel .zvv-shared-item {
    background: rgba(189,147,249,0.045);
    border-color: rgba(189,147,249,0.12);
}
[data-bs-theme="dark"] .zvv-cred-shared-panel .zvv-shared-item:hover {
    background: rgba(189,147,249,0.08);
    border-color: rgba(255,121,198,0.24);
}
[data-bs-theme="dark"] .zvv-cred-shared-panel .zvv-shared-item-main strong {
    color: rgba(245,243,255,0.96);
}
[data-bs-theme="dark"] .zvv-cred-shared-panel .zvv-shared-item > i {
    background: rgba(189,147,249,0.10);
    color: #bd93f9;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .zvv-blog-layout { grid-template-columns: 1fr; }
    .zvv-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .zvv-sw-cta, .zvv-sw-wallet { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .zvv-masthead-grid { grid-template-columns: 1fr; }
    .zvv-hero-card { display: none; }
    .zvv-masthead-heading { font-size: 2rem; }
    .zvv-story-hero { grid-template-columns: 1fr; }
    .zvv-story-hero-art { min-height: 200px; aspect-ratio: 16/9; }
    .zvv-story-hero-art img,
    .zvv-story-hero-art .clean-property-art { position: relative; }
    .zvv-story-hero-body { padding: 1.4rem; }
    .zvv-story-hero-title { font-size: 1.25rem; }
    .zvv-cards-grid { grid-template-columns: 1fr; }
    .zvv-feed-item { grid-template-columns: 110px 1fr; }
    .zvv-sidebar { display: flex; }
    .zvv-footer-inner { flex-direction: column; align-items: flex-start; }
    .zvv-cred-shared-panel .zvv-tool-head { align-items: flex-start; }
    .zvv-cred-shared-panel .zvv-shared-item { padding: 10px; gap: 10px; }
    .zvv-cred-shared-panel .zvv-shared-thumb { width: 52px; height: 52px; }
    .zvv-cred-shared-panel .zvv-shared-item > i { width: 30px; height: 30px; }
}

@media (max-width: 480px) {
    .zvv-feed-item { grid-template-columns: 1fr; }
    .zvv-feed-art img,
    .zvv-feed-art .clean-property-art { min-height: 160px; aspect-ratio: 16/8; }
    .zvv-feed-body { padding: 1rem; }
    .zvv-masthead-stats { gap: 8px; }
    .zvv-stat-pill { padding: 8px 14px; min-width: 70px; }
    .zvv-story-hero-title { font-size: 1.1rem; }
    .zvv-cred-shared-panel .zvv-tool-head { flex-direction: column; gap: 4px; }
    .zvv-cred-shared-panel .zvv-shared-item-main strong { font-size: 0.88rem; }
}

/* ============================================================
   ZVV WALLET DASHBOARD — REDESIGNED (zvv-dash-* classes)
   ============================================================ */

/* ── Body / App Shell ── */
.zvv-dash-body {
    background: var(--zvv-bg, #f4f1ff);
    min-height: 100vh;
}

.zvv-dash-body .zvv-footer {
    margin-top: 0;
}

.zvv-dash-app {
    display: flex;
    flex: 1 0 0%;
    align-items: stretch;
    position: relative;
    z-index: 1;
    isolation: isolate;
}

/* ── Sidebar ── */
.zvv-dash-sidebar.app-sidebar {
    background: linear-gradient(180deg, #0f0a2e 0%, #1a0f4a 55%, #2e1065 100%);
    border-right: 1px solid rgba(167, 139, 250, 0.12);
    display: flex;
    flex-direction: column;
    width: 220px;
    min-width: 220px;
    padding: 0;
    align-self: stretch;
    min-height: 100%;
}

.zvv-dash-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 18px 16px;
    text-decoration: none;
    border-bottom: 1px solid rgba(167, 139, 250, 0.1);
}

.zvv-dash-brand-mark {
    font-family: 'Sora', sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    background: linear-gradient(135deg, #bd93f9, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.zvv-dash-brand strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.zvv-dash-brand span {
    font-size: 0.68rem;
    color: rgba(196, 181, 253, 0.5);
}

.zvv-dash-brand-sm { padding: 0; border: none; }

.zvv-dash-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14px 10px;
    gap: 2px;
}

.zvv-dash-nav a,
.zvv-dash-nav button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 600;
    color: rgba(196, 181, 253, 0.65);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.zvv-dash-nav a:hover,
.zvv-dash-nav button:hover {
    color: #e2d9fa;
    background: rgba(167, 139, 250, 0.1);
}

.zvv-dash-nav a.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.45), rgba(79, 70, 229, 0.35));
    border: 1px solid rgba(167, 139, 250, 0.25);
}

.zvv-dash-nav i {
    font-size: 1rem;
    flex-shrink: 0;
}

.zvv-dash-sidebar-footer {
    padding: 14px 10px;
    border-top: 1px solid rgba(167, 139, 250, 0.1);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zvv-dash-theme-btn,
.zvv-dash-logout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.zvv-dash-theme-btn {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(196, 181, 253, 0.7);
    border: 1px solid rgba(167, 139, 250, 0.15);
}

.zvv-dash-theme-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e2d9fa;
}

.zvv-dash-logout-btn {
    background: rgba(239, 68, 68, 0.1);
    color: rgba(252, 165, 165, 0.8);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.zvv-dash-logout-btn:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}

/* ── Main content area ── */
.zvv-dash-main.app-main {
    flex: 1;
    padding: 2rem 2rem 3rem;
    min-width: 0;
    background: var(--zvv-bg, #f4f1ff);
}

/* ── Alerts ── */
.zvv-dash-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.zvv-dash-alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #059669;
}

.zvv-dash-alert-danger {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.22);
    color: #dc2626;
}

.zvv-message-success-toast {
    position: fixed;
    right: 22px;
    top: 92px;
    z-index: 1100;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: min(360px, calc(100vw - 32px));
    padding: 14px 14px 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(16, 185, 129, 0.24);
    box-shadow: 0 18px 50px rgba(15, 10, 46, 0.18);
    color: #0f172a;
    animation: zvv-toast-in 0.24s ease-out;
}

.zvv-message-success-toast.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.zvv-message-success-toast > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    font-size: 1.2rem;
}

.zvv-message-success-toast strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    color: #064e3b;
}

.zvv-message-success-toast small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 0.78rem;
}

.zvv-message-success-toast button {
    border: 0;
    background: transparent;
    color: #94a3b8;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
}

.zvv-message-success-toast button:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

@keyframes zvv-toast-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

[data-bs-theme="dark"] .zvv-message-success-toast {
    background: rgba(31, 32, 48, 0.96);
    border-color: rgba(16, 185, 129, 0.28);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
}

[data-bs-theme="dark"] .zvv-message-success-toast strong { color: #d1fae5; }
[data-bs-theme="dark"] .zvv-message-success-toast small { color: #c4b5fd; }
[data-bs-theme="dark"] .zvv-message-success-toast button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f8f8f2;
}

@media (max-width: 575.98px) {
    .zvv-message-success-toast {
        top: 76px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}

/* ── Email Verification Banner ── */
.zvv-email-verify-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.3);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.zvv-email-verify-banner-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.zvv-email-verify-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(234, 179, 8, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #d97706;
    flex-shrink: 0;
}

.zvv-email-verify-banner-left > div strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 2px;
}

.zvv-email-verify-banner-left > div span {
    font-size: 0.82rem;
    color: #b45309;
    line-height: 1.5;
}

.zvv-email-verify-banner-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.zvv-email-verify-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #d97706;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.zvv-email-verify-btn:hover:not(:disabled) { background: #b45309; }
.zvv-email-verify-btn:disabled { opacity: 0.7; cursor: not-allowed; }

.zvv-email-verify-dismiss {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(234, 179, 8, 0.12);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #92400e;
    flex-shrink: 0;
    transition: background 0.15s;
}

.zvv-email-verify-dismiss:hover { background: rgba(234, 179, 8, 0.25); }

.zvv-email-verify-result {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.zvv-email-verify-result.ok {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #15803d;
}

.zvv-email-verify-result.err {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.22);
    color: #dc2626;
}

[data-bs-theme="dark"] .zvv-email-verify-banner {
    background: rgba(234, 179, 8, 0.06);
    border-color: rgba(234, 179, 8, 0.2);
}

[data-bs-theme="dark"] .zvv-email-verify-banner-left > div strong { color: #fde68a; }
[data-bs-theme="dark"] .zvv-email-verify-banner-left > div span  { color: #fcd34d; }
[data-bs-theme="dark"] .zvv-email-verify-icon    { color: #fbbf24; background: rgba(234,179,8,.1); }
[data-bs-theme="dark"] .zvv-email-verify-dismiss { color: #fde68a; }

/* ── Page Header ── */
.zvv-dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.zvv-dash-heading {
    font-family: 'Sora', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--zvv-ink, #1a0f4a);
    letter-spacing: -0.02em;
    margin: 4px 0 4px;
    line-height: 1.1;
}

.zvv-dash-sub {
    color: var(--zvv-muted, #6b7280);
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.zvv-reward-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 0.82rem;
    color: var(--zvv-ink, #4b5563);
}

.zvv-reward-banner i {
    color: #f59e0b;
}

.zvv-reward-banner a {
    color: #7c3aed;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.zvv-reward-banner a:hover { color: #5b21b6; }

.zvv-dash-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

/* ── Balance Grid ── */
.zvv-balance-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    align-items: start;
}

/* ── Balance Card ── */
.zvv-balance-card {
    background: linear-gradient(150deg, #0f0a2e 0%, #1a0f4a 45%, #2e1065 100%);
    border: 1px solid rgba(167, 139, 250, 0.18);
    border-radius: 24px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(15, 10, 46, 0.3), inset 0 1px 0 rgba(255,255,255,0.07);
}

.zvv-balance-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 45% at 80% 20%, rgba(124, 58, 237, 0.3) 0%, transparent 65%),
        radial-gradient(ellipse 40% 35% at 10% 80%, rgba(79, 70, 229, 0.2) 0%, transparent 60%);
    pointer-events: none;
}

.zvv-balance-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.zvv-balance-label {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(196, 181, 253, 0.6);
    margin-bottom: 8px;
}

.zvv-balance-amount {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.zvv-balance-amount span {
    font-size: 0.45em;
    font-weight: 600;
    color: rgba(196, 181, 253, 0.7);
    letter-spacing: 0.04em;
    margin-left: 4px;
}

.zvv-balance-sub {
    font-size: 0.78rem;
    color: rgba(196, 181, 253, 0.45);
    margin-top: 8px;
    margin-bottom: 0;
}

.zvv-orbit {
    position: relative;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.zvv-address-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(167, 139, 250, 0.15);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.zvv-address-row i {
    color: rgba(196, 181, 253, 0.5);
    flex-shrink: 0;
}

.zvv-address-row code {
    flex: 1;
    font-size: 0.75rem;
    color: rgba(196, 181, 253, 0.75);
    background: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.zvv-address-row.compact { margin-bottom: 0; background: var(--zvv-panel, #f3f4f6); border-color: var(--zvv-line, #e5e1ff); }
.zvv-address-row.compact code { color: var(--zvv-ink, #374151); }
.zvv-address-row.compact i { color: #7c3aed; }

.zvv-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(124, 58, 237, 0.25);
    color: #bd93f9;
    border: 1px solid rgba(167, 139, 250, 0.25);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.zvv-copy-btn:hover {
    background: rgba(124, 58, 237, 0.4);
    color: #fff;
}

.zvv-address-row.compact .zvv-copy-btn {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
    border-color: rgba(124, 58, 237, 0.25);
}

.zvv-balance-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    position: relative;
    z-index: 1;
}

.zvv-metric {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(167, 139, 250, 0.12);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zvv-metric i {
    font-size: 1rem;
    color: rgba(167, 139, 250, 0.6);
}

.zvv-metric span {
    font-size: 0.7rem;
    color: rgba(196, 181, 253, 0.5);
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.zvv-metric strong {
    font-family: 'Sora', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

/* ── Asset Panel ── */
.zvv-asset-panel {
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 4px 24px rgba(124, 58, 237, 0.07);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zvv-asset-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.zvv-asset-name {
    font-family: 'Sora', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--zvv-ink, #1a0f4a);
    margin: 4px 0 0;
}

.zvv-asset-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.zvv-asset-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1rem;
}

.zvv-asset-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--zvv-line, #f0edff);
    font-size: 0.86rem;
}

.zvv-asset-row:last-child { border-bottom: none; }
.zvv-asset-row span { color: var(--zvv-muted, #6b7280); }
.zvv-asset-row strong { font-weight: 700; color: var(--zvv-ink, #1a0f4a); }

.zvv-progress-track {
    height: 6px;
    background: var(--zvv-line, #ede9fe);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}

.zvv-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #4f46e5);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.zvv-asset-note {
    font-size: 0.75rem;
    color: var(--zvv-muted, #9ca3af);
    margin-bottom: 1rem;
}

.zvv-asset-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zvv-btn-asset-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: transparent;
    color: #7c3aed;
    border: 1.5px solid rgba(124, 58, 237, 0.4);
    border-radius: 999px;
    padding: 11px 26px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.zvv-btn-asset-outline:hover {
    background: rgba(124, 58, 237, 0.07);
    border-color: #7c3aed;
    color: #5b21b6;
}

[data-bs-theme="dark"] .zvv-btn-asset-outline {
    color: #bd93f9;
    border-color: rgba(196, 181, 253, 0.35);
}

[data-bs-theme="dark"] .zvv-btn-asset-outline:hover {
    background: rgba(167, 139, 250, 0.1);
    border-color: #bd93f9;
    color: #e2d9fa;
}

/* ── Feature Strip ── */
.zvv-feature-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.zvv-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 18px;
    padding: 1.2rem;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.05);
}

.zvv-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(79, 70, 229, 0.1));
    border: 1px solid rgba(124, 58, 237, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #7c3aed;
}

.zvv-feature-item strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--zvv-ink, #1a0f4a);
    margin-bottom: 4px;
}

.zvv-feature-item span {
    font-size: 0.78rem;
    color: var(--zvv-muted, #6b7280);
    line-height: 1.5;
}

/* ── Crypto Panel ── */
.zvv-crypto-panel {
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 16px rgba(124, 58, 237, 0.05);
}

.zvv-crypto-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.zvv-crypto-panel-head p {
    font-size: 0.83rem;
    color: var(--zvv-muted, #6b7280);
    margin: 4px 0 0;
}

.zvv-research-stamp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.04em;
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 999px;
    padding: 5px 12px;
    white-space: nowrap;
}

.zvv-crypto-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zvv-crypto-row {
    display: grid;
    grid-template-columns: 200px 1fr 60px 80px;
    align-items: center;
    gap: 1rem;
    padding: 12px 0;
    border-bottom: 1px solid var(--zvv-line, #f0edff);
}

.zvv-crypto-row:last-child { border-bottom: none; }

.zvv-crypto-asset {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zvv-crypto-symbol {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    border-radius: 8px;
    padding: 4px 8px;
    min-width: 46px;
    text-align: center;
}

.zvv-crypto-asset strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--zvv-ink, #1a0f4a);
    line-height: 1.2;
}

.zvv-crypto-asset small {
    font-size: 0.74rem;
    color: var(--zvv-muted, #9ca3af);
}

.zvv-crypto-bar-track {
    height: 6px;
    background: var(--zvv-line, #ede9fe);
    border-radius: 999px;
    overflow: hidden;
}

.zvv-crypto-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #4f46e5);
    border-radius: 999px;
}

.zvv-crypto-grade {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #7c3aed;
    text-align: center;
}

.zvv-crypto-risk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    border-radius: 999px;
    padding: 3px 10px;
    text-align: center;
}

.zvv-crypto-risk.medium  { background: rgba(245, 158, 11, 0.1);  color: #d97706; }
.zvv-crypto-risk.high    { background: rgba(239, 68, 68, 0.1);   color: #dc2626; }
.zvv-crypto-risk.platform { background: rgba(124, 58, 237, 0.1); color: #7c3aed; }

/* ── Transactions Layout ── */
.zvv-tx-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.25rem;
    align-items: start;
}

/* ── Pending Panel ── */
.zvv-pending-panel {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 20px;
    padding: 1.4rem;
    margin-bottom: 1.25rem;
}

.zvv-pending-head { margin-bottom: 1rem; }
.zvv-pending-head h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--zvv-ink, #1a0f4a);
    margin: 4px 0 0;
}

.zvv-pending-list { display: flex; flex-direction: column; gap: 10px; }

.zvv-pending-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--zvv-panel, #fff);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 14px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.zvv-pending-info strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--zvv-ink, #1a0f4a);
    margin-bottom: 3px;
}

.zvv-pending-info span {
    font-size: 0.78rem;
    color: var(--zvv-muted, #6b7280);
}

.zvv-pending-info code {
    font-size: 0.72rem;
    color: #7c3aed;
}

.zvv-pending-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.zvv-btn-approve,
.zvv-btn-deny {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    border: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: all 0.18s;
}

.zvv-btn-approve {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    box-shadow: 0 3px 12px rgba(5, 150, 105, 0.3);
}

.zvv-btn-approve:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(5, 150, 105, 0.45);
}

.zvv-btn-deny {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border: 1.5px solid rgba(239, 68, 68, 0.25);
}

.zvv-btn-deny:hover {
    background: rgba(239, 68, 68, 0.14);
}

/* ── Transaction Panel ── */
.zvv-tx-panel {
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(124, 58, 237, 0.05);
}

.zvv-tx-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--zvv-line, #f0edff);
}

.zvv-tx-count {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
    border-radius: 999px;
    padding: 3px 10px;
    border: 1px solid rgba(124, 58, 237, 0.18);
}

.zvv-tx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.zvv-tx-table thead th {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--zvv-muted, #9ca3af);
    padding: 10px 16px;
    border-bottom: 1px solid var(--zvv-line, #f0edff);
    white-space: nowrap;
    background: transparent;
}

.zvv-tx-table tbody tr {
    border-bottom: 1px solid var(--zvv-line, #f8f7ff);
    transition: background 0.15s;
}

.zvv-tx-table tbody tr:last-child { border-bottom: none; }

.zvv-tx-table tbody tr:hover { background: rgba(124, 58, 237, 0.025); }

.zvv-tx-table td {
    padding: 12px 16px;
    vertical-align: middle;
}

.zvv-tx-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zvv-tx-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.zvv-tx-icon.credit {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.zvv-tx-icon.debit {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.18);
}

.zvv-tx-ref {
    display: block;
    font-size: 0.76rem;
    color: #7c3aed;
    background: none;
}

.zvv-tx-desc {
    font-size: 0.76rem;
    color: var(--zvv-muted, #9ca3af);
    margin-top: 1px;
}

.zvv-tx-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    border-radius: 999px;
    padding: 3px 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.zvv-tx-badge.credit { background: rgba(16, 185, 129, 0.1); color: #059669; }
.zvv-tx-badge.debit  { background: rgba(245, 158, 11, 0.1); color: #d97706; }

.zvv-tx-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--zvv-muted, #9ca3af);
    background: var(--zvv-line, #f3f4f6);
    border-radius: 999px;
    padding: 3px 9px;
}

.zvv-tx-date { font-size: 0.76rem; color: var(--zvv-muted, #9ca3af); white-space: nowrap; }

.zvv-tx-amount {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}

.zvv-tx-amount.credit { color: #059669; }
.zvv-tx-amount.debit  { color: #dc2626; }
.zvv-tx-amount span   { font-size: 0.72em; opacity: 0.7; margin-left: 2px; }

/* ── QR Panel ── */
.zvv-qr-panel {
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 18px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    text-align: center;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.05);
}

.zvv-qr-panel h3 {
    font-family: 'Sora', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--zvv-ink, #1a0f4a);
    margin: 4px 0 1rem;
}

.zvv-qr-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    width: 100px;
    height: 100px;
    margin: 0 auto 1rem;
}

.zvv-qr-box span {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.4), rgba(79, 70, 229, 0.35));
    border-radius: 8px;
}

.zvv-qr-box.zvv-qr-box-lg {
    width: 140px;
    height: 140px;
}

.zvv-address-mini {
    font-size: 0.68rem;
    color: var(--zvv-muted, #9ca3af);
    font-family: monospace;
    word-break: break-all;
    margin-bottom: 1rem;
    padding: 8px 12px;
    background: var(--zvv-line, #f8f7ff);
    border-radius: 10px;
}

/* ── Security Panel ── */
.zvv-security-panel {
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.05);
}

.zvv-security-panel h3 {
    font-family: 'Sora', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--zvv-ink, #1a0f4a);
    margin: 4px 0 1rem;
}

.zvv-security-list { display: flex; flex-direction: column; gap: 4px; }

.zvv-security-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--zvv-line, #f0edff);
    font-size: 0.83rem;
    color: var(--zvv-ink, #374151);
}

.zvv-security-item:last-child { border-bottom: none; }

.zvv-security-item i {
    color: #7c3aed;
    font-size: 1rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

/* ── Modals ── */
.zvv-modal {
    background: linear-gradient(160deg, #1a0f4a 0%, #2e1065 100%);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 24px;
    overflow: hidden;
}

.zvv-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.4rem 1.5rem 1rem;
}

.zvv-modal-head h2.modal-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    margin: 4px 0 0;
}

.zvv-modal-close { filter: invert(1) opacity(0.6); }
.zvv-modal-close:hover { filter: invert(1) opacity(1); }

.zvv-modal-body {
    padding: 0 1.5rem 1.25rem;
}

.zvv-form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(196, 181, 253, 0.6);
    margin-bottom: 6px;
}

.zvv-form-optional {
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(196, 181, 253, 0.4);
}

.zvv-form-control {
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(167, 139, 250, 0.2);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.9rem;
    color: #fff;
    outline: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: border-color 0.18s;
}

.zvv-form-control::placeholder { color: rgba(196, 181, 253, 0.35); }
.zvv-form-control:focus { border-color: rgba(167, 139, 250, 0.5); background: rgba(255, 255, 255, 0.1); }
.zvv-form-control:disabled { opacity: 0.5; cursor: not-allowed; }

.zvv-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 1rem 1.5rem 1.4rem;
    border-top: 1px solid rgba(167, 139, 250, 0.12);
}

.zvv-modal-note {
    font-size: 0.78rem;
    color: rgba(196, 181, 253, 0.45);
    margin-top: 1rem;
    margin-bottom: 0;
    text-align: center;
}

/* ── Dashboard Dark Mode Overrides ── */
[data-bs-theme="dark"] .zvv-dash-body { background: #13141f; }
[data-bs-theme="dark"] .zvv-dash-main.app-main { background: #13141f; }
[data-bs-theme="dark"] .zvv-dash-sidebar { background: #1e1f2e; border-right-color: #44475a; }
[data-bs-theme="dark"] .zvv-dash-nav a { color: #6272a4; }
[data-bs-theme="dark"] .zvv-dash-nav a:hover { background: rgba(189,147,249,0.08); color: #bd93f9; }
[data-bs-theme="dark"] .zvv-dash-nav a.active { background: rgba(189,147,249,0.14); color: #bd93f9; }
[data-bs-theme="dark"] .zvv-asset-panel { background: rgba(189,147,249,0.04); border-color: rgba(189,147,249,0.14); }
[data-bs-theme="dark"] .zvv-asset-name,
[data-bs-theme="dark"] .zvv-asset-row strong { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-feature-item { background: rgba(189,147,249,0.04); border-color: rgba(189,147,249,0.14); }
[data-bs-theme="dark"] .zvv-feature-item strong { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-crypto-panel { background: rgba(189,147,249,0.04); border-color: rgba(189,147,249,0.14); }
[data-bs-theme="dark"] .zvv-crypto-asset strong { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-tx-panel { background: rgba(189,147,249,0.04); border-color: rgba(189,147,249,0.14); }
[data-bs-theme="dark"] .zvv-tx-table tbody tr:hover { background: rgba(124,58,237,0.05); }
[data-bs-theme="dark"] .zvv-tx-table thead th { color: rgba(189,147,249,0.55); }
[data-bs-theme="dark"] .zvv-tx-table tr { border-bottom-color: rgba(189,147,249,0.08); }
[data-bs-theme="dark"] .zvv-qr-panel,
[data-bs-theme="dark"] .zvv-security-panel { background: rgba(189,147,249,0.04); border-color: rgba(189,147,249,0.14); }
[data-bs-theme="dark"] .zvv-qr-panel h3,
[data-bs-theme="dark"] .zvv-security-panel h3 { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-security-item { color: rgba(189,147,249,0.8); border-bottom-color: rgba(189,147,249,0.08); }
[data-bs-theme="dark"] .zvv-address-row.compact { background: rgba(189,147,249,0.07); border-color: rgba(189,147,249,0.18); }
[data-bs-theme="dark"] .zvv-address-row.compact code { color: rgba(189,147,249,0.9); }
[data-bs-theme="dark"] .zvv-dash-heading { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-pending-panel { background: rgba(245,158,11,0.04); }
[data-bs-theme="dark"] .zvv-pending-item { background: rgba(189,147,249,0.04); }
[data-bs-theme="dark"] .zvv-pending-head h3,
[data-bs-theme="dark"] .zvv-pending-info strong { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-address-mini { background: rgba(189,147,249,0.07); }

/* ── Dashboard Responsive ── */
@media (max-width: 1200px) {
    .zvv-crypto-row { grid-template-columns: 160px 1fr 50px 70px; }
}

@media (max-width: 1024px) {
    .zvv-balance-grid { grid-template-columns: 1fr; }
    .zvv-tx-layout { grid-template-columns: 1fr; }
    .zvv-tx-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .zvv-feature-strip { grid-template-columns: 1fr; }
    .zvv-crypto-row { grid-template-columns: 140px 1fr 50px 70px; }
}

@media (max-width: 768px) {
    .zvv-dash-main.app-main { padding: 1.25rem; }
    .zvv-dash-header { flex-direction: column; align-items: flex-start; }
    .zvv-balance-metrics { grid-template-columns: 1fr 1fr; }
    .zvv-tx-sidebar { grid-template-columns: 1fr; }
    .zvv-crypto-row { grid-template-columns: 1fr auto; gap: 8px; }
    .zvv-crypto-bar-track,
    .zvv-crypto-grade { display: none; }
    .zvv-balance-amount { font-size: 2rem; }
}

@media (max-width: 480px) {
    .zvv-balance-metrics { grid-template-columns: 1fr; }
    .zvv-tx-table thead { display: none; }
    .zvv-tx-table td:not(:first-child):not(:last-child) { display: none; }
    .zvv-tx-table td { padding: 10px 12px; }
    .zvv-reward-banner { flex-wrap: wrap; }
}

/* ============================================================
   UNIFIED NAV — shared styles for public + admin contexts
   ============================================================ */

/* The admin badge inside the brand "ADMIN Desk" label */
.zvv-nav-admin-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    border-radius: 5px;
    padding: 2px 5px;
    vertical-align: middle;
    font-family: 'Space Grotesk', sans-serif;
    margin-right: 2px;
}

/* Admin full-width subbar — second row, only on admin pages */
/* Force the main row's container-fluid to 100% so the subbar wraps below */
.zvv-admin-nav {
    flex-wrap: wrap !important;
    align-items: stretch;
}

.zvv-admin-nav > .container-fluid {
    flex: 0 0 100%;
    max-width: 100%;
}

.zvv-admin-subbar {
    flex: 0 0 100%;
    max-width: 100%;
    background: linear-gradient(90deg, rgba(124,58,237,0.08) 0%, rgba(79,70,229,0.06) 100%);
    border-top: 1px solid rgba(124, 58, 237, 0.12);
    padding: 0;
}

.zvv-admin-subbar > .container-fluid {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.zvv-admin-subbar > .container-fluid::-webkit-scrollbar { display: none; }

.zvv-admin-subbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--zvv-muted, #6b7280);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.zvv-admin-subbar-link i { font-size: 0.82rem; }

.zvv-admin-subbar-link:hover {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.06);
}

.zvv-admin-subbar-link.active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
    background: rgba(124, 58, 237, 0.06);
    font-weight: 700;
}

/* Dark mode subbar */
[data-bs-theme="dark"] .zvv-admin-subbar {
    background: rgba(124,58,237,0.07);
    border-top-color: rgba(189,147,249,0.18);
}

[data-bs-theme="dark"] .zvv-admin-subbar-link { color: rgba(189,147,249,0.65); }
[data-bs-theme="dark"] .zvv-admin-subbar-link:hover { color: #bd93f9; background: rgba(189,147,249,0.08); }
[data-bs-theme="dark"] .zvv-admin-subbar-link.active { color: #bd93f9; border-bottom-color: #bd93f9; background: rgba(189,147,249,0.08); }

/* ============================================================
   SINGLE POST PAGE  (zvv-post-*)
   ============================================================ */

.zvv-post-page {
    background: var(--zvv-bg, #f4f1ff);
}

/* ── Hero Header ── */
.zvv-draft-banner {
    background: #fefce8;
    border-bottom: 2px solid #fde047;
}

.zvv-draft-banner-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.88rem;
    color: #713f12;
    flex-wrap: wrap;
}

.zvv-draft-banner-inner > i { font-size: 1.1rem; color: #ca8a04; flex-shrink: 0; }

.zvv-draft-banner-inner span { flex: 1; min-width: 0; }

.zvv-draft-publish-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #ca8a04;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.zvv-draft-publish-btn:hover { background: #a16207; color: #fff; }

/* Owner preview: violet/indigo flavour */
.zvv-draft-banner.zvv-draft-banner-owner {
    background: #f0eeff;
    border-bottom-color: #7c3aed;
}
.zvv-draft-banner.zvv-draft-banner-owner .zvv-draft-banner-inner { color: #3730a3; }
.zvv-draft-banner.zvv-draft-banner-owner .zvv-draft-banner-inner > i { color: #7c3aed; }
.zvv-draft-banner.zvv-draft-banner-owner .zvv-draft-publish-btn {
    background: #7c3aed;
}
.zvv-draft-banner.zvv-draft-banner-owner .zvv-draft-publish-btn:hover { background: #6d28d9; }

[data-bs-theme="dark"] .zvv-draft-banner { background: #2d2e1a; border-color: #713f12; }
[data-bs-theme="dark"] .zvv-draft-banner-inner { color: #fde68a; }
[data-bs-theme="dark"] .zvv-draft-banner-inner > i { color: #fbbf24; }
[data-bs-theme="dark"] .zvv-draft-banner.zvv-draft-banner-owner { background: #1e1f35; border-bottom-color: #7c3aed; }
[data-bs-theme="dark"] .zvv-draft-banner.zvv-draft-banner-owner .zvv-draft-banner-inner { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-draft-banner.zvv-draft-banner-owner .zvv-draft-banner-inner > i { color: #bd93f9; }

/* ── Reading progress bar ── */
.zvv-read-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #7c3aed, #ff79c6);
    z-index: 9999;
    transition: width .1s linear;
    border-radius: 0 2px 2px 0;
    pointer-events: none;
}
[data-bs-theme="dark"] .zvv-read-progress {
    background: linear-gradient(90deg, #bd93f9, #ff79c6);
}

.zvv-post-hero {
    position: relative;
    background: linear-gradient(150deg, #0f0a2e 0%, #1a0f4a 42%, #2e1065 100%);
    overflow: hidden;
    padding: 3.5rem 0 3rem;
}

.zvv-post-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.12;
    filter: blur(2px);
    transform: scale(1.05);
}

.zvv-post-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 15% 40%, rgba(124, 58, 237, 0.4) 0%, transparent 65%),
        radial-gradient(ellipse 50% 50% at 80% 70%, rgba(79, 70, 229, 0.25) 0%, transparent 65%);
}

.zvv-post-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

/* Breadcrumb */
.zvv-post-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: rgba(196, 181, 253, 0.55);
    margin-bottom: 1.25rem;
    font-family: 'Space Grotesk', sans-serif;
}

.zvv-post-breadcrumb a {
    color: rgba(196, 181, 253, 0.65);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s;
}

.zvv-post-breadcrumb a:hover { color: #bd93f9; }
.zvv-post-breadcrumb i { font-size: 0.7rem; color: rgba(196, 181, 253, 0.3); }

/* Category tag in hero */
.zvv-post-cat-tag {
    color: #bd93f9 !important;
    background: rgba(167, 139, 250, 0.12) !important;
    border-color: rgba(167, 139, 250, 0.25) !important;
    margin-bottom: 1rem;
}

.zvv-post-cat-tag:hover { color: #fff !important; }

/* Site name kicker, shown above the post title */
.zvv-post-site-eyebrow {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(196, 181, 253, 0.65);
    margin: 0 0 0.5rem;
}

/* Title */
.zvv-post-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 1rem;
}

/* Excerpt / lead */
.zvv-post-lead {
    font-size: 1.05rem;
    color: rgba(196, 181, 253, 0.7);
    line-height: 1.65;
    max-width: 640px;
    margin-bottom: 1.5rem;
}

/* Meta row */
.zvv-post-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    font-size: 0.82rem;
    color: rgba(196, 181, 253, 0.6);
}

.zvv-post-author-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #e2d9fa;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}

.zvv-post-author-chip:hover { color: #bd93f9; }

.zvv-post-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(167, 139, 250, 0.4);
    object-fit: cover;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.zvv-post-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.zvv-post-meta-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(167, 139, 250, 0.35);
    flex-shrink: 0;
}

.zvv-post-rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.zvv-post-rating-chip i { color: #fbbf24; }
.zvv-post-rating-chip small { color: rgba(196, 181, 253, 0.45); }

/* Hero action bar */
.zvv-post-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.zvv-btn-ghost-light {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #e2d9fa;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s;
}

.zvv-btn-ghost-light:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ── Post body wrap ── */
.zvv-post-wrap {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

.zvv-post-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2.5rem;
    align-items: start;
}

.zvv-post-article { min-width: 0; }

/* ── Featured image ── */
.zvv-post-hero-img {
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 2.5rem;
    box-shadow: 0 8px 40px rgba(124, 58, 237, 0.12);
}

.zvv-post-hero-img img {
    width: 100%;
    display: block;
    max-height: 480px;
    object-fit: cover;
}

/* ── Article body prose ── */
.zvv-post-body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    --zvv-reader-scale: 1;
    font-size: calc(1.05rem * var(--zvv-reader-scale, 1));
    line-height: 1.8;
    color: var(--zvv-ink, #1a1a2e);
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 20px;
    padding: 2.5rem 2.5rem 2rem;
    box-shadow: 0 2px 16px rgba(124, 58, 237, 0.05);
    margin-bottom: 1.5rem;
}

/* Headings inside post body */
.zvv-post-body h1,
.zvv-post-body h2,
.zvv-post-body h3,
.zvv-post-body h4,
.zvv-post-body h5,
.zvv-post-body h6 {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    color: var(--zvv-ink, #1a0f4a);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.zvv-post-body h1 { font-size: calc(1.8rem * var(--zvv-reader-scale, 1)); }
.zvv-post-body h2 {
    font-size: calc(1.4rem * var(--zvv-reader-scale, 1));
    padding-bottom: 0.5rem;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, #7c3aed, transparent) 1;
}
.zvv-post-body h3 { font-size: calc(1.15rem * var(--zvv-reader-scale, 1)); color: #7c3aed; }
.zvv-post-body h4 { font-size: calc(1rem * var(--zvv-reader-scale, 1)); }

/* Paragraphs and spacing */
.zvv-post-body p { margin-bottom: 1.35rem; }

/* Links */
.zvv-post-body a {
    color: #7c3aed;
    text-decoration: underline;
    text-decoration-color: rgba(124, 58, 237, 0.35);
    text-underline-offset: 3px;
    transition: all 0.15s;
}

.zvv-post-body a:hover {
    color: #5b21b6;
    text-decoration-color: #7c3aed;
}

/* Blockquotes */
.zvv-post-body blockquote {
    border-left: 4px solid #7c3aed;
    background: rgba(124, 58, 237, 0.05);
    border-radius: 0 12px 12px 0;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--zvv-muted, #4b5563);
}

.zvv-post-body blockquote p:last-child { margin-bottom: 0; }

/* Images */
.zvv-post-body img {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.1);
    margin: 1rem 0;
}

/* Code */
.zvv-post-body code {
    font-size: 0.875em;
    background: rgba(124, 58, 237, 0.07);
    color: #7c3aed;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid rgba(124, 58, 237, 0.15);
}

.zvv-post-body pre {
    background: #1a0f4a;
    color: #e2d9fa;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    font-size: calc(0.9rem * var(--zvv-reader-scale, 1));
    line-height: 1.65;
    box-shadow: 0 4px 20px rgba(15, 10, 46, 0.2);
}

.zvv-post-body pre code {
    background: none;
    color: inherit;
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: 1em;
}

/* Tables */
.zvv-post-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: calc(0.92rem * var(--zvv-reader-scale, 1));
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(124, 58, 237, 0.06);
}

.zvv-post-body th {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    padding: 10px 16px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: calc(0.78rem * var(--zvv-reader-scale, 1));
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
}

.zvv-post-body td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--zvv-line, #f0edff);
    color: var(--zvv-ink);
}

.zvv-post-body tr:last-child td { border-bottom: none; }
.zvv-post-body tr:nth-child(even) td { background: rgba(124, 58, 237, 0.025); }

/* Lists */
.zvv-post-body ul,
.zvv-post-body ol { padding-left: 1.5rem; margin-bottom: 1.35rem; }

.zvv-post-body li { margin-bottom: 0.4rem; }

.zvv-post-body ul li::marker { color: #7c3aed; }
.zvv-post-body ol li::marker { color: #7c3aed; font-weight: 700; }

/* Horizontal rule */
.zvv-post-body hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, #7c3aed, #4f46e5, transparent);
    margin: 2rem 0;
    border-radius: 999px;
}

/* ── Post Footer ── */
.zvv-post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--zvv-line, #e9e6ff);
    border-bottom: 1px solid var(--zvv-line, #e9e6ff);
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

/* ── Prev / Next Post Navigation ── */
.zvv-post-adjacent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 2.5rem 0 0;
    border-top: 1px solid var(--zvv-line);
    padding-top: 2rem;
}

.zvv-adjacent-empty { display: block; }

.zvv-adjacent-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--zvv-line);
    border-radius: 14px;
    background: var(--zvv-panel);
    text-decoration: none;
    color: var(--zvv-ink);
    transition: border-color .18s, box-shadow .18s, transform .15s;
    min-width: 0;
}

.zvv-adjacent-item:hover {
    border-color: #7c3aed;
    box-shadow: 0 4px 18px rgba(124,58,237,.1);
    transform: translateY(-2px);
    color: var(--zvv-ink);
}

.zvv-adjacent-next { justify-content: flex-end; }

.zvv-adjacent-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
}

.zvv-adjacent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.zvv-adjacent-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.zvv-adjacent-body-right { text-align: right; }

.zvv-adjacent-dir {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7c3aed;
}

.zvv-adjacent-title {
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zvv-adjacent-cat {
    font-size: .72rem;
    color: var(--zvv-muted);
}

@media (max-width: 600px) {
    .zvv-post-adjacent { grid-template-columns: 1fr; }
    .zvv-adjacent-next { justify-content: flex-start; }
    .zvv-adjacent-body-right { text-align: left; }
}

[data-bs-theme="dark"] .zvv-adjacent-item {
    background: var(--zvv-panel);
    border-color: var(--zvv-line);
}

[data-bs-theme="dark"] .zvv-adjacent-item:hover {
    border-color: #bd93f9;
    box-shadow: 0 4px 18px rgba(189,147,249,.12);
}

[data-bs-theme="dark"] .zvv-adjacent-dir { color: #bd93f9; }

[data-bs-theme="dark"] .zvv-adjacent-thumb {
    background: linear-gradient(135deg, #5b21b6, #3730a3);
}

/* ── Related Posts ── */
.zvv-related {
    margin: 2.5rem 0 0;
    border-top: 1px solid var(--zvv-line);
    padding-top: 2rem;
}

.zvv-related-head {
    margin-bottom: 1.5rem;
}

.zvv-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 560px) {
    .zvv-related-grid { grid-template-columns: 1fr; }
}

.zvv-related-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--zvv-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--zvv-panel);
    text-decoration: none;
    color: var(--zvv-ink);
    transition: border-color .18s, box-shadow .18s, transform .15s;
}

.zvv-related-card:hover {
    border-color: #7c3aed;
    box-shadow: 0 6px 22px rgba(124,58,237,.1);
    transform: translateY(-3px);
    color: var(--zvv-ink);
}

.zvv-related-art {
    width: 100%;
    height: 130px;
    overflow: hidden;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zvv-related-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}

.zvv-related-card:hover .zvv-related-art img { transform: scale(1.04); }

.zvv-related-initial {
    font-size: 2rem;
    font-weight: 800;
    color: rgba(255,255,255,.85);
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -.02em;
}

.zvv-related-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.zvv-related-cat {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #7c3aed;
}

.zvv-related-title {
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.38;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.zvv-related-card:hover .zvv-related-title { color: #7c3aed; }

.zvv-related-by {
    font-size: .75rem;
    color: var(--zvv-muted);
    margin-top: auto;
}

[data-bs-theme="dark"] .zvv-related-card {
    background: var(--zvv-panel);
    border-color: var(--zvv-line);
}

[data-bs-theme="dark"] .zvv-related-card:hover {
    border-color: #bd93f9;
    box-shadow: 0 6px 22px rgba(189,147,249,.12);
}

[data-bs-theme="dark"] .zvv-related-cat { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-related-card:hover .zvv-related-title { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-related-art { background: linear-gradient(135deg, #5b21b6, #3730a3); }

/* ── Discussion Section ── */
.zvv-discussion {
    padding-top: 1rem;
}

.zvv-discussion-success {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 1.25rem;
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #15803d;
    font-size: 0.88rem;
    font-weight: 600;
}

.zvv-discussion-success i { font-size: 1rem; flex-shrink: 0; color: #16a34a; }

[data-bs-theme="dark"] .zvv-discussion-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.25);
    color: #86efac;
}

[data-bs-theme="dark"] .zvv-discussion-success i { color: #4ade80; }

.zvv-discussion-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, #7c3aed, #4f46e5, transparent) 1;
    flex-wrap: wrap;
}

.zvv-rating-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.zvv-rating-score {
    font-family: 'Sora', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--zvv-ink, #1a0f4a);
    line-height: 1;
}

.zvv-rating-stars {
    display: flex;
    gap: 2px;
    font-size: 1rem;
    color: #fbbf24;
}

.zvv-rating-summary small { color: var(--zvv-muted, #9ca3af); font-size: 0.78rem; }

/* Rating form */
.zvv-rating-form {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 16px;
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.04);
}

.zvv-form-label-inline {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--zvv-muted, #9ca3af);
    margin: 0;
    flex-shrink: 0;
}

/* Star input — reversed order trick */
.zvv-star-input {
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.zvv-star-input input[type="radio"] { display: none; }

.zvv-star-input label {
    font-size: 1.5rem;
    color: var(--zvv-line, #d1d5db);
    cursor: pointer;
    transition: color 0.12s, transform 0.12s;
    line-height: 1;
}

.zvv-star-input label i { pointer-events: none; }

/* Hover: colour this star and all after (i.e. higher-value stars) */
.zvv-star-input label:hover,
.zvv-star-input label:hover ~ label { color: #fbbf24; }

/* Checked: colour this star and all after */
.zvv-star-input input:checked ~ label { color: #fbbf24; }

.zvv-star-input label:hover { transform: scale(1.15); }

/* Comment form */
.zvv-comment-form {
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.04);
}

.zvv-form-label-block {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--zvv-muted, #9ca3af);
    margin-bottom: 8px;
}

.zvv-textarea {
    width: 100%;
    background: var(--zvv-bg, #f8f7ff);
    border: 1.5px solid var(--zvv-line, #e5e1ff);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--zvv-ink, #1a0f4a);
    resize: vertical;
    outline: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: border-color 0.18s;
}

.zvv-textarea:focus { border-color: #7c3aed; }
.zvv-textarea::placeholder { color: var(--zvv-muted, #9ca3af); }

.zvv-captcha-row {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 12px;
    flex-wrap: wrap;
}

/* Image + refresh button */
.zvv-captcha-img-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.zvv-captcha-img {
    display: block;
    width: 160px;
    height: 52px;
    border-radius: 8px;
    border: 1.5px solid rgba(124, 58, 237, 0.18);
    background: #f8f6ff;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}

.zvv-captcha-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid rgba(124, 58, 237, 0.2);
    background: transparent;
    color: #7c3aed;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.15s;
    flex-shrink: 0;
}

.zvv-captcha-refresh:hover {
    background: rgba(124, 58, 237, 0.08);
    color: #5b21b6;
}

.zvv-captcha-refresh:active { transform: rotate(90deg); }

/* Text input */
.zvv-captcha-input-wrap { flex: 1; min-width: 140px; }

.zvv-captcha-input {
    width: 100%;
    border: 1.5px solid var(--zvv-line, #e5e1ff);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 1rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--zvv-ink, #1a0f4a);
    background: var(--zvv-panel, #fff);
    outline: none;
    transition: border-color 0.18s;
}

.zvv-captcha-input:focus { border-color: #7c3aed; }
.zvv-captcha-input::placeholder { letter-spacing: 0; text-transform: none; font-weight: 400; }

.zvv-captcha-input-error { border-color: #ef4444 !important; background: rgba(239,68,68,0.04) !important; }

.zvv-captcha-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #dc2626;
    font-size: 0.8rem;
    font-weight: 500;
}

.zvv-captcha-error i { font-size: 0.85rem; flex-shrink: 0; }

[data-bs-theme="dark"] .zvv-captcha-error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* Member gate */
.zvv-member-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.05);
}

.zvv-member-gate-icon {
    font-size: 2.5rem;
    color: rgba(124, 58, 237, 0.3);
    margin-bottom: 1rem;
}

.zvv-member-gate strong {
    font-family: 'Sora', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--zvv-ink, #1a0f4a);
    display: block;
    margin-bottom: 6px;
}

.zvv-member-gate span {
    font-size: 0.88rem;
    color: var(--zvv-muted, #6b7280);
}

/* Comment list */
.zvv-comment-list { margin-top: 2rem; }

.zvv-comment-list-head {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--zvv-muted, #9ca3af);
    margin-bottom: 1.25rem;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--zvv-line, #f0edff);
}

.zvv-comment {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--zvv-line, #f0edff);
}

.zvv-comment:last-child { border-bottom: none; }

.zvv-avatar-md {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    border: 2px solid var(--zvv-line, #e9e6ff);
    flex-shrink: 0;
    overflow: hidden;
}

.zvv-avatar-md img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.zvv-comment-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.zvv-comment-meta a {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--zvv-ink);
    text-decoration: none;
}

.zvv-comment-meta a:hover { color: #7c3aed; }

.zvv-comment-meta span {
    font-size: 0.75rem;
    color: var(--zvv-muted, #9ca3af);
}

.zvv-comment-body p {
    font-size: 0.92rem;
    color: var(--zvv-ink, #374151);
    line-height: 1.65;
    margin: 0;
}

/* ── Comment reply indent ── */
.zvv-comment-reply {
    margin-left: 52px;
    background: rgba(124,58,237,.03);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    border-bottom: none !important;
    margin-bottom: 4px;
}

/* ── Comment action bar (votes + reply) ── */
.zvv-comment-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.zvv-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--zvv-line);
    border-radius: 999px;
    background: none;
    font-size: .78rem;
    font-weight: 600;
    color: var(--zvv-muted);
    cursor: pointer;
    transition: all .15s;
    line-height: 1;
}

.zvv-vote-btn:hover { border-color: currentColor; }

.zvv-vote-like:hover,
.zvv-vote-like.active  { color: #7c3aed; border-color: rgba(124,58,237,.35); background: rgba(124,58,237,.06); }
.zvv-vote-dislike:hover,
.zvv-vote-dislike.active { color: #dc2626; border-color: rgba(220,38,38,.3); background: rgba(220,38,38,.05); }

.zvv-vote-btn .zvv-vote-count { min-width: 1ch; }

.zvv-vote-static {
    font-size: .78rem;
    color: var(--zvv-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.zvv-reply-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: none;
    background: none;
    font-size: .78rem;
    font-weight: 600;
    color: var(--zvv-muted);
    cursor: pointer;
    border-radius: 999px;
    transition: all .15s;
}

.zvv-reply-toggle:hover { color: #7c3aed; background: rgba(124,58,237,.06); }
.zvv-reply-toggle.open  { color: #7c3aed; }

/* ── Inline reply form ── */
.zvv-reply-form-wrap {
    margin-top: 10px;
}

.zvv-reply-textarea {
    font-size: .85rem;
    resize: vertical;
    min-height: 72px;
}

.zvv-reply-form-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* dark mode vote/reply */
[data-bs-theme="dark"] .zvv-vote-btn {
    border-color: var(--zvv-line);
    color: var(--zvv-muted);
}

[data-bs-theme="dark"] .zvv-vote-like:hover,
[data-bs-theme="dark"] .zvv-vote-like.active  { color: #bd93f9; border-color: rgba(189,147,249,.35); background: rgba(189,147,249,.07); }
[data-bs-theme="dark"] .zvv-vote-dislike:hover,
[data-bs-theme="dark"] .zvv-vote-dislike.active { color: #ff5555; border-color: rgba(255,85,85,.3); background: rgba(255,85,85,.06); }

[data-bs-theme="dark"] .zvv-reply-toggle:hover { color: #bd93f9; background: rgba(189,147,249,.07); }
[data-bs-theme="dark"] .zvv-reply-toggle.open  { color: #bd93f9; }

[data-bs-theme="dark"] .zvv-comment-reply { background: rgba(189,147,249,.04); }

[data-bs-theme="dark"] .zvv-comment-meta a { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-comment-body p { color: rgba(248,248,242,.85); }
[data-bs-theme="dark"] .zvv-comment { border-bottom-color: rgba(189,147,249,0.1); }

/* ── Admin delete comment button ── */
.zvv-admin-comment-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border: 1px solid rgba(220,38,38,.3);
    border-radius: 999px;
    background: none;
    color: #dc2626;
    font-size: .78rem;
    cursor: pointer;
    transition: all .15s;
    line-height: 1;
}
.zvv-admin-comment-delete-btn:hover { background: rgba(220,38,38,.08); border-color: #dc2626; }
[data-bs-theme="dark"] .zvv-admin-comment-delete-btn { color: #ff5555; border-color: rgba(255,85,85,.3); }
[data-bs-theme="dark"] .zvv-admin-comment-delete-btn:hover { background: rgba(255,85,85,.08); }

/* ── Comment reactions ── */
.zvv-comment-reactions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    position: relative;
}

/* ── Summary pill: top emojis + total count (Facebook-style) ── */
.zvv-reaction-summary {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--zvv-card-bg, #fff);
    border: 1px solid var(--zvv-line);
    border-radius: 999px;
    padding: 3px 9px 3px 5px;
    cursor: default;
    user-select: none;
    transition: border-color .15s;
}
.zvv-reaction-summary-emojis {
    display: inline-flex;
    align-items: center;
}
.zvv-reaction-emoji-sm {
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    margin-right: -3px; /* slight overlap like Facebook */
    filter: drop-shadow(0 0 1px rgba(0,0,0,.15));
}
.zvv-reaction-emoji-sm:last-child { margin-right: 0; }
.zvv-reaction-summary-count {
    font-size: .75rem;
    font-weight: 700;
    color: var(--zvv-muted);
    margin-left: 5px;
    line-height: 1;
}

/* ── Add-reaction trigger button ── */
.zvv-reaction-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--zvv-line);
    border-radius: 999px;
    background: none;
    color: var(--zvv-muted);
    font-size: .85rem;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}
.zvv-reaction-add-btn:hover,
.zvv-comment-reactions.picker-open .zvv-reaction-add-btn {
    color: #7c3aed;
    border-color: rgba(124,58,237,.4);
    background: rgba(124,58,237,.06);
}

/* ── Picker popup ── */
.zvv-reaction-picker {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    align-items: center;
    gap: 2px;
    background: var(--zvv-card-bg, #fff);
    border: 1px solid var(--zvv-line);
    border-radius: 999px;
    padding: 5px 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    z-index: 50;
    white-space: nowrap;
}
.zvv-comment-reactions.picker-open .zvv-reaction-picker { display: inline-flex; }

/* ── Individual emoji buttons inside picker ── */
.zvv-reaction-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    padding: 3px;
    border-radius: 6px;
    font-size: 1.35rem;
    line-height: 1;
    transition: transform .12s, background .12s;
}
.zvv-reaction-btn:hover    { transform: scale(1.4); background: rgba(124,58,237,.07); }
.zvv-reaction-btn.my-reacted { filter: drop-shadow(0 0 3px rgba(124,58,237,.6)); }

.zvv-reaction-emoji { line-height: 1; pointer-events: none; }

/* ── Dark mode ── */
[data-bs-theme="dark"] .zvv-reaction-summary      { background: rgba(30,27,75,.5); border-color: rgba(189,147,249,.2); }
[data-bs-theme="dark"] .zvv-reaction-summary-count { color: rgba(248,248,242,.55); }
[data-bs-theme="dark"] .zvv-reaction-add-btn       { border-color: rgba(189,147,249,.25); color: rgba(248,248,242,.5); }
[data-bs-theme="dark"] .zvv-reaction-add-btn:hover,
[data-bs-theme="dark"] .zvv-comment-reactions.picker-open .zvv-reaction-add-btn {
    color: #bd93f9; border-color: rgba(189,147,249,.4); background: rgba(189,147,249,.07);
}
[data-bs-theme="dark"] .zvv-reaction-picker        { background: #1e1b4b; border-color: rgba(189,147,249,.25); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
[data-bs-theme="dark"] .zvv-reaction-btn:hover     { background: rgba(189,147,249,.1); }
[data-bs-theme="dark"] .zvv-reaction-btn.my-reacted { filter: drop-shadow(0 0 3px rgba(189,147,249,.7)); }

/* ── Post Sidebar ── */
.zvv-post-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 80px;
}

/* Author card */
.zvv-post-author-card {
    text-align: center;
}

.zvv-author-avatar-wrap {
    margin: 0.5rem auto 0.75rem;
}

.zvv-author-avatar-lg {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin: 0 auto;
    border: 3px solid rgba(124, 58, 237, 0.2);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.25);
    overflow: hidden;
}

.zvv-author-avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.zvv-author-name {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.zvv-author-name a {
    color: var(--zvv-ink);
    text-decoration: none;
}

.zvv-author-name a:hover { color: #7c3aed; }

.zvv-author-bio {
    font-size: 0.82rem;
    color: var(--zvv-muted, #6b7280);
    line-height: 1.55;
    margin-bottom: 1rem;
}

/* ── Dark Mode (Dracula) ── */
[data-bs-theme="dark"] .zvv-post-body {
    background: #1e1f2e;
    border-color: #44475a;
    color: #f8f8f2;
}

/* Override pasted inline color/background styles from external sources */
[data-bs-theme="dark"] .zvv-post-body [style*="color"],
[data-bs-theme="dark"] .zvv-post-body font[color] {
    color: inherit !important;
}
[data-bs-theme="dark"] .zvv-post-body [style*="background"] {
    background: transparent !important;
    background-color: transparent !important;
}
/* Restore intentional semantic elements overridden above */
[data-bs-theme="dark"] .zvv-post-body a[style*="color"],
[data-bs-theme="dark"] .zvv-post-body a { color: #8be9fd !important; }
[data-bs-theme="dark"] .zvv-post-body code[style],
[data-bs-theme="dark"] .zvv-post-body code { background: rgba(124,58,237,0.12) !important; color: #bd93f9 !important; }
[data-bs-theme="dark"] .zvv-post-body pre[style],
[data-bs-theme="dark"] .zvv-post-body pre  { background: #282a36 !important; color: #50fa7b !important; }
[data-bs-theme="dark"] .zvv-post-body mark { background: rgba(241,250,140,.25) !important; color: #f1fa8c !important; }

[data-bs-theme="dark"] .zvv-post-body h1,
[data-bs-theme="dark"] .zvv-post-body h2,
[data-bs-theme="dark"] .zvv-post-body h3,
[data-bs-theme="dark"] .zvv-post-body h4 { color: #cba6f7 !important; }

[data-bs-theme="dark"] .zvv-post-body blockquote { background: rgba(124,58,237,0.08) !important; color: rgba(189,147,249,0.8) !important; }
[data-bs-theme="dark"] .zvv-post-body td { border-bottom-color: rgba(189,147,249,0.1); color: #cba6f7; }
[data-bs-theme="dark"] .zvv-post-body tr:nth-child(even) td { background: rgba(124,58,237,0.04) !important; }

[data-bs-theme="dark"] .zvv-rating-form,
[data-bs-theme="dark"] .zvv-comment-form { background: rgba(189,147,249,0.04); border-color: rgba(189,147,249,0.14); }
[data-bs-theme="dark"] .zvv-textarea { background: rgba(189,147,249,0.07); border-color: rgba(167,139,250,0.2); color: #e2d9fa; }
[data-bs-theme="dark"] .zvv-captcha-input { background: rgba(189,147,249,0.07); border-color: rgba(167,139,250,0.2); color: #e2d9fa; }
[data-bs-theme="dark"] .zvv-captcha-question strong { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-member-gate { background: rgba(189,147,249,0.04); border-color: rgba(189,147,249,0.14); }
[data-bs-theme="dark"] .zvv-member-gate strong { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-rating-score { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-author-name a { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-post-footer { border-color: rgba(189,147,249,0.1); }
[data-bs-theme="dark"] .zvv-star-input label { color: rgba(167,139,250,0.25); }
[data-bs-theme="dark"] .zvv-star-input label:hover,
[data-bs-theme="dark"] .zvv-star-input label:hover ~ label,
[data-bs-theme="dark"] .zvv-star-input input:checked ~ label { color: #fbbf24; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .zvv-post-layout { grid-template-columns: 1fr; }
    .zvv-post-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .zvv-post-author-card,
    .zvv-sw-cta { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .zvv-post-hero { padding: 2.5rem 0 2rem; }
    .zvv-post-title { font-size: 1.75rem; }
    .zvv-post-body { padding: 1.5rem 1.25rem; font-size: 0.97rem; }
    .zvv-post-sidebar { display: flex; }
    .zvv-discussion-head { flex-direction: column; align-items: flex-start; }
    .zvv-rating-form { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .zvv-post-body { padding: 1.25rem 1rem; }
    .zvv-post-meta-row { gap: 6px; font-size: 0.76rem; }
    .zvv-comment { grid-template-columns: 32px 1fr; }
    .zvv-captcha-row { flex-direction: column; align-items: stretch; }
}

/* ── Back to Top Button ── */
.zvv-back-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1050;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.45);
    opacity: 0;
    transform: translateY(12px) scale(0.88);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
}

.zvv-back-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.zvv-back-top:hover {
    box-shadow: 0 6px 28px rgba(124, 58, 237, 0.6);
    transform: translateY(-2px) scale(1.06);
}

.zvv-back-top:active {
    transform: translateY(0) scale(0.96);
}

@media (max-width: 576px) {
    .zvv-back-top {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
}

/* ── Email Verify Page ── */
.zvv-verify-page {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    background: linear-gradient(150deg, #f3f0ff 0%, #ede9fe 100%);
}

.zvv-verify-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 48px rgba(124, 58, 237, 0.12);
    padding: 3rem 2.5rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
}

.zvv-verify-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.4rem;
}

.zvv-verify-icon-success { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.zvv-verify-icon-info    { background: rgba(79,  70, 229, 0.10); color: #4f46e5; }
.zvv-verify-icon-error   { background: rgba(239, 68, 68,  0.10); color: #dc2626; }

.zvv-verify-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a0f4a;
    margin: 0 0 .75rem;
}

.zvv-verify-desc {
    font-size: .95rem;
    color: #6b7280;
    line-height: 1.65;
    margin: 0 0 1.5rem;
}

.zvv-verify-reward {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #faf5ff, #ede9fe);
    border: 1px solid #ddd6fe;
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 1.75rem;
}

.zvv-verify-reward-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .85rem;
    font-weight: 600;
    color: #5b21b6;
}

.zvv-verify-reward-amount {
    font-size: 1.1rem;
    font-weight: 800;
    color: #7c3aed;
}

.zvv-verify-actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

[data-bs-theme="dark"] .zvv-verify-page  { background: linear-gradient(150deg, #0f0a2e, #1a0f4a); }
[data-bs-theme="dark"] .zvv-verify-card  { background: #160d3a; box-shadow: 0 8px 48px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .zvv-verify-title { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-verify-desc  { color: #9ca3af; }

/* ── Profile completion bonus banner ── */
.zvv-profile-bonus-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.07), rgba(79, 70, 229, 0.04));
    border: 1px solid rgba(124, 58, 237, 0.22);
    border-radius: 14px;
    padding: 14px 18px;
}

.zvv-profile-bonus-banner.zvv-profile-bonus-earned {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.07), rgba(16, 185, 129, 0.04));
    border-color: rgba(5, 150, 105, 0.22);
}

.zvv-profile-bonus-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.15rem;
    color: #7c3aed;
}

.zvv-profile-bonus-earned .zvv-profile-bonus-icon {
    background: rgba(5, 150, 105, 0.12);
    color: #059669;
}

.zvv-profile-bonus-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.zvv-profile-bonus-copy strong {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--zvv-ink, #1a0f4a);
}

.zvv-profile-bonus-copy span {
    font-size: 0.78rem;
    color: var(--zvv-muted, #6b7280);
    line-height: 1.4;
}

.zvv-profile-bonus-copy em {
    font-style: normal;
    font-weight: 700;
    color: #7c3aed;
}

.zvv-profile-bonus-amount {
    font-family: 'Sora', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #7c3aed;
    white-space: nowrap;
    flex-shrink: 0;
}

.zvv-profile-bonus-amount.earned { color: #059669; }

.zvv-profile-bonus-amount span {
    font-size: 0.6em;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 2px;
}

[data-bs-theme="dark"] .zvv-profile-bonus-banner {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(167, 139, 250, 0.22);
}
[data-bs-theme="dark"] .zvv-profile-bonus-banner.zvv-profile-bonus-earned {
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.25);
}
[data-bs-theme="dark"] .zvv-profile-bonus-copy strong { color: #f8f8f2; }

/* ── Post editor ── */
.zvv-editor-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    align-items: start;
}

.zvv-editor-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
}

/* Field wrapper */
.zvv-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zvv-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Thumbnail (wider) + category (narrower) */
.zvv-field-row-thumb-cat {
    grid-template-columns: 1fr 220px;
    align-items: start;
}

.zvv-field-row-location-tags {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

.zvv-search-select {
    position: relative;
}

.zvv-search-select-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--zvv-bg, #f5f3ff);
    border: 1.5px solid #d1c6ff;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 0.9rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--zvv-ink, #1a0f4a);
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    text-align: left;
}

.zvv-search-select-trigger:focus {
    outline: none;
    border-color: #7c3aed;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.zvv-search-select-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.zvv-search-select-value .zvv-country-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zvv-search-select-chevron {
    flex-shrink: 0;
    color: #8b5cf6;
    transition: transform 0.18s;
}

.zvv-search-select.open .zvv-search-select-chevron {
    transform: rotate(180deg);
}

.zvv-search-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    border: 1.5px solid rgba(124, 58, 237, 0.18);
    border-radius: 12px;
    background: var(--zvv-panel, #fff);
    box-shadow: 0 16px 36px rgba(15, 10, 46, 0.14);
    overflow: hidden;
}

.zvv-search-select-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(124, 58, 237, 0.08);
    background: rgba(124, 58, 237, 0.03);
}

.zvv-search-select-search-wrap i {
    color: #8b5cf6;
    flex-shrink: 0;
}

.zvv-search-select-search {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--zvv-ink, #1a0f4a);
    font-size: 0.88rem;
    min-width: 0;
}

.zvv-search-select-search::placeholder {
    color: #a78bfa;
}

.zvv-search-select-list {
    max-height: 260px;
    overflow: auto;
    padding: 6px;
}

.zvv-search-select-option {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--zvv-ink, #1a0f4a);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    font-size: 0.88rem;
}

.zvv-search-select-option .list-flag,
.zvv-search-select-value .zvv-country-flag {
    width: 1.15rem;
    flex-shrink: 0;
    display: inline-flex;
    justify-content: center;
    line-height: 1;
}

.zvv-search-select-option:hover,
.zvv-search-select-option.focused {
    background: rgba(124, 58, 237, 0.08);
}

.zvv-search-select-option.selected {
    background: rgba(124, 58, 237, 0.14);
    color: #5b21b6;
    font-weight: 700;
}

.zvv-search-select-option i {
    color: #8b5cf6;
    flex-shrink: 0;
    opacity: 0;
}

.zvv-search-select-option.selected i {
    opacity: 1;
}

.zvv-search-select-empty {
    padding: 12px;
    color: #9ca3af;
    font-size: 0.85rem;
    text-align: center;
}

[data-bs-theme="dark"] .zvv-search-select-trigger,
[data-bs-theme="dark"] .zvv-search-select-search-wrap,
[data-bs-theme="dark"] .zvv-search-select-option {
    background: #191a26;
    color: #f8f8f2;
}

[data-bs-theme="dark"] .zvv-search-select-trigger {
    border-color: #44475a;
}

[data-bs-theme="dark"] .zvv-search-select-trigger:focus {
    background: #1e1f2e;
    border-color: #bd93f9;
    box-shadow: 0 0 0 3px rgba(189, 147, 249, 0.12);
}

[data-bs-theme="dark"] .zvv-search-select-dropdown {
    background: #1e1f2e;
    border-color: rgba(189, 147, 249, 0.22);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .zvv-search-select-search-wrap {
    background: rgba(189, 147, 249, 0.08);
    border-bottom-color: rgba(189, 147, 249, 0.14);
}

[data-bs-theme="dark"] .zvv-search-select-search::placeholder,
[data-bs-theme="dark"] .zvv-search-select-empty {
    color: #bd93f9;
}

[data-bs-theme="dark"] .zvv-search-select-option:hover,
[data-bs-theme="dark"] .zvv-search-select-option.focused {
    background: rgba(189, 147, 249, 0.12);
}

[data-bs-theme="dark"] .zvv-search-select-option.selected {
    background: rgba(189, 147, 249, 0.18);
    color: #f8f8f2;
}

.zvv-field-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.zvv-field-hint {
    font-size: 0.75rem;
    color: var(--zvv-muted, #9ca3af);
}

/* Light-context inputs — sit on the white zvv-tx-panel */
.zvv-field-input,
.zvv-field-select {
    width: 100%;
    background: var(--zvv-bg, #f5f3ff);
    border: 1.5px solid #d1c6ff;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 0.9rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--zvv-ink, #1a0f4a);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    appearance: auto;
}

.zvv-field-input::placeholder { color: #bd93f9; }

.zvv-field-input:focus,
.zvv-field-select:focus {
    border-color: #7c3aed;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.zvv-field-input-lg {
    font-size: 1.05rem;
    font-weight: 700;
    padding: 13px 16px;
    border-radius: 12px;
    letter-spacing: -0.01em;
}

/* File upload zone */
.zvv-file-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 2px dashed #bd93f9;
    border-radius: 12px;
    background: var(--zvv-bg, #f5f3ff);
    padding: 28px 20px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.18s, background 0.18s;
}

.zvv-file-drop:hover,
.zvv-file-drop:focus {
    border-color: #7c3aed;
    background: #ede9fe;
    outline: none;
}

.zvv-file-drop.drag-over {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.12);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08) inset;
}

.zvv-file-drop i {
    font-size: 1.8rem;
    color: #bd93f9;
}

.zvv-file-drop span {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--zvv-ink, #1a0f4a);
}

.zvv-file-drop small {
    font-size: 0.75rem;
    color: var(--zvv-muted, #9ca3af);
}

.zvv-file-drop input[type="file"] { display: none; }

.zvv-file-drop-img {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.zvv-file-drop.has-file {
    border-style: solid;
    border-color: #7c3aed;
    background: #f5f3ff;
    gap: 8px;
    padding: 12px;
}

.zvv-file-drop.has-file .zvv-file-drop-label {
    font-size: 0.8rem;
    color: #7c3aed;
}

.zvv-file-drop.has-file .zvv-file-drop-hint {
    color: var(--zvv-muted, #9ca3af);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Current thumbnail (edit mode) */
.zvv-file-current {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--zvv-bg, #f5f3ff);
    border: 1px solid #d1c6ff;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
}

.zvv-file-current img {
    width: 56px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.zvv-file-current div { display: flex; flex-direction: column; gap: 2px; }

.zvv-file-current strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--zvv-ink, #1a0f4a);
}

.zvv-file-current span {
    font-size: 0.73rem;
    color: var(--zvv-muted, #9ca3af);
}

/* Status + reward chips row */
.zvv-editor-meta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.zvv-editor-meta-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--zvv-bg, #f5f3ff);
    border: 1px solid #d1c6ff;
    border-radius: 10px;
    padding: 10px 14px;
    flex: 1;
    min-width: 150px;
}

.zvv-editor-meta-chip i {
    font-size: 1.1rem;
    color: #bd93f9;
    flex-shrink: 0;
}

.zvv-editor-meta-chip.reward i { color: #059669; }

.zvv-editor-meta-chip div { display: flex; flex-direction: column; gap: 1px; }

.zvv-editor-meta-chip strong {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--zvv-ink, #1a0f4a);
}

.zvv-editor-meta-chip.reward strong { color: #059669; }

.zvv-editor-meta-chip span {
    font-size: 0.72rem;
    color: var(--zvv-muted, #9ca3af);
}

/* Reward chip in the tx-head */
.zvv-editor-reward-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(5, 150, 105, 0.09);
    border: 1px solid rgba(5, 150, 105, 0.25);
    border-radius: 999px;
    color: #059669;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 12px;
    white-space: nowrap;
    align-self: center;
}

/* Actions row */
.zvv-editor-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 1rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--zvv-line, #e9e6ff);
}

/* Save Draft button (user form) */
.zvv-btn-save-draft {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid #7c3aed;
    background: transparent;
    color: #7c3aed;
    transition: background .18s, color .18s;
}
.zvv-btn-save-draft:hover {
    background: rgba(124,58,237,.08);
}
[data-bs-theme="dark"] .zvv-btn-save-draft {
    border-color: #bd93f9;
    color: #bd93f9;
}
[data-bs-theme="dark"] .zvv-btn-save-draft:hover {
    background: rgba(189,147,249,.12);
}

/* Admin save-draft button */
.zvv-admin-btn-save-draft {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid #7c3aed;
    background: transparent;
    color: #7c3aed;
    transition: background .18s, color .18s;
}
.zvv-admin-btn-save-draft:hover {
    background: rgba(124,58,237,.1);
}

/* Auto-save status indicator */
.zvv-autosave-status {
    font-size: 12px;
    font-weight: 500;
    color: var(--zvv-muted, #6272a4);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .3s;
}
.zvv-autosave-ok {
    color: #059669;
}
.zvv-autosave-error {
    color: #dc2626;
}
[data-bs-theme="dark"] .zvv-autosave-ok {
    color: #34d399;
}
[data-bs-theme="dark"] .zvv-autosave-error {
    color: #f87171;
}

/* ── Preview sidebar ── */
.zvv-editor-sidebar {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.zvv-preview-panel {
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.05);
}

.zvv-preview-head {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--zvv-line, #e9e6ff);
}

.zvv-preview-head h3 {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--zvv-ink, #1a0f4a);
    margin: 4px 0 0;
}

/* Reuse blog-card-art, add preview body */
.zvv-preview-card .blog-card-art {
    height: 140px;
    border-radius: 0;
}

.zvv-preview-body {
    padding: 12px 14px 16px;
}

.zvv-preview-cat {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #7c3aed;
    display: block;
    margin-bottom: 6px;
}

.zvv-preview-body h4 {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--zvv-ink, #1a0f4a);
    line-height: 1.3;
    margin: 0 0 8px;
    word-break: break-word;
}

/* Tips card */
.zvv-editor-tips {
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.05);
}

.zvv-tips-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zvv-tips-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--zvv-muted, #6b7280);
}

.zvv-tips-list li i {
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.zvv-tips-list li .bi-check-circle-fill { color: #059669; }
.zvv-tips-list li .bi-coin             { color: #d97706; }

/* Responsive */
@media (max-width: 900px) {
    .zvv-editor-layout {
        grid-template-columns: 1fr;
    }
    .zvv-editor-sidebar {
        position: static;
    }
    .zvv-field-row-thumb-cat {
        grid-template-columns: 1fr;
    }

    .zvv-field-row-location-tags {
        grid-template-columns: 1fr;
    }
}

/* Dark mode */
[data-bs-theme="dark"] .zvv-field-input,
[data-bs-theme="dark"] .zvv-field-select {
    background: rgba(189,147,249,0.07);
    border-color: rgba(167,139,250,0.25);
    color: #f8f8f2;
}
[data-bs-theme="dark"] .zvv-field-input::placeholder { color: rgba(196,181,253,0.35); }
[data-bs-theme="dark"] .zvv-field-input:focus,
[data-bs-theme="dark"] .zvv-field-select:focus {
    background: rgba(189,147,249,0.1);
    border-color: rgba(167,139,250,0.55);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
}
[data-bs-theme="dark"] .zvv-file-drop {
    background: rgba(255,255,255,0.04);
    border-color: rgba(167,139,250,0.25);
}
[data-bs-theme="dark"] .zvv-file-drop:hover { background: rgba(124,58,237,0.08); border-color: rgba(167,139,250,0.5); }
[data-bs-theme="dark"] .zvv-file-drop span { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-file-drop.has-file { background: rgba(124,58,237,0.12); border-color: #7c3aed; }
[data-bs-theme="dark"] .zvv-file-drop.has-file .zvv-file-drop-label { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-file-current { background: rgba(255,255,255,0.04); border-color: rgba(167,139,250,0.2); }
[data-bs-theme="dark"] .zvv-file-current strong { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-editor-meta-chip { background: rgba(255,255,255,0.04); border-color: rgba(167,139,250,0.18); }
[data-bs-theme="dark"] .zvv-editor-meta-chip strong { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-preview-panel,
[data-bs-theme="dark"] .zvv-editor-tips { background: rgba(189,147,249,0.04); border-color: rgba(189,147,249,0.14); }
[data-bs-theme="dark"] .zvv-preview-head { border-bottom-color: rgba(189,147,249,0.1); }
[data-bs-theme="dark"] .zvv-preview-head h3 { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-preview-body h4 { color: #f8f8f2; }

/* ── User transaction history page ── */
.zvv-tx-filter {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--zvv-panel, #fff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.05);
}

.zvv-tx-filter-tabs {
    display: flex;
    gap: 4px;
    background: var(--zvv-bg, #f5f3ff);
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 10px;
    padding: 4px;
    width: fit-content;
}

.zvv-tx-filter-tabs a {
    border-radius: 7px;
    color: var(--zvv-muted, #6b7280);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 16px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.zvv-tx-filter-tabs a:hover { color: var(--zvv-ink, #1a0f4a); }

.zvv-tx-filter-tabs a.active {
    background: #7c3aed;
    color: #fff;
}

.zvv-tx-filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.zvv-tx-filter-search {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 420px;
}

.zvv-tx-filter-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #bd93f9;
    pointer-events: none;
    font-size: 0.9rem;
}

/* Light-context overrides — these inputs sit on a white panel, not a dark modal */
.zvv-tx-filter .zvv-form-control {
    background: var(--zvv-bg, #f5f3ff);
    border: 1.5px solid #d1c6ff;
    color: var(--zvv-ink, #1a0f4a);
    border-radius: 10px;
}

.zvv-tx-filter .zvv-form-control::placeholder { color: #bd93f9; }

.zvv-tx-filter .zvv-form-control:focus {
    border-color: #7c3aed;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
    color: var(--zvv-ink, #1a0f4a);
    outline: none;
}

.zvv-tx-filter-search .zvv-form-control {
    padding-left: 36px;
}

.zvv-tx-filter-status {
    width: auto;
    min-width: 150px;
    cursor: pointer;
    appearance: auto;
}

.zvv-tx-filter .select2-container {
    max-width: 100%;
    width: 300px !important;
}

.zvv-tx-filter .select2-container--default .select2-selection--single {
    align-items: center;
    background: var(--zvv-bg, #f5f3ff);
    border: 1.5px solid #d1c6ff;
    border-radius: 10px;
    display: flex;
    height: 42px;
    padding: 0 2.1rem 0 12px;
}

.zvv-tx-filter .select2-container--default.select2-container--focus .select2-selection--single,
.zvv-tx-filter .select2-container--default.select2-container--open .select2-selection--single {
    background: #fff;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.zvv-tx-filter .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--zvv-ink, #1a0f4a);
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0;
}

.zvv-tx-filter .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #bd93f9;
}

.zvv-tx-filter .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    right: 0.55rem;
    top: 0;
}

.zvv-tx-counterparty-dropdown {
    border: 1px solid var(--zvv-line, #e9e6ff);
    border-radius: 10px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.zvv-tx-counterparty-dropdown .select2-search--dropdown {
    padding: 0.5rem;
}

.zvv-tx-counterparty-dropdown .select2-search__field {
    border: 1.5px solid #d1c6ff;
    border-radius: 8px;
    outline: none;
    padding: 0.45rem 0.65rem;
}

.zvv-tx-counterparty-dropdown .select2-results__option {
    color: var(--zvv-ink, #1a0f4a);
    font-size: 0.92rem;
    padding: 0.55rem 0.75rem;
}

.zvv-tx-counterparty-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
    background: #7c3aed;
    color: #fff;
}

.zvv-tx-view-all {
    font-size: 0.78rem;
    font-weight: 700;
    color: #7c3aed;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.zvv-tx-view-all:hover { color: #6d28d9; text-decoration: underline; }

.zvv-tx-flag-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 500;
    border: 1.5px solid rgba(239, 68, 68, 0.35);
    background: transparent;
    color: #ef4444;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1.5;
}
.zvv-tx-flag-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: #ef4444;
}
[data-bs-theme="dark"] .zvv-tx-flag-btn {
    border-color: rgba(248, 113, 113, 0.35);
    color: #f87171;
}
[data-bs-theme="dark"] .zvv-tx-flag-btn:hover {
    background: rgba(248, 113, 113, 0.1);
    border-color: #f87171;
}

.zvv-htx-party {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.zvv-htx-party-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--zvv-ink, #1a0f4a);
    white-space: nowrap;
}

.zvv-htx-party-wallet {
    font-size: 0.68rem;
    color: var(--zvv-muted, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    background: none;
    padding: 0;
}

.zvv-tx-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 1rem 0 0.25rem;
    border-top: 1px solid var(--zvv-line, #ede9fe);
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.zvv-tx-pagination a {
    align-items: center;
    border: 1px solid var(--zvv-line, #ede9fe);
    border-radius: 8px;
    color: var(--zvv-ink, #1a0f4a);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    min-width: 34px;
    padding: 0 8px;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

.zvv-tx-pagination a:hover { background: rgba(124, 58, 237, 0.07); color: #7c3aed; }

.zvv-tx-pagination a.active {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

[data-bs-theme="dark"] .zvv-tx-filter {
    background: rgba(189,147,249,0.04);
    border-color: rgba(167,139,250,0.14);
    box-shadow: none;
}
[data-bs-theme="dark"] .zvv-tx-filter-tabs {
    background: rgba(189,147,249,0.07);
    border-color: rgba(189,147,249,0.14);
}
[data-bs-theme="dark"] .zvv-tx-filter-tabs a:hover { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-tx-filter .zvv-form-control {
    background: rgba(189,147,249,0.08);
    border-color: rgba(167,139,250,0.25);
    color: #f8f8f2;
}
[data-bs-theme="dark"] .zvv-tx-filter .zvv-form-control::placeholder { color: rgba(189,147,249,0.5); }
[data-bs-theme="dark"] .zvv-tx-filter .zvv-form-control:focus {
    background: rgba(255,255,255,0.09);
    border-color: rgba(167,139,250,0.55);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
}
[data-bs-theme="dark"] .zvv-tx-filter .select2-container--default .select2-selection--single {
    background: rgba(189,147,249,0.08);
    border-color: rgba(167,139,250,0.25);
}
[data-bs-theme="dark"] .zvv-tx-filter .select2-container--default.select2-container--focus .select2-selection--single,
[data-bs-theme="dark"] .zvv-tx-filter .select2-container--default.select2-container--open .select2-selection--single {
    background: rgba(255,255,255,0.09);
    border-color: rgba(167,139,250,0.55);
}
[data-bs-theme="dark"] .zvv-tx-filter .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f8f8f2;
}
[data-bs-theme="dark"] .zvv-tx-filter .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(189,147,249,0.55);
}
[data-bs-theme="dark"] .zvv-tx-filter .select2-container--default .select2-selection--single .select2-selection__clear {
    color: #bd93f9;
}
[data-bs-theme="dark"] .zvv-tx-filter .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #bd93f9 transparent transparent transparent;
}
[data-bs-theme="dark"] .zvv-tx-counterparty-dropdown {
    background: #19142c;
    border-color: rgba(167,139,250,0.25);
    box-shadow: 0 18px 36px rgba(0,0,0,0.35);
}
[data-bs-theme="dark"] .zvv-tx-counterparty-dropdown .select2-search--dropdown {
    background: #19142c;
}
[data-bs-theme="dark"] .zvv-tx-counterparty-dropdown .select2-search__field {
    background: rgba(255,255,255,0.08);
    border-color: rgba(167,139,250,0.35);
    color: #f8f8f2;
}
[data-bs-theme="dark"] .zvv-tx-counterparty-dropdown .select2-results {
    background: #19142c;
}
[data-bs-theme="dark"] .zvv-tx-counterparty-dropdown .select2-results__option {
    background: #19142c;
    color: #f8f8f2;
}
[data-bs-theme="dark"] .zvv-tx-counterparty-dropdown .select2-results__option--selected {
    background: rgba(124,58,237,0.35);
    color: #fff;
}
[data-bs-theme="dark"] .zvv-tx-counterparty-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
    background: #7c3aed;
    color: #fff;
}
[data-bs-theme="dark"] .zvv-tx-view-all { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-tx-view-all:hover { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-htx-party-name { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-tx-pagination a { border-color: rgba(189,147,249,0.18); color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-tx-pagination a:hover { background: rgba(124,58,237,0.12); color: #bd93f9; }
[data-bs-theme="dark"] .zvv-tx-pagination { border-top-color: rgba(189,147,249,0.1); }

/* ── Admin transaction table ── */
.admin-tx-table th:nth-child(4) { min-width: 160px; }

.admin-tx-user {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-tx-username {
    font-weight: 700;
    font-size: 0.82rem;
    color: #7c3aed;
    text-decoration: none;
    white-space: nowrap;
}

.admin-tx-username:hover { text-decoration: underline; color: #6d28d9; }

.admin-tx-email {
    font-size: 0.72rem;
    color: var(--zvv-muted, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.admin-tx-wallet {
    font-size: 0.68rem;
    color: var(--zvv-muted, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    background: none;
    padding: 0;
}

.admin-tx-status-completed { color: #059669; }
.admin-tx-status-pending   { color: #d97706; }
.admin-tx-status-failed    { color: #dc2626; }

.admin-pagination-ellipsis {
    align-items: center;
    color: var(--zvv-muted, #9ca3af);
    display: inline-flex;
    font-size: 0.85rem;
    padding: 0 4px;
}

/* zvv-balance-metrics 4-column variant used on transactions page */
.zvv-balance-metrics:has(.zvv-metric:nth-child(4)) {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .zvv-balance-metrics:has(.zvv-metric:nth-child(4)) {
        grid-template-columns: repeat(2, 1fr);
    }
}

[data-bs-theme="dark"] .admin-tx-username { color: #bd93f9; }
[data-bs-theme="dark"] .admin-tx-username:hover { color: #bd93f9; }

/* ── Dashboard profile completion callout ── */
.zvv-profile-dash-callout {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
    border: 1.5px solid #bd93f9;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.zvv-profile-dash-callout.ready {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
}

.zvv-profile-dash-callout-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.zvv-profile-dash-callout-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.zvv-profile-dash-callout.ready .zvv-profile-dash-callout-icon {
    background: linear-gradient(135deg, #059669, #10b981);
}

.zvv-profile-dash-callout-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.zvv-profile-dash-callout-copy strong {
    font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #4c1d95;
    line-height: 1.3;
}

.zvv-profile-dash-callout.ready .zvv-profile-dash-callout-copy strong { color: #065f46; }

.zvv-profile-dash-callout-copy span {
    font-size: 0.8rem;
    color: #6d28d9;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zvv-profile-dash-callout.ready .zvv-profile-dash-callout-copy span { color: #047857; }

.zvv-profile-dash-callout-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.zvv-profile-dash-callout-btn:hover { opacity: 0.88; color: #fff; }

@media (max-width: 640px) {
    .zvv-profile-dash-callout { flex-direction: column; align-items: flex-start; }
    .zvv-profile-dash-callout-btn { width: 100%; justify-content: center; }
}

[data-bs-theme="dark"] .zvv-profile-dash-callout {
    background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(79,70,229,0.12));
    border-color: #5b21b6;
}
[data-bs-theme="dark"] .zvv-profile-dash-callout.ready {
    background: linear-gradient(135deg, rgba(5,150,105,0.15), rgba(16,185,129,0.10));
    border-color: #065f46;
}
[data-bs-theme="dark"] .zvv-profile-dash-callout-copy strong { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-profile-dash-callout.ready .zvv-profile-dash-callout-copy strong { color: #6ee7b7; }
[data-bs-theme="dark"] .zvv-profile-dash-callout-copy span { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-profile-dash-callout.ready .zvv-profile-dash-callout-copy span { color: #34d399; }

/* Register optional address toggle */
.register-optional-toggle {
    font-size: 0.85rem;
    color: #6d28d9;
    font-weight: 600;
}
.register-optional-toggle:hover { color: #4f46e5; }
.register-optional-toggle .bi { margin-right: 4px; }

/* ════════════════════════════════════════════════════
   REGISTER PAGE — Full redesign
════════════════════════════════════════════════════ */

.zvv-register-body {
    background: #0f0a2e;
    font-family: 'Plus Jakarta Sans', sans-serif;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.zvv-register-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.zvv-register-shell {
    display: grid;
    grid-template-columns: 420px 1fr;
    min-height: 100vh;
    flex: 1;
}

/* ── Brand panel (left) ── */
.zvv-register-brand {
    background: linear-gradient(160deg, #1a0f4a 0%, #0f0a2e 45%, #170b3b 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.zvv-register-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(124,58,237,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,58,237,0.07) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 1;
}

.zvv-register-brand::after {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(124,58,237,0.28) 0%, transparent 65%);
    top: -120px;
    right: -120px;
    pointer-events: none;
    z-index: 1;
}

.zvv-register-brand-inner {
    padding: 52px 44px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.zvv-register-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 52px;
    align-self: flex-start;
}

.zvv-register-logo span {
    font-family: 'Sora', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: 5px;
    color: #fff;
    background: rgba(189,147,249,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 7px 18px;
    border-radius: 8px;
    transition: background 0.15s;
}

.zvv-register-logo:hover span {
    background: rgba(255,255,255,0.14);
}

.zvv-register-headline {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 3vw, 2.75rem);
    line-height: 1.12;
    color: #fff;
    margin: 0 0 18px;
    letter-spacing: -0.03em;
}

.zvv-register-sub {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.7;
    margin: 0 0 44px;
    max-width: 290px;
}

.zvv-register-rewards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.zvv-reg-reward-chip {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(189,147,249,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 14px 16px;
    backdrop-filter: blur(6px);
    transition: background 0.15s;
}

.zvv-reg-reward-chip:hover {
    background: rgba(189,147,249,0.1);
}

.zvv-reg-reward-chip .chip-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.zvv-reg-reward-chip div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.zvv-reg-reward-chip strong {
    font-family: 'Sora', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.zvv-reg-reward-chip span {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.45);
}

/* ── Decorative orbit ── */
.zvv-register-orb {
    position: absolute;
    bottom: -90px;
    right: -90px;
    width: 340px;
    height: 340px;
    pointer-events: none;
    z-index: 1;
}

.zvv-register-orb .orb-ring {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.zvv-register-orb .orb-ring-1 {
    width: 110px;
    height: 110px;
    border: 1.5px solid rgba(124,58,237,0.55);
    animation: zvv-reg-spin 7s linear infinite;
}

.zvv-register-orb .orb-ring-2 {
    width: 200px;
    height: 200px;
    border: 1px solid rgba(124,58,237,0.3);
    animation: zvv-reg-spin 13s linear infinite reverse;
}

.zvv-register-orb .orb-ring-3 {
    width: 310px;
    height: 310px;
    border: 1px solid rgba(124,58,237,0.15);
    animation: zvv-reg-spin 21s linear infinite;
}

@keyframes zvv-reg-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.zvv-register-orb .orb-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Sora', sans-serif;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 5px;
    color: rgba(255,255,255,0.3);
}

/* ── Form panel (right) ── */
.zvv-register-form-panel {
    background: #ffffff;
    display: flex;
    align-items: flex-start;
    padding: 52px 52px;
    overflow-y: auto;
    max-height: 100vh;
}

.zvv-register-form-inner {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding-bottom: 32px;
}

.zvv-register-form-header {
    margin-bottom: 26px;
}

.zvv-register-form-header h2 {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
    color: #1a0f4a;
    margin: 0 0 5px;
    letter-spacing: -0.025em;
}

.zvv-register-form-header p {
    font-size: 0.84rem;
    color: #9ca3af;
    margin: 0;
}

.zvv-register-form-header a {
    color: #7c3aed;
    font-weight: 700;
    text-decoration: none;
}

.zvv-register-form-header a:hover { text-decoration: underline; }

/* error box */
.zvv-register-error-box {
    display: flex;
    gap: 10px;
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.84rem;
    color: #991b1b;
    line-height: 1.5;
}

.zvv-register-error-box > i {
    flex-shrink: 0;
    font-size: 1rem;
    margin-top: 2px;
}

.zvv-login-locked-box {
    background: #fff7ed;
    border-color: #fb923c;
    color: #9a3412;
}

.zvv-login-warning-box {
    display: flex;
    gap: 10px;
    background: #fffbeb;
    border: 1.5px solid #fbbf24;
    border-radius: 10px;
    padding: 11px 16px;
    margin-bottom: 16px;
    font-size: 0.84rem;
    color: #92400e;
    line-height: 1.5;
}

.zvv-login-warning-box > i {
    flex-shrink: 0;
    font-size: 1rem;
    margin-top: 2px;
    color: #d97706;
}

/* section divider */
.zvv-reg-section-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 14px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #bd93f9;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.zvv-reg-section-divider::before,
.zvv-reg-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ede9fe;
}

.zvv-reg-section-divider::before { display: none; }

.zvv-reg-optional-pill {
    font-size: 0.6rem;
    font-weight: 700;
    background: #ede9fe;
    color: #7c3aed;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* form rows */
.zvv-reg-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.zvv-reg-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}

.zvv-reg-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #4b5563;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* icon + input wrapper */
.zvv-reg-field {
    display: flex;
    align-items: center;
    background: #f9f7ff;
    border: 1.5px solid #e5dfff;
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    overflow: visible;
    position: relative;
}

.zvv-reg-field:focus-within {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
    background: #fff;
}

.zvv-reg-field-icon {
    padding: 0 0 0 13px;
    color: #bd93f9;
    font-size: 0.95rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.zvv-reg-field:focus-within .zvv-reg-field-icon { color: #7c3aed; }

.zvv-reg-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 11px 12px 11px 10px;
    font-size: 0.875rem;
    color: #1a0f4a;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    outline: none;
    min-width: 0;
}

.zvv-reg-input::placeholder { color: #d8d1f8; font-weight: 400; }

.zvv-reg-username-status {
    min-height: 16px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7280;
}

.zvv-reg-username-status[data-state="checking"] { color: #7c3aed; }
.zvv-reg-username-status[data-state="success"] { color: #059669; }
.zvv-reg-username-status[data-state="error"] { color: #dc2626; }

/* password toggle */
.zvv-reg-pw-toggle {
    border: none;
    background: none;
    padding: 0 12px;
    color: #bd93f9;
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    transition: color 0.15s;
    flex-shrink: 0;
}

.zvv-reg-pw-toggle:hover { color: #7c3aed; }

/* ── Custom country picker ── */
.zvv-country-picker { position: relative; }

.zvv-country-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: #f9f7ff;
    border: 1.5px solid #e5dfff;
    border-radius: 10px;
    padding: 11px 13px;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #d8d1f8;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    line-height: 1.4;
}

.zvv-country-trigger.selected { color: #1a0f4a; }

.zvv-country-trigger:focus,
.zvv-country-trigger[aria-expanded="true"] {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
    background: #fff;
    outline: none;
}

.zvv-country-flag { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.zvv-country-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zvv-country-chevron {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: #bd93f9;
    transition: transform 0.2s ease;
}

.zvv-country-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid #e5dfff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(79,46,220,0.18);
    z-index: 200;
    overflow: hidden;
    display: none;
    animation: zvv-dropdown-in 0.15s ease;
}

.zvv-country-dropdown.open { display: block; }

@keyframes zvv-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.zvv-country-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #f0ebff;
    position: sticky;
    top: 0;
    background: #fff;
}

.zvv-country-search-wrap i { color: #bd93f9; font-size: 0.85rem; }

.zvv-country-search {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.84rem;
    color: #1a0f4a;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    background: transparent;
}

.zvv-country-search::placeholder { color: #d8d1f8; }

.zvv-country-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 230px;
    overflow-y: auto;
}

.zvv-country-list::-webkit-scrollbar { width: 4px; }
.zvv-country-list::-webkit-scrollbar-track { background: transparent; }
.zvv-country-list::-webkit-scrollbar-thumb { background: #e5dfff; border-radius: 4px; }

.zvv-country-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 500;
    color: #374151;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: background 0.1s;
    line-height: 1.4;
}

.zvv-country-list li:hover { background: #f5f0ff; color: #7c3aed; }
.zvv-country-list li.active { background: #ede9fe; color: #6d28d9; font-weight: 700; }

.zvv-country-list li .list-flag { font-size: 1.1rem; width: 22px; text-align: center; flex-shrink: 0; }
.zvv-country-list li .list-name { flex: 1; }

/* ── Optional address section ── */
.zvv-reg-optional-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.79rem;
    font-weight: 600;
    color: #7c3aed;
    background: none;
    border: none;
    padding: 4px 0 12px;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.zvv-reg-optional-toggle:hover { color: #4f46e5; }
.zvv-reg-optional-toggle strong { color: inherit; }

.zvv-reg-address-section {
    background: #faf9ff;
    border: 1.5px dashed #ddd6fe;
    border-radius: 12px;
    padding: 18px 16px 4px;
    margin-bottom: 4px;
}

.zvv-reg-address-section .zvv-reg-field-wrap:last-child { margin-bottom: 14px; }

/* ── Account type grid ── */
.zvv-reg-type-section { margin-bottom: 4px; }

.zvv-reg-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.zvv-reg-type-option { position: relative; }

.zvv-reg-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.zvv-reg-type-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px 12px;
    background: #f9f7ff;
    border: 1.5px solid #e5dfff;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    height: 100%;
}

.zvv-reg-type-option label:hover {
    background: #f0ebff;
    border-color: #bd93f9;
}

.zvv-reg-type-option input:checked + label {
    background: linear-gradient(135deg, #faf5ff, #ede9fe);
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124,58,237,0.18);
}

.zvv-reg-type-option label .type-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #ede9fe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c3aed;
    font-size: 1.05rem;
    transition: all 0.15s;
    flex-shrink: 0;
}

.zvv-reg-type-option input:checked + label .type-icon {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
}

.zvv-reg-type-option label .type-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: #4b5563;
    line-height: 1.3;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.zvv-reg-type-option input:checked + label .type-name { color: #4c1d95; }

.zvv-reg-type-note {
    font-size: 0.72rem;
    color: #9ca3af;
    margin: 0;
}

/* ── Submit ── */
.zvv-reg-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Sora', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s;
    margin-top: 6px;
    box-shadow: 0 4px 18px rgba(124,58,237,0.3);
}

.zvv-reg-submit-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(124,58,237,0.4);
}

.zvv-reg-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(124,58,237,0.25);
}

.zvv-recaptcha-wrap {
    margin: 16px 0 4px;
    display: flex;
    justify-content: flex-start;
}

.zvv-reg-form-note {
    font-size: 0.77rem;
    color: #9ca3af;
    text-align: center;
    margin-top: 16px;
    margin-bottom: 0;
}

.zvv-reg-form-note a {
    color: #7c3aed;
    font-weight: 600;
    text-decoration: none;
}

.zvv-reg-form-note a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 960px) {
    .zvv-register-shell { grid-template-columns: 1fr; min-height: auto; }

    .zvv-register-brand {
        min-height: auto;
        padding: 0;
    }

    .zvv-register-brand-inner {
        padding: 36px 28px 28px;
        flex-direction: column;
    }

    .zvv-register-logo { margin-bottom: 28px; }
    .zvv-register-headline { font-size: 1.7rem; margin-bottom: 10px; }
    .zvv-register-sub { margin-bottom: 20px; max-width: none; }

    .zvv-register-rewards {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .zvv-reg-reward-chip { flex: 1; min-width: 150px; }

    .zvv-register-orb { display: none; }

    .zvv-register-form-panel {
        padding: 36px 28px;
        max-height: none;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .zvv-register-brand-inner { padding: 28px 20px 20px; }
    .zvv-register-form-panel { padding: 28px 20px; }

    .zvv-reg-row { grid-template-columns: 1fr; }
    .zvv-reg-type-grid { grid-template-columns: repeat(2, 1fr); }
    .zvv-register-rewards { flex-direction: column; }
}

/* ════════════════════════════════════════════════════
   LOGIN PAGE — Same split layout, login-specific parts
════════════════════════════════════════════════════ */

/* shell: same grid as register but narrower left column */
.zvv-login-shell {
    display: grid;
    grid-template-columns: 400px 1fr;
    min-height: 100vh;
    flex: 1;
}

/* feature chips (login left panel) */
.zvv-login-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.zvv-login-feature-chip {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(189,147,249,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 14px 16px;
    backdrop-filter: blur(6px);
    transition: background 0.15s;
}

.zvv-login-feature-chip:hover { background: rgba(189,147,249,0.1); }

.zvv-login-feature-chip .feat-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.zvv-login-feature-chip div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.zvv-login-feature-chip strong {
    font-family: 'Sora', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
}

.zvv-login-feature-chip span {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.45);
}

/* form panel — vertically centered since login form is short */
.zvv-login-form-panel {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px;
    min-height: 100vh;
}

.zvv-login-form-inner {
    width: 100%;
    max-width: 400px;
}

/* custom remember-me checkbox */
.zvv-login-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 0;
    cursor: pointer;
    user-select: none;
}

.zvv-login-remember input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 1.5px solid #e5dfff;
    border-radius: 5px;
    background: #f9f7ff;
    cursor: pointer;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
    margin: 0;
}

.zvv-login-remember input[type="checkbox"]:checked {
    background: #7c3aed;
    border-color: #7c3aed;
}

.zvv-login-remember input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 2px;
    width: 7px;
    height: 4px;
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    transform: rotate(-46deg);
    display: block;
}

.zvv-login-remember input[type="checkbox"]:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

.zvv-login-remember span {
    font-size: 0.84rem;
    font-weight: 600;
    color: #4b5563;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* login bottom row: remember-me + forgot link */
.zvv-login-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 0;
}

.zvv-login-forgot-link {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7c3aed;
    text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.zvv-login-forgot-link:hover { text-decoration: underline; color: #4f46e5; }

/* post-reset success flash on login page */
.zvv-fp-success-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #15803d;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.zvv-fp-success-flash i { font-size: 1rem; flex-shrink: 0; }

/* ── Forgot / reset password page states ── */
.zvv-fp-success {
    text-align: center;
    padding: 12px 0;
}

.zvv-fp-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    margin: 0 auto 22px;
}

.zvv-fp-error .zvv-fp-success-icon,
.zvv-fp-error-icon {
    background: linear-gradient(135deg, #dc2626, #f97316);
}

.zvv-fp-success h2 {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: #1a0f4a;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

.zvv-fp-success p {
    font-size: 0.88rem;
    color: #6b7280;
    line-height: 1.65;
    margin: 0 0 6px;
}

.zvv-fp-success-note {
    font-size: 0.8rem !important;
    color: #9ca3af !important;
}

.zvv-fp-success-note a {
    color: #7c3aed;
    font-weight: 600;
    text-decoration: none;
}

.zvv-fp-success-note a:hover { text-decoration: underline; }

/* ── Password strength meter ── */
.zvv-pw-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 4px;
}

.zvv-pw-strength-bar {
    flex: 1;
    height: 4px;
    background: #ede9fe;
    border-radius: 4px;
    overflow: hidden;
}

.zvv-pw-strength-fill {
    height: 100%;
    width: 0;
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
}

.zvv-pw-strength-label {
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 70px;
    text-align: right;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* responsive */
@media (max-width: 960px) {
    .zvv-login-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .zvv-login-form-panel {
        padding: 36px 28px;
        min-height: auto;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .zvv-login-form-panel { padding: 28px 20px; }
}

/* ══════════════════════════════════════════════════════════════
   ZVV ADMIN INTERFACE  (zvv-admin-*)
══════════════════════════════════════════════════════════════ */

.zvv-admin-body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: #f0eeff;
    color: #0f0a2e;
    min-height: 100vh;
}

.zvv-admin-shell {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ── */
.zvv-admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 256px;
    height: 100vh;
    background: linear-gradient(180deg, #0d0a2e 0%, #16103a 100%);
    display: flex;
    flex-direction: column;
    z-index: 200;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.zvv-admin-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(124,58,237,0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 90%, rgba(79,70,229,0.12) 0%, transparent 60%);
    pointer-events: none;
}

.zvv-admin-sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 14px;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    scrollbar-width: none;
}

.zvv-admin-sidebar-inner::-webkit-scrollbar { display: none; }

.zvv-admin-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 10px 22px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 14px;
    flex-shrink: 0;
}

.zvv-admin-logo-mark {
    font-family: 'Sora', sans-serif;
    font-size: 26px;
    font-weight: 800;
    background: linear-gradient(135deg, #bd93f9, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.zvv-admin-logo-sub {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 5px;
}

.zvv-admin-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zvv-admin-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border-radius: 10px;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.17s ease;
    white-space: nowrap;
}

.zvv-admin-nav-item:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
}

.zvv-admin-nav-item.active {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    box-shadow: 0 4px 14px rgba(124,58,237,0.4);
}

.zvv-admin-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    font-size: 15px;
    flex-shrink: 0;
}

.zvv-admin-nav-sep {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 10px 0;
}

.zvv-admin-nav-ext { opacity: 0.65; }
.zvv-admin-nav-ext:hover { opacity: 1; }

.zvv-admin-ext-icon {
    font-size: 11px;
    margin-left: auto;
    opacity: 0.5;
}

.zvv-admin-nav-badge {
    margin-left: auto;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 20px;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(124,58,237,0.5);
    flex-shrink: 0;
}

.zvv-admin-sidebar-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 16px 10px 20px;
    flex-shrink: 0;
}

.zvv-admin-foot-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zvv-admin-foot-who {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.zvv-admin-foot-who strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zvv-admin-foot-who span {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,0.38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zvv-admin-foot-logout {
    color: rgba(255,255,255,0.35);
    font-size: 17px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
    flex-shrink: 0;
    text-decoration: none;
}

.zvv-admin-foot-logout:hover { color: #f87171; }

.zvv-admin-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 195;
    backdrop-filter: blur(2px);
}

.zvv-admin-overlay.open { display: block; }

.zvv-admin-mob-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    width: 42px;
    height: 42px;
    background: #0d0a2e;
    color: #bd93f9;
    border: none;
    border-radius: 10px;
    font-size: 19px;
    cursor: pointer;
    z-index: 300;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

/* ── Main content area ── */
.zvv-admin-main {
    margin-left: 256px;
    flex: 1;
    min-width: 0;
    min-height: 100vh;
    background: #f0eeff;
    display: flex;
    flex-direction: column;
}

.zvv-admin-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 32px 32px 0;
    flex-wrap: wrap;
}

.zvv-admin-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin-bottom: 4px;
}

.zvv-admin-page-title {
    font-family: 'Sora', sans-serif;
    font-size: 25px;
    font-weight: 700;
    color: #0f0a2e;
    margin: 0;
    line-height: 1.15;
}

.zvv-admin-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-top: 6px;
}

.zvv-admin-content {
    padding: 24px 32px 52px;
    flex: 1;
}

/* ── Flash messages ── */
.zvv-admin-flash {
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.zvv-admin-flash-success {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.zvv-admin-flash-error {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border: 1px solid #fca5a5;
    color: #7f1d1d;
    align-items: flex-start;
}

/* ── Cards ── */
.zvv-admin-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(124,58,237,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 18px rgba(124,58,237,0.05);
    overflow: hidden;
    margin-bottom: 20px;
}

.zvv-admin-card:last-child { margin-bottom: 0; }

.zvv-admin-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(124,58,237,0.07);
}

.zvv-admin-card-title {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #0f0a2e;
    margin: 0;
}

.zvv-admin-card-body { padding: 20px 22px; }

/* ── Stats grid ── */
.zvv-admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.zvv-admin-stat {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    border: 1px solid rgba(124,58,237,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(124,58,237,0.04);
    position: relative;
    overflow: hidden;
}

.zvv-admin-stat::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7c3aed, #4f46e5);
    border-radius: 3px 3px 0 0;
}

.zvv-admin-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(79,70,229,0.1));
    color: #7c3aed;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.zvv-admin-stat-val {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #0f0a2e;
    line-height: 1;
    margin-bottom: 4px;
}

.zvv-admin-stat-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

/* ── Action cards (dashboard) ── */
.zvv-admin-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.zvv-admin-action {
    background: #fff;
    border: 1.5px solid rgba(124,58,237,0.1);
    border-radius: 14px;
    padding: 20px 18px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zvv-admin-action:hover {
    border-color: #7c3aed;
    box-shadow: 0 8px 24px rgba(124,58,237,0.12);
    transform: translateY(-2px);
    color: inherit;
}

.zvv-admin-action-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(79,70,229,0.1));
    color: #7c3aed;
    font-size: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zvv-admin-action strong {
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0f0a2e;
    display: block;
}

.zvv-admin-action small {
    font-size: 13px;
    color: #6b7280;
    display: block;
    margin-top: 2px;
    line-height: 1.45;
}

.zvv-admin-action-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.zvv-admin-action-counts span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(124,58,237,0.08);
    color: #6d28d9;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.zvv-admin-action-counts b {
    color: #0f0a2e;
    font-size: 13px;
}

/* Alert action card (pending KYC etc.) */
.zvv-admin-action-alert {
    border-color: rgba(245,158,11,.3);
    background: linear-gradient(160deg, #fffbeb 0%, #fff 60%);
}
.zvv-admin-action-alert:hover {
    border-color: #f59e0b;
    box-shadow: 0 8px 24px rgba(245,158,11,.15);
}
.zvv-admin-action-alert .zvv-admin-action-icon {
    background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(217,119,6,.12));
    color: #d97706;
}

.zvv-admin-action-count-new {
    background: rgba(239,68,68,.1) !important;
    color: #dc2626 !important;
}
.zvv-admin-action-count-new b { color: #dc2626 !important; }

/* ── Category pills ── */
.zvv-admin-cat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.zvv-admin-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(124,58,237,0.06);
    border: 1.5px solid rgba(124,58,237,0.12);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: #0f0a2e;
    text-decoration: none;
    transition: all 0.14s;
}

.zvv-admin-cat-pill:hover {
    background: rgba(124,58,237,0.12);
    border-color: #7c3aed;
    color: #7c3aed;
}

.zvv-admin-cat-pill i { color: #bd93f9; font-size: 14px; }

.zvv-admin-cat-pill strong {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 8px;
    min-width: 20px;
    text-align: center;
}

/* ── Table ── */
.zvv-admin-table-wrap { overflow-x: auto; }

.zvv-admin-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.zvv-admin-tbl thead tr { background: #faf8ff; }

.zvv-admin-tbl thead th {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    border-bottom: 2px solid rgba(124,58,237,0.1);
    white-space: nowrap;
}

.zvv-admin-tbl tbody tr {
    border-bottom: 1px solid rgba(124,58,237,0.05);
    transition: background 0.1s;
}

.zvv-admin-tbl tbody tr:last-child { border-bottom: none; }
.zvv-admin-tbl tbody tr:hover { background: rgba(124,58,237,0.025); }

.zvv-admin-tbl td {
    padding: 13px 16px;
    color: #374151;
    vertical-align: middle;
}

.zvv-admin-user-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.zvv-admin-user-initial {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zvv-admin-user-name {
    font-weight: 600;
    color: #0f0a2e;
    font-size: 14px;
    line-height: 1.25;
}

.zvv-admin-user-email {
    font-size: 12px;
    color: #9ca3af;
    display: block;
}

/* ── Badges ── */
.zvv-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

.zvv-admin-badge-success  { background: #d1fae5; color: #065f46; }
.zvv-admin-badge-warning  { background: #fef3c7; color: #92400e; }
.zvv-admin-badge-danger   { background: #fee2e2; color: #7f1d1d; }
.zvv-admin-badge-archived { background: #ede9fe; color: #5b21b6; }
.zvv-admin-badge-dark    { background: #0f0a2e; color: #fff; }
.zvv-admin-badge-violet  { background: rgba(124,58,237,0.12); color: #7c3aed; }
.zvv-admin-badge-muted   { background: #f3f4f6; color: #4b5563; }

.zvv-admin-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    background: rgba(124,58,237,0.09);
    color: #7c3aed;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

/* ── Filter bar ── */
.zvv-admin-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.zvv-admin-search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
    max-width: 380px;
}

.zvv-admin-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #bd93f9;
    font-size: 15px;
    pointer-events: none;
}

.zvv-admin-search {
    width: 100%;
    padding: 10px 14px 10px 40px;
    border: 1.5px solid rgba(124,58,237,0.15);
    border-radius: 10px;
    font-size: 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #0f0a2e;
    background: #fff;
    outline: none;
    transition: border-color 0.17s, box-shadow 0.17s;
}

.zvv-admin-search:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}

.zvv-admin-filter-tabs {
    display: flex;
    gap: 3px;
    background: #fff;
    border: 1.5px solid rgba(124,58,237,0.1);
    border-radius: 10px;
    padding: 4px;
}

.zvv-admin-filter-tab {
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    transition: all 0.14s;
    white-space: nowrap;
}

.zvv-admin-filter-tab:hover {
    color: #7c3aed;
    background: rgba(124,58,237,0.06);
}

.zvv-admin-filter-tab.active {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
}

.zvv-admin-filter-select {
    padding: 9px 12px;
    border: 1.5px solid rgba(124,58,237,0.15);
    border-radius: 10px;
    font-size: 13px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #374151;
    background: #fff;
    outline: none;
    cursor: pointer;
}

.zvv-admin-filter-select:focus { border-color: #7c3aed; }

.zvv-admin-filter .select2-container {
    max-width: 100%;
    width: 320px !important;
}

.zvv-admin-filter .select2-container--default .select2-selection--single {
    align-items: center;
    background: #fff;
    border: 1.5px solid rgba(124,58,237,0.15);
    border-radius: 10px;
    display: flex;
    height: 42px;
    padding: 0 2.1rem 0 12px;
}

.zvv-admin-filter .select2-container--default.select2-container--focus .select2-selection--single,
.zvv-admin-filter .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}

.zvv-admin-filter .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #374151;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    padding: 0;
}

.zvv-admin-filter .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6b7280;
}

.zvv-admin-filter .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    right: 0.55rem;
    top: 0;
}

/* ── Buttons ── */
.zvv-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.17s ease;
    white-space: nowrap;
    line-height: 1;
}

.zvv-admin-btn-primary {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    box-shadow: 0 4px 12px rgba(124,58,237,0.28);
}

.zvv-admin-btn-primary:hover {
    color: #fff;
    box-shadow: 0 6px 18px rgba(124,58,237,0.38);
    transform: translateY(-1px);
}

.zvv-admin-btn-outline {
    background: #fff;
    color: #4b5563;
    border: 1.5px solid rgba(124,58,237,0.18);
}

.zvv-admin-btn-outline:hover {
    background: rgba(124,58,237,0.05);
    border-color: #7c3aed;
    color: #7c3aed;
}

.zvv-admin-btn-success {
    background: linear-gradient(135deg, #059669, #047857);
    color: #fff;
    box-shadow: 0 4px 12px rgba(5,150,105,0.25);
}

.zvv-admin-btn-success:hover {
    color: #fff;
    box-shadow: 0 6px 16px rgba(5,150,105,0.35);
    transform: translateY(-1px);
}

.zvv-admin-btn-danger {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 4px 10px rgba(239,68,68,0.2);
}

.zvv-admin-btn-danger:hover { background: #dc2626; color: #fff; }

.zvv-admin-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 8px;
    gap: 5px;
}

/* ── Small icon-only action button (table row actions) ── */
.zvv-admin-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1.5px solid rgba(124,58,237,0.15);
    background: #fff;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

.zvv-admin-action-btn:hover {
    border-color: #7c3aed;
    color: #7c3aed;
    background: rgba(124,58,237,0.06);
}

.zvv-admin-action-btn-danger {
    border-color: rgba(239,68,68,0.25);
    color: #ef4444;
    background: rgba(239,68,68,0.06);
}

.zvv-admin-action-btn-danger:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

[data-bs-theme=dark] .zvv-admin-action-btn {
    background: #140e30;
    border-color: rgba(189,147,249,0.15);
    color: #9ca3af;
}

[data-bs-theme=dark] .zvv-admin-action-btn-danger {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.3);
    color: #f87171;
}

/* ── Settings ── */
.zvv-admin-settings-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    align-items: start;
    margin-bottom: 28px;
}

.zvv-admin-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(124,58,237,0.06);
}

.zvv-admin-settings-row:last-of-type { border-bottom: none; }

.zvv-admin-settings-desc { flex: 1; }

.zvv-admin-settings-desc strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #0f0a2e;
    margin-bottom: 2px;
}

.zvv-admin-settings-desc span { font-size: 13px; color: #6b7280; }

.zvv-admin-settings-ctrl { flex-shrink: 0; width: 280px; }

.zvv-admin-settings-actions {
    padding: 16px 22px;
    border-top: 1px solid rgba(124,58,237,0.07);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: column;
}

.zvv-admin-smtp-test {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.zvv-admin-smtp-test-input {
    flex: 1;
    padding: 9px 13px;
    border: 1.5px solid rgba(124,58,237,0.15);
    border-radius: 10px;
    font-size: 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #0f0a2e;
    background: #fff;
    outline: none;
}

.zvv-admin-smtp-test-input:focus { border-color: #7c3aed; }

/* ── Settings preview panel ── */
.zvv-admin-preview {
    background: linear-gradient(160deg, #0f0a2e, #1a1040);
    border-radius: 16px;
    padding: 24px;
    color: #fff;
    border: 1px solid rgba(124,58,237,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    height: fit-content;
    margin-bottom: 20px;
}

.zvv-admin-preview-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(189,147,249,0.1);
}

.zvv-admin-preview-brand > span {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zvv-admin-preview-brand strong {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.zvv-admin-preview-brand small { font-size: 12px; color: rgba(255,255,255,0.4); }

.zvv-admin-preview dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }

.zvv-admin-preview dt {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 2px;
}

.zvv-admin-preview dd { font-size: 13px; color: rgba(255,255,255,0.8); margin: 0; }

/* ── Edit form layout ── */
.zvv-admin-edit-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}

.zvv-newsletter-layout {
    grid-template-columns: 1fr 360px;
}

.zvv-newsletter-note {
    background: rgba(124,58,237,0.06);
    border: 1px solid rgba(124,58,237,0.12);
    border-radius: 14px;
    padding: 14px 16px;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 14px;
}

.zvv-newsletter-post-select-wrap .select2-container {
    width: 100% !important;
}

.zvv-newsletter-post-select-wrap .select2-container--default .select2-selection--multiple {
    min-height: 56px;
    border: 1.5px solid rgba(124,58,237,0.16);
    border-radius: 14px;
    background: #fff;
    padding: 6px 10px 4px;
    box-shadow: none;
}

.zvv-newsletter-post-select-wrap .select2-container--default.select2-container--focus .select2-selection--multiple,
.zvv-newsletter-post-select-wrap .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.08);
}

.zvv-newsletter-post-select-wrap .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
}

.zvv-newsletter-post-select-wrap .select2-selection--multiple .select2-selection__choice {
    border: 1px solid rgba(124,58,237,0.12);
    border-radius: 999px;
    background: rgba(124,58,237,0.08);
    color: #5b21b6;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    margin: 0;
}

.zvv-newsletter-post-select-wrap .select2-selection--multiple .select2-selection__choice__remove {
    color: #7c3aed;
    margin-right: 6px;
}

.zvv-newsletter-post-select-wrap .select2-selection--multiple .select2-search--inline .select2-search__field {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #0f0a2e;
    margin-top: 3px;
}

/* Post picker dropdown: rich rows with thumbnail, category, author, country */
.zvv-newsletter-post-dropdown .select2-results__option { padding: 8px 10px; font-size: 13.5px; }
.zvv-newsletter-post-dropdown .select2-results__option--highlighted[aria-selected] { background: #7c3aed !important; }
.zvv-newsletter-post-dropdown .select2-results__option--highlighted[aria-selected] .zvv-nl2-post-option-body strong,
.zvv-newsletter-post-dropdown .select2-results__option--highlighted[aria-selected] .zvv-nl2-post-option-meta { color: #fff; }
.zvv-newsletter-post-dropdown .select2-results__option[aria-selected=true] { background: rgba(124,58,237,.1); }

.zvv-nl2-post-option { display: flex; align-items: center; gap: 10px; max-width: 100%; }
.zvv-nl2-post-option-art {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.zvv-nl2-post-option-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zvv-nl2-post-option-initial { color: #fff; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 14px; }
.zvv-nl2-post-option-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zvv-nl2-post-option-body strong {
    font-size: 13.5px;
    color: #0f0a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zvv-nl2-post-option-meta {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-bs-theme=dark] .zvv-newsletter-post-dropdown .select2-results__option { color: #d1d5db; }
[data-bs-theme=dark] .zvv-nl2-post-option-body strong { color: #f3f4f6; }

.zvv-newsletter-preview-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 10px;
}

.zvv-newsletter-preview-head span {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #7c3aed;
}

.zvv-newsletter-preview-head small {
    font-size: 12px;
    color: #9ca3af;
}

.zvv-newsletter-post-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    max-height: 420px;
    overflow: auto;
    padding-right: 4px;
}

.zvv-newsletter-preview-empty {
    border: 1px dashed rgba(124,58,237,0.18);
    border-radius: 14px;
    padding: 18px;
    font-size: 13px;
    color: #9ca3af;
    background: rgba(124,58,237,0.03);
}

.zvv-newsletter-preview-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid rgba(124,58,237,0.1);
    border-radius: 16px;
    padding: 12px 14px;
    text-decoration: none;
    background: #fff;
    transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}

.zvv-newsletter-preview-item:hover {
    border-color: #7c3aed;
    box-shadow: 0 8px 22px rgba(124,58,237,0.1);
    transform: translateY(-1px);
}

.zvv-newsletter-preview-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
}

.zvv-newsletter-preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.zvv-newsletter-preview-thumb-initial {
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 15px;
}

.zvv-newsletter-preview-item-body { min-width: 0; flex: 1; }

.zvv-newsletter-preview-item-body strong {
    display: block;
    color: #0f0a2e;
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zvv-newsletter-preview-item-body > span {
    display: block;
    color: #7c3aed;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zvv-newsletter-preview-item-body p {
    margin: 0;
    color: #6b7280;
    font-size: 12.5px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-bs-theme=dark] .zvv-newsletter-preview-item-body strong { color: #f3f4f6; }

.zvv-newsletter-campaign-body {
    font-size: 14px;
    line-height: 1.7;
    color: #374151;
}

.zvv-newsletter-campaign-picks {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(124,58,237,0.08);
}

.zvv-newsletter-campaign-picks-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #7c3aed;
    margin-bottom: 12px;
}

.zvv-newsletter-campaign-picks-list {
    display: grid;
    gap: 10px;
}

.zvv-newsletter-campaign-pick {
    display: block;
    border: 1px solid rgba(124,58,237,0.1);
    border-radius: 14px;
    padding: 12px 14px;
    text-decoration: none;
    background: #faf8ff;
    transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
}

.zvv-newsletter-campaign-pick:hover {
    border-color: #7c3aed;
    box-shadow: 0 8px 22px rgba(124,58,237,0.1);
    transform: translateY(-1px);
}

.zvv-newsletter-campaign-pick strong {
    display: block;
    color: #0f0a2e;
    font-size: 14px;
    line-height: 1.35;
    margin-bottom: 4px;
}

.zvv-newsletter-campaign-pick span {
    display: block;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════════
   NEWSLETTER — redesigned hero, tabs, tables (zvv-nl2-*)
══════════════════════════════════════════════════════════════ */
.zvv-nl2-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(79,70,229,0.05));
    border: 1px solid rgba(124,58,237,0.12);
    border-radius: 22px;
    padding: 24px 28px;
    margin-bottom: 22px;
}

.zvv-nl2-hero-intro { display: flex; align-items: center; gap: 16px; }

.zvv-nl2-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 8px 22px rgba(124,58,237,0.3);
}

.zvv-nl2-hero-title { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 800; color: #0f0a2e; margin: 0 0 2px; }
.zvv-nl2-hero-sub { font-size: 13px; color: #6b7280; margin: 0; max-width: 420px; }

.zvv-nl2-stat-strip { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.zvv-nl2-stat { display: flex; align-items: center; gap: 10px; padding: 0 20px; }
.zvv-nl2-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124,58,237,0.1);
    color: #7c3aed;
    font-size: 15px;
    flex-shrink: 0;
}
.zvv-nl2-stat-val { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 800; color: #0f0a2e; line-height: 1; }
.zvv-nl2-stat-lbl { font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.zvv-nl2-stat-div { width: 1px; height: 34px; background: rgba(124,58,237,0.12); }

@media (max-width: 900px) {
    .zvv-nl2-hero { flex-direction: column; align-items: flex-start; }
    .zvv-nl2-stat-strip { width: 100%; justify-content: space-between; }
    .zvv-nl2-stat { padding: 0 10px 0 0; }
    .zvv-nl2-stat-div { display: none; }
}

/* Subscriber toolbar */
.zvv-nl2-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.zvv-nl2-search-wrap { position: relative; flex: 1; min-width: 220px; }
.zvv-nl2-search-wrap i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #9ca3af; font-size: 14px; pointer-events: none;
}
.zvv-nl2-search-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border-radius: 999px;
    border: 1.5px solid rgba(124,58,237,0.15);
    font-size: 13.5px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: #fff;
    color: #374151;
}
.zvv-nl2-search-input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.08); }

/* Subscriber table card */
.zvv-nl2-table-card { background: #fff; border: 1px solid rgba(124,58,237,0.08); border-radius: 18px; overflow: hidden; }
.zvv-nl2-email-cell { display: flex; align-items: center; }
.zvv-nl2-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 800;
    margin-right: 10px;
}

/* Campaign list — card feed */
.zvv-nl2-camp-list { display: flex; flex-direction: column; gap: 10px; }
.zvv-nl2-camp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid rgba(124,58,237,0.08);
    border-radius: 16px;
    padding: 16px 18px;
    flex-wrap: wrap;
    transition: box-shadow .16s, border-color .16s;
}
.zvv-nl2-camp-item:hover { border-color: rgba(124,58,237,.25); box-shadow: 0 8px 22px rgba(124,58,237,.08); }
.zvv-nl2-camp-subject { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 14.5px; color: #0f0a2e; margin: 0 0 6px; }
.zvv-nl2-camp-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #6b7280; }
.zvv-nl2-camp-meta .zvv-admin-badge { font-size: 11px; }
.zvv-nl2-camp-empty { text-align: center; padding: 60px 20px; color: #9ca3af; }
.zvv-nl2-camp-empty i { font-size: 2rem; display: block; margin-bottom: 10px; }

/* Compose tab: lightweight info chips (replaces a second stat grid) */
.zvv-nl2-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.zvv-nl2-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid rgba(124,58,237,.1);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: #374151;
}
.zvv-nl2-chip i { color: #7c3aed; font-size: 14px; }
.zvv-nl2-chip strong { color: #0f0a2e; font-family: 'Sora', sans-serif; }

/* Campaign detail: email preview frame */
.zvv-nl2-email-frame { border: 1px solid rgba(124,58,237,0.1); border-radius: 16px; overflow: hidden; background: #fff; }
.zvv-nl2-email-frame-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #faf8ff;
    border-bottom: 1px solid rgba(124,58,237,0.08);
}
.zvv-nl2-email-frame-dot { width: 9px; height: 9px; border-radius: 50%; }
.zvv-nl2-email-frame-dot:nth-child(1) { background: #f87171; }
.zvv-nl2-email-frame-dot:nth-child(2) { background: #fbbf24; }
.zvv-nl2-email-frame-dot:nth-child(3) { background: #34d399; }
.zvv-nl2-email-frame-subject {
    margin-left: 10px;
    font-size: 12px;
    color: #9ca3af;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zvv-nl2-email-frame-body { padding: 22px 24px; }

[data-bs-theme=dark] .zvv-nl2-hero { background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(79,70,229,0.08)); border-color: rgba(189,147,249,0.15); }
[data-bs-theme=dark] .zvv-nl2-hero-title { color: #f3f4f6; }
[data-bs-theme=dark] .zvv-nl2-hero-sub { color: #9ca3af; }
[data-bs-theme=dark] .zvv-nl2-stat-val { color: #f3f4f6; }
[data-bs-theme=dark] .zvv-nl2-search-input { background: #16112e; color: #f3f4f6; border-color: rgba(124,58,237,.3); }
[data-bs-theme=dark] .zvv-nl2-table-card,
[data-bs-theme=dark] .zvv-nl2-camp-item,
[data-bs-theme=dark] .zvv-nl2-email-frame { background: #140e30; border-color: rgba(189,147,249,0.1); }
[data-bs-theme=dark] .zvv-nl2-camp-subject { color: #f3f4f6; }
[data-bs-theme=dark] .zvv-nl2-chip { background: #140e30; border-color: rgba(189,147,249,.15); color: #e5e7eb; }
[data-bs-theme=dark] .zvv-nl2-chip strong { color: #f3f4f6; }
[data-bs-theme=dark] .zvv-nl2-email-frame-bar { background: #1a1440; border-color: rgba(189,147,249,0.1); }

.zvv-admin-section-label {
    font-size: 11px;
    font-weight: 700;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}

.zvv-admin-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(124,58,237,0.1);
}

.zvv-admin-form-grid { display: grid; gap: 14px; }
.zvv-admin-fg-2  { grid-template-columns: 1fr 1fr; }
.zvv-admin-fg-3  { grid-template-columns: 1fr 1fr 1fr; }
.zvv-admin-fg-245 { grid-template-columns: 2fr 2fr 1fr; }
.zvv-admin-fg-full { grid-template-columns: 1fr; }

/* ── Featured posts pool (editor-picks.php) ── */
.zvv-featured-pool-grid { display: flex; flex-direction: column; gap: 10px; }

.zvv-featured-pool-row {
    display: grid;
    grid-template-columns: 40px 1fr 150px;
    gap: 10px;
    align-items: center;
}

.zvv-featured-pool-slot {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #7c3aed;
    text-align: center;
}

.zvv-featured-pool-weight {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zvv-featured-weight-input { text-align: center; padding: 8px 6px; }

.zvv-featured-pool-pct {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    min-width: 42px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .zvv-featured-pool-row { grid-template-columns: 32px 1fr; }
    .zvv-featured-pool-weight { grid-column: 1 / -1; padding-left: 42px; }
}

.zvv-admin-form-group { display: flex; flex-direction: column; gap: 6px; }

.zvv-admin-form-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.zvv-admin-form-input,
.zvv-admin-form-select {
    padding: 10px 13px;
    border: 1.5px solid rgba(124,58,237,0.14);
    border-radius: 10px;
    font-size: 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #0f0a2e;
    background: #faf8ff;
    outline: none;
    transition: border-color 0.17s;
    width: 100%;
}

.zvv-admin-form-input:focus,
.zvv-admin-form-select:focus {
    border-color: #7c3aed;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.08);
}

.zvv-admin-form-hint { font-size: 12px; color: #9ca3af; }

/* ── Active filter banner ── */
.zvv-admin-active-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(124,58,237,0.07);
    border: 1px solid rgba(124,58,237,0.15);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 14px;
}

.zvv-admin-active-filter a {
    font-weight: 600;
    color: #7c3aed;
    text-decoration: none;
    font-size: 12px;
}

/* ── Empty state ── */
.zvv-admin-empty {
    text-align: center;
    padding: 48px 20px;
    color: #9ca3af;
}

.zvv-admin-empty i {
    font-size: 36px;
    margin-bottom: 12px;
    color: #d8b4fe;
    display: block;
}

/* ── Post thumbnail ── */
.zvv-admin-post-thumb {
    width: 52px;
    height: 38px;
    object-fit: cover;
    border-radius: 7px;
    flex-shrink: 0;
}

.zvv-admin-post-thumb-ph {
    width: 52px;
    height: 38px;
    background: rgba(124,58,237,0.07);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #bd93f9;
    flex-shrink: 0;
}

/* ── Post edit preview ── */
.zvv-admin-edit-preview {
    aspect-ratio: 16/9;
    border-radius: 10px;
    background: rgba(124,58,237,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: #bd93f9;
    overflow: hidden;
    border: 2px dashed rgba(124,58,237,0.15);
    margin: 14px 0;
}

.zvv-admin-edit-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Pagination ── */
.zvv-admin-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    padding: 22px 0 0;
    flex-wrap: wrap;
}

.zvv-admin-page-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: #374151;
    border: 1.5px solid rgba(124,58,237,0.1);
    background: #fff;
    transition: all 0.14s;
}

.zvv-admin-page-link:hover { border-color: #7c3aed; color: #7c3aed; }

.zvv-admin-page-link.active {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    border-color: #7c3aed;
    color: #fff;
}

.zvv-admin-page-link.disabled { opacity: 0.4; pointer-events: none; }

/* ── Category add form ── */
.zvv-admin-add-form {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(124,58,237,0.07);
}

.zvv-admin-add-input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid rgba(124,58,237,0.15);
    border-radius: 10px;
    font-size: 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #0f0a2e;
    background: #faf8ff;
    outline: none;
    transition: border-color 0.17s;
}

.zvv-admin-add-input:focus {
    border-color: #7c3aed;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.08);
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .zvv-admin-sidebar { transform: translateX(-100%); }
    .zvv-admin-sidebar.open { transform: translateX(0); }
    .zvv-admin-main { margin-left: 0; padding-top: 64px; }
    .zvv-admin-mob-toggle { display: flex; }
    .zvv-admin-topbar { padding: 20px 20px 0; }
    .zvv-admin-content { padding: 16px 20px 40px; }
    .zvv-admin-stats { grid-template-columns: 1fr 1fr; }
    .zvv-admin-settings-layout { grid-template-columns: 1fr; }
    .zvv-admin-edit-layout { grid-template-columns: 1fr; }
    .zvv-newsletter-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .zvv-admin-stats { grid-template-columns: 1fr 1fr; }
    .zvv-admin-fg-2, .zvv-admin-fg-3, .zvv-admin-fg-245 { grid-template-columns: 1fr; }
    .zvv-admin-filter { flex-direction: column; align-items: stretch; }
    .zvv-admin-filter .select2-container { width: 100% !important; }
    .zvv-admin-search-wrap { max-width: 100%; }
    .zvv-admin-settings-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .zvv-admin-settings-ctrl { width: 100%; }
    .zvv-admin-add-form { flex-direction: column; align-items: stretch; }
}

/* ══════════════════════════════════════════════════════════════
   ZVV MESSAGES  (zvv-msg-*)
══════════════════════════════════════════════════════════════ */

.zvv-msg-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}

/* Message list */
.zvv-msg-list {
    display: flex;
    flex-direction: column;
}

.zvv-msg-row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px 22px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(124,58,237,0.05);
    transition: background 0.14s;
    position: relative;
}

.zvv-msg-row:last-child { border-bottom: none; }

.zvv-msg-row:hover { background: rgba(124,58,237,0.03); }

.zvv-msg-row.zvv-msg-unread { background: rgba(124,58,237,0.04); }

.zvv-msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zvv-msg-body { flex: 1; min-width: 0; }

.zvv-msg-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.zvv-msg-who { font-size: 13px; color: #6b7280; }
.zvv-msg-who strong { color: #0f0a2e; font-weight: 600; }

.zvv-msg-time {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

.zvv-msg-subject {
    font-size: 14px;
    font-weight: 600;
    color: #0f0a2e;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zvv-msg-unread .zvv-msg-subject { color: #7c3aed; }

.zvv-msg-preview {
    font-size: 13px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zvv-msg-dot {
    width: 8px;
    height: 8px;
    background: #7c3aed;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
    box-shadow: 0 0 0 2px rgba(124,58,237,0.2);
}

/* Message tabs */
.zvv-msg-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    transition: background 0.14s, color 0.14s;
}

.zvv-msg-tab:hover { background: rgba(124,58,237,0.06); color: #7c3aed; }
.zvv-msg-tab.active { background: rgba(124,58,237,0.1); color: #7c3aed; }

/* Unread badge (shared across dash sidebar + messages page) */
.zvv-dash-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 20px;
    min-width: 20px;
    box-shadow: 0 2px 6px rgba(124,58,237,0.4);
}

/* Primary action button for dashboard pages */
.zvv-dash-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(124,58,237,0.35);
    transition: opacity 0.14s, transform 0.12s;
}

.zvv-dash-action-btn:hover { opacity: 0.88; transform: translateY(-1px); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   MY POSTS PAGE  (zvv-myposts-*)
══════════════════════════════════════════════════════════════ */

/* Stats row */
.zvv-myposts-stats {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
}

.zvv-mypost-stat {
    flex: 1;
    background: #fff;
    border: 1.5px solid rgba(124,58,237,0.1);
    border-radius: 14px;
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
}

.zvv-mypost-stat::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7c3aed, #4f46e5);
    border-radius: 14px 14px 0 0;
}

.zvv-mypost-stat-pub::after { background: linear-gradient(90deg, #059669, #10b981); }
.zvv-mypost-stat-draft::after { background: linear-gradient(90deg, #d97706, #f59e0b); }
.zvv-mypost-stat-autosave::after { background: linear-gradient(90deg, #6272a4, #bd93f9); }

.zvv-mypost-stat-num {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #0f0a2e;
    line-height: 1;
    margin-bottom: 4px;
}

.zvv-mypost-stat-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Filter bar */
.zvv-myposts-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.zvv-msg-tab-group {
    display: flex;
    gap: 4px;
    background: rgba(124,58,237,0.05);
    border-radius: 10px;
    padding: 4px;
}

.zvv-tab-count {
    background: rgba(124,58,237,0.12);
    color: #7c3aed;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 2px;
}

.zvv-msg-tab.active .zvv-tab-count {
    background: rgba(255,255,255,0.3);
    color: #fff;
}

.zvv-myposts-filter-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    flex-wrap: wrap;
}

.zvv-myposts-search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}

.zvv-myposts-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #bd93f9;
    font-size: 14px;
    pointer-events: none;
}

.zvv-myposts-search {
    width: 100%;
    padding: 9px 14px 9px 38px;
    border: 1.5px solid rgba(124,58,237,0.14);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: #0f0a2e;
    outline: none;
    transition: border-color 0.14s;
}

.zvv-myposts-search:focus { border-color: #7c3aed; }

.zvv-myposts-select {
    padding: 9px 14px;
    border: 1.5px solid rgba(124,58,237,0.14);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: #0f0a2e;
    outline: none;
    cursor: pointer;
    transition: border-color 0.14s;
}

.zvv-myposts-select:focus { border-color: #7c3aed; }

.zvv-myposts-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #9ca3af;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.14s;
}

.zvv-myposts-clear:hover { color: #7c3aed; }

/* Post rows */
.zvv-myposts-list {
    display: flex;
    flex-direction: column;
}

.zvv-mypost-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(124,58,237,0.05);
    transition: background 0.14s;
}

.zvv-mypost-row:last-child { border-bottom: none; }
.zvv-mypost-row:hover { background: rgba(124,58,237,0.02); }

.zvv-mypost-thumb {
    width: 72px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #7c3aed22, #4f46e522);
    display: flex;
    align-items: center;
    justify-content: center;
}

.zvv-mypost-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zvv-mypost-thumb span {
    font-size: 22px;
    font-weight: 800;
    color: #7c3aed;
    font-family: 'Sora', sans-serif;
}

.zvv-mypost-content { flex: 1; min-width: 0; }

.zvv-mypost-title-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.zvv-mypost-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f0a2e;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.35;
    transition: color 0.14s;
}

a.zvv-mypost-title:hover { color: #7c3aed; }
/* draft titles are still links — muted colour to signal not-yet-live */
a.zvv-mypost-title.zvv-mypost-title-draft { color: #6b7280; }
a.zvv-mypost-title.zvv-mypost-title-draft:hover { color: #7c3aed; }

/* "Ratings disabled during draft" note in post.php */
.zvv-draft-preview-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 32px 0 0;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(124,58,237,0.2);
    background: #f0eeff;
    color: #4c1d95;
    font-size: 0.88rem;
    font-weight: 600;
}
.zvv-draft-preview-note i { font-size: 1.1rem; color: #7c3aed; flex-shrink: 0; }
[data-bs-theme="dark"] .zvv-draft-preview-note {
    background: rgba(124,58,237,0.1);
    border-color: rgba(124,58,237,0.25);
    color: #bd93f9;
}

.zvv-mypost-ext-icon {
    font-size: 11px;
    opacity: 0.5;
}

.zvv-mypost-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.zvv-mypost-badge-pub {
    background: rgba(5,150,105,0.1);
    color: #059669;
}

.zvv-mypost-badge-draft {
    background: rgba(217,119,6,0.1);
    color: #d97706;
}

.zvv-mypost-badge-autosave {
    background: rgba(98,114,164,0.12);
    color: #6272a4;
}
[data-bs-theme="dark"] .zvv-mypost-badge-autosave {
    background: rgba(189,147,249,0.12);
    color: #bd93f9;
}

.zvv-mypost-action-del {
    color: #dc2626;
    border-color: rgba(220,38,38,0.3);
}
.zvv-mypost-action-del:hover {
    background: rgba(220,38,38,0.07);
}

.zvv-mypost-excerpt {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zvv-mypost-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
}

.zvv-mypost-meta span { display: flex; align-items: center; gap: 5px; }

.zvv-mypost-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.zvv-mypost-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 1.5px solid rgba(124,58,237,0.2);
    color: #7c3aed;
    background: rgba(124,58,237,0.05);
    transition: background 0.14s, border-color 0.14s;
}

.zvv-mypost-action-btn:hover { background: rgba(124,58,237,0.12); border-color: rgba(124,58,237,0.35); color: #7c3aed; }

.zvv-mypost-action-view {
    border-color: rgba(5,150,105,0.2);
    color: #059669;
    background: rgba(5,150,105,0.05);
}

.zvv-mypost-action-view:hover { background: rgba(5,150,105,0.12); border-color: rgba(5,150,105,0.35); color: #059669; }

/* Dark mode */
[data-bs-theme="dark"] .zvv-mypost-stat { background: rgba(189,147,249,0.04); border-color: rgba(189,147,249,0.14); }
[data-bs-theme="dark"] .zvv-mypost-stat-num { color: #f0eeff; }
[data-bs-theme="dark"] .zvv-myposts-search,
[data-bs-theme="dark"] .zvv-myposts-select { background: rgba(189,147,249,0.07); color: #f0eeff; border-color: rgba(189,147,249,0.18); }
[data-bs-theme="dark"] .zvv-mypost-title { color: #f0eeff; }
[data-bs-theme="dark"] .zvv-mypost-row:hover { background: rgba(189,147,249,0.04); }

@media (max-width: 960px) {
    .zvv-msg-layout { grid-template-columns: 1fr; }
    .zvv-myposts-stats { flex-wrap: wrap; }
    .zvv-myposts-filter-bar { flex-direction: column; align-items: stretch; }
    .zvv-myposts-filter-right { flex-wrap: wrap; }
}

@media (max-width: 600px) {
    .zvv-mypost-row { flex-wrap: wrap; }
    .zvv-mypost-actions { flex-direction: row; flex-wrap: wrap; }
    .zvv-myposts-stats { display: grid; grid-template-columns: 1fr 1fr; }
    .zvv-msg-row { padding: 14px 16px; }
}

@media (max-width: 600px) {
    .zvv-msg-row { padding: 14px 16px; }
}

/* ══════════════════════════════════════════════════════════════
   PROFILE PAGE  (zvv-profile-*)
══════════════════════════════════════════════════════════════ */

.zvv-profile-page-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.zvv-profile-author-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #7c3aed;
    border: 1.5px solid rgba(124,58,237,0.25);
    background: rgba(124,58,237,0.05);
    text-decoration: none;
    transition: background 0.14s, border-color 0.14s;
}

.zvv-profile-author-link:hover {
    background: rgba(124,58,237,0.12);
    border-color: rgba(124,58,237,0.4);
    color: #6d28d9;
}

/* ── Two-column grid ── */
.zvv-profile-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}

/* ── Identity card (left column) ── */
.zvv-profile-id-card {
    background: var(--zvv-panel);
    border: 1px solid rgba(124,58,237,0.1);
    border-radius: 20px;
    overflow: hidden;
    position: sticky;
    top: 80px;
}

.zvv-profile-id-banner {
    height: 72px;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 60%, #6366f1 100%);
    position: relative;
}

.zvv-profile-id-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Ccircle cx='20' cy='20' r='10'/%3E%3C/g%3E%3C/svg%3E");
}

.zvv-profile-id-body {
    padding: 0 20px 24px;
    text-align: center;
}

/* The render_profile_avatar span becomes the circle */
.zvv-profile-avatar-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 4px solid var(--zvv-panel);
    margin: -41px auto 14px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 20px rgba(124,58,237,0.35);
}

.zvv-profile-avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.zvv-profile-id-name {
    font-size: 1.05rem;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    color: var(--zvv-ink);
    margin: 0 0 5px;
}

.zvv-profile-id-sub {
    font-size: 12px;
    color: var(--zvv-muted);
    margin: 0 0 18px;
    word-break: break-all;
}

.zvv-profile-id-stats {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 16px;
}

.zvv-profile-id-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--zvv-ink);
}

.zvv-profile-id-stat i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(124,58,237,0.08);
    color: #7c3aed;
    font-size: 13px;
    flex-shrink: 0;
}

.zvv-profile-id-link {
    color: inherit;
    text-decoration: underline;
    font-size: 12px;
    word-break: break-all;
}

.zvv-profile-2fa-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
}

.zvv-profile-2fa-badge.on {
    background: rgba(22,163,74,0.1);
    color: #16a34a;
    border: 1px solid rgba(22,163,74,0.22);
}

.zvv-profile-2fa-badge.off {
    background: rgba(239,68,68,0.08);
    color: #dc2626;
    border: 1px solid rgba(239,68,68,0.18);
}

.zvv-profile-wallet-strip {
    background: rgba(124,58,237,0.06);
    border: 1px solid rgba(124,58,237,0.14);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.zvv-profile-wallet-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--zvv-muted);
}

.zvv-profile-wallet-strip code {
    font-size: 10.5px;
    color: #7c3aed;
    word-break: break-all;
    font-family: 'Space Grotesk', monospace;
    line-height: 1.5;
}

.zvv-profile-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    background: rgba(124,58,237,0.1);
    color: #7c3aed;
    border: 1px solid rgba(124,58,237,0.2);
    cursor: pointer;
    transition: background 0.13s;
    align-self: flex-start;
    font-family: inherit;
}

.zvv-profile-copy-btn:hover { background: rgba(124,58,237,0.18); }

/* ── Right column: form panels ── */
.zvv-profile-forms { display: flex; flex-direction: column; }

.zvv-profile-panel {
    margin-bottom: 20px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(124,58,237,0.08) !important;
    overflow: hidden;
}

.zvv-profile-panel-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(124,58,237,0.07);
}

.zvv-profile-panel-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(124,58,237,0.14), rgba(79,70,229,0.1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7c3aed;
    font-size: 16px;
    flex-shrink: 0;
}

.zvv-profile-panel-head h3 {
    font-size: 14.5px;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    color: var(--zvv-ink);
    margin: 0 0 2px;
}

.zvv-profile-panel-head p {
    font-size: 12px;
    color: var(--zvv-muted);
    margin: 0;
}

/* ── Form field grid ── */
.zvv-profile-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px 22px;
}

.zvv-pf-full { grid-column: 1 / -1; }

.zvv-profile-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--zvv-muted);
    margin-bottom: 6px;
}

.zvv-profile-optional {
    font-size: 10px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.65;
}

.zvv-profile-input {
    display: block;
    width: 100%;
    padding: 10px 13px;
    border-radius: 10px;
    border: 1.5px solid rgba(124,58,237,0.15);
    background: var(--zvv-bg);
    color: var(--zvv-ink);
    font-size: 13.5px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.zvv-profile-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}

.zvv-profile-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237c3aed' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px;
    cursor: pointer;
}

.zvv-profile-textarea { min-height: 120px; resize: vertical; }

.zvv-profile-hint {
    font-size: 11.5px;
    color: var(--zvv-muted);
    margin: 5px 0 0;
}

/* ── Photo upload strip ── */
.zvv-profile-photo-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(124,58,237,0.07);
}

.zvv-profile-photo-thumb {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    flex-shrink: 0;
}

.zvv-profile-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zvv-profile-file-input {
    display: block;
    width: 100%;
    font-size: 13px;
    color: var(--zvv-ink);
    padding: 6px 0;
    cursor: pointer;
}

/* ── Save bar ── */
.zvv-profile-save-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 4px 0 20px;
}

.zvv-profile-cancel-link {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--zvv-muted);
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 10px;
    transition: background 0.13s, color 0.13s;
}

.zvv-profile-cancel-link:hover {
    background: rgba(124,58,237,0.07);
    color: var(--zvv-ink);
}

/* ── 2FA section ── */
.zvv-profile-panel-body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.zvv-profile-2fa-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(22,163,74,0.07);
    border: 1px solid rgba(22,163,74,0.18);
    border-radius: 12px;
    font-size: 13.5px;
    color: var(--zvv-ink);
}

.zvv-profile-2fa-info p { margin: 0; line-height: 1.5; }

/* ── 2FA setup redesign ── */
.zvv-2fa-setup {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Steps list */
.zvv-2fa-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zvv-2fa-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.zvv-2fa-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    flex-shrink: 0;
    margin-top: 1px;
}

.zvv-2fa-steps li > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

.zvv-2fa-steps li strong {
    font-size: 13.5px;
    color: var(--zvv-ink);
    font-weight: 700;
}

.zvv-2fa-steps li span:not(.zvv-2fa-step-num) {
    font-size: 12.5px;
    color: var(--zvv-muted);
    line-height: 1.45;
}

/* QR card */
.zvv-2fa-qr-card {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    background: rgba(124,58,237,0.04);
    border: 1.5px dashed rgba(124,58,237,0.22);
    border-radius: 16px;
}

/* .two-factor-qr already provides the white box — wrap is just a flex anchor */
.zvv-2fa-qr-wrap {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}

.zvv-2fa-qr-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.zvv-2fa-qr-icon {
    font-size: 28px;
    color: #7c3aed;
    opacity: 0.5;
    line-height: 1;
}

.zvv-2fa-qr-meta strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--zvv-ink);
}

.zvv-2fa-qr-meta span {
    font-size: 12.5px;
    color: var(--zvv-muted);
}

/* Manual key block */
.zvv-2fa-key-block {
    padding: 14px 16px;
    background: rgba(124,58,237,0.04);
    border: 1px solid rgba(124,58,237,0.12);
    border-radius: 12px;
}

/* Confirm block */
.zvv-2fa-confirm-block {
    padding: 18px 20px;
    background: rgba(124,58,237,0.04);
    border: 1px solid rgba(124,58,237,0.12);
    border-radius: 14px;
}

.zvv-2fa-confirm-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #7c3aed;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(124,58,237,0.1);
}

.zvv-2fa-confirm-head i { font-size: 16px; }

.zvv-profile-setup-key {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(124,58,237,0.05);
    border: 1px solid rgba(124,58,237,0.15);
    border-radius: 10px;
}

.zvv-profile-setup-key code {
    flex: 1;
    font-family: 'Space Grotesk', monospace;
    font-size: 13px;
    color: #7c3aed;
    word-break: break-all;
    min-width: 0;
}

.zvv-profile-danger-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    background: rgba(239,68,68,0.07);
    color: #dc2626;
    border: 1.5px solid rgba(239,68,68,0.25);
    cursor: pointer;
    transition: background 0.13s, border-color 0.13s;
    font-family: inherit;
}

.zvv-profile-danger-btn:hover {
    background: rgba(239,68,68,0.14);
    border-color: rgba(239,68,68,0.4);
}

.zvv-profile-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--zvv-muted);
    border: 1px solid var(--zvv-line);
    background: none;
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
    font-family: inherit;
}

.zvv-profile-ghost-btn:hover {
    background: rgba(124,58,237,0.07);
    color: #7c3aed;
    border-color: rgba(124,58,237,0.25);
}

.zvv-profile-reset-key-row {
    padding-top: 4px;
    border-top: 1px solid rgba(124,58,237,0.07);
}

/* ── Dark mode ── */
[data-bs-theme="dark"] .zvv-profile-id-card {
    border-color: rgba(189,147,249,0.18);
}

[data-bs-theme="dark"] .zvv-profile-input {
    border-color: rgba(189,147,249,0.18);
    background: rgba(255,255,255,0.04);
    color: #f8f8f2;
}

[data-bs-theme="dark"] .zvv-profile-input:focus {
    border-color: #bd93f9;
    box-shadow: 0 0 0 3px rgba(189,147,249,0.14);
}

[data-bs-theme="dark"] .zvv-profile-wallet-strip {
    background: rgba(124,58,237,0.1);
    border-color: rgba(167,139,250,0.2);
}

[data-bs-theme="dark"] .zvv-profile-setup-key {
    background: rgba(124,58,237,0.1);
    border-color: rgba(167,139,250,0.2);
}

[data-bs-theme="dark"] .zvv-2fa-qr-card,
[data-bs-theme="dark"] .zvv-2fa-key-block,
[data-bs-theme="dark"] .zvv-2fa-confirm-block {
    background: rgba(124,58,237,0.08);
    border-color: rgba(167,139,250,0.18);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .zvv-profile-grid { grid-template-columns: 240px 1fr; }
}

@media (max-width: 860px) {
    .zvv-profile-grid { grid-template-columns: 1fr; }
    .zvv-profile-id-card { position: static; }
    .zvv-profile-id-banner { height: 56px; }
}

@media (max-width: 600px) {
    .zvv-profile-fields { grid-template-columns: 1fr; }
    .zvv-pf-full { grid-column: 1; }
}

/* ══════════════════════════════════════════════════════════════
   AUTHOR PAGE  (zvv-author-*)
══════════════════════════════════════════════════════════════ */

.zvv-author-page { background: var(--zvv-bg); }

/* ── Hero ── */
.zvv-author-hero {
    position: relative;
    background: linear-gradient(160deg, #0f0a2e 0%, #1a0f4a 45%, #130b38 100%);
    overflow: hidden;
    padding: 64px 0 0;
}

/* Ambient glow blobs */
.zvv-author-hero-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.zvv-author-hero-glow::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,0.28) 0%, transparent 70%);
    top: -160px;
    left: -120px;
}

.zvv-author-hero-glow::after {
    content: '';
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 70%);
    bottom: 0;
    right: -60px;
}

.zvv-author-hero-inner {
    position: relative;
    z-index: 1;
}

/* Avatar + copy row */
.zvv-author-hero-main {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    padding-bottom: 48px;
}

/* Avatar rendered by render_profile_avatar() */
.zvv-author-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.15);
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 40px;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 12px 40px rgba(124,58,237,0.45), 0 0 0 1px rgba(124,58,237,0.3);
}

.zvv-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zvv-author-hero-copy { flex: 1; min-width: 0; }

.zvv-author-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #bd93f9;
    margin-bottom: 10px;
}

.zvv-author-name {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.zvv-author-role {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(196,181,253,0.75);
    margin: 0 0 18px;
}

.zvv-author-bio {
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255,255,255,0.65);
    margin-bottom: 20px;
    max-width: 640px;
}

.zvv-author-bio p { margin-bottom: 0.5em; }
.zvv-author-bio p:last-child { margin-bottom: 0; }

/* Meta chips row */
.zvv-author-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.zvv-author-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(189,147,249,0.9);
    background: rgba(124,58,237,0.15);
    border: 1px solid rgba(124,58,237,0.25);
}

.zvv-author-meta-chip i { font-size: 11px; color: #bd93f9; }

/* Action buttons */
.zvv-author-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.zvv-author-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(124,58,237,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: opacity 0.14s, transform 0.12s;
}

button.zvv-author-btn,
button.zvv-author-btn-ghost {
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.zvv-author-btn:hover { opacity: 0.88; transform: translateY(-1px); color: #fff; }

.zvv-author-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    color: rgba(196,181,253,0.85);
    border: 1.5px solid rgba(124,58,237,0.35);
    background: rgba(124,58,237,0.1);
    text-decoration: none;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.zvv-author-btn-ghost:hover {
    background: rgba(124,58,237,0.2);
    border-color: rgba(124,58,237,0.55);
    color: #fff;
}

button.zvv-author-btn-ghost {
    border: 1.5px solid rgba(124,58,237,0.35);
}

.zvv-author-message-modal .modal-content {
    border: 1px solid rgba(124,58,237,0.16);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(15,10,46,0.24);
}

.zvv-author-message-modal .modal-header,
.zvv-author-message-modal .modal-footer {
    border-color: rgba(124,58,237,0.1);
    background: linear-gradient(135deg, rgba(124,58,237,0.05), rgba(79,70,229,0.02));
}

.zvv-author-message-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
}

.zvv-author-message-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.zvv-author-message-avatar {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-weight: 800;
    flex-shrink: 0;
}

.zvv-author-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zvv-author-message-modal .modal-title {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--zvv-ink, #1a0f4a);
    margin: 2px 0 0;
}

.zvv-author-message-errors {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 12px;
    color: #7f1d1d;
    font-size: 13px;
}

[data-bs-theme="dark"] .zvv-author-message-modal .modal-content {
    background: #1f2030;
    border-color: rgba(189,147,249,0.18);
}

[data-bs-theme="dark"] .zvv-author-message-modal .modal-header,
[data-bs-theme="dark"] .zvv-author-message-modal .modal-footer {
    background: rgba(124,58,237,0.07);
    border-color: rgba(189,147,249,0.12);
}

[data-bs-theme="dark"] .zvv-author-message-modal .modal-title {
    color: #f8f8f2;
}

[data-bs-theme="dark"] .zvv-author-message-modal .btn-close {
    filter: invert(1) grayscale(100%);
}

[data-bs-theme="dark"] .zvv-author-message-errors {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.24);
    color: #fecaca;
}

/* Stats strip */
.zvv-author-stats-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    background: rgba(255,255,255,0.04);
    border-top: 1px solid rgba(189,147,249,0.1);
    margin-top: 0;
}

.zvv-author-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 20px 32px;
    flex: 1;
    min-width: 100px;
}

.zvv-author-stat strong {
    font-family: 'Sora', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.zvv-author-stat span {
    font-size: 11px;
    font-weight: 600;
    color: rgba(189,147,249,0.65);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    white-space: nowrap;
}

.zvv-author-stat-div {
    width: 1px;
    height: 40px;
    background: rgba(189,147,249,0.1);
    flex-shrink: 0;
}

/* ── Main body below hero ── */
.zvv-author-body {
    padding: 48px 0 64px;
}

.zvv-author-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: start;
}

/* Section header */
.zvv-author-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.zvv-author-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(124,58,237,0.1);
    color: #7c3aed;
    border: 1px solid rgba(124,58,237,0.2);
}

/* Post card grid */
.zvv-author-post-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.zvv-author-card {
    background: var(--zvv-panel);
    border: 1px solid rgba(124,58,237,0.08);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s, box-shadow 0.18s;
}

.zvv-author-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(124,58,237,0.12);
}

.zvv-author-card-art {
    position: relative;
    display: block;
    height: 172px;
    background: linear-gradient(135deg, #1a0f4a, #0f0a2e);
    overflow: hidden;
    flex-shrink: 0;
}

.zvv-author-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.zvv-author-card:hover .zvv-author-card-art img { transform: scale(1.04); }

.zvv-author-card-initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sora', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: rgba(255,255,255,0.2);
    background: linear-gradient(135deg, #1a0f4a 0%, #130b38 100%);
}

.zvv-author-card-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,6,30,0.6) 0%, transparent 60%);
    pointer-events: none;
}

.zvv-author-card-time {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    gap: 4px;
}

.zvv-author-card-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.zvv-author-card-title {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    margin: 0;
    color: var(--zvv-ink);
}

.zvv-author-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.14s;
}

.zvv-author-card-title a:hover { color: #7c3aed; }

.zvv-author-card-excerpt {
    font-size: 13px;
    color: var(--zvv-muted);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zvv-author-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(124,58,237,0.07);
}

.zvv-author-card-date {
    font-size: 12px;
    color: var(--zvv-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.zvv-author-card-read {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 800;
    color: #7c3aed;
    text-decoration: none;
    transition: gap 0.14s;
}

.zvv-author-card-read:hover { gap: 8px; color: #6d28d9; }

/* ── Sidebar ── */
.zvv-author-sidebar { display: flex; flex-direction: column; gap: 20px; }

.zvv-author-who-card { text-align: center; }

.zvv-author-who-avatar-wrap {
    display: flex;
    justify-content: center;
    margin: 8px 0 14px;
}

.zvv-author-who-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(124,58,237,0.3);
}

.zvv-author-who-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zvv-author-who-name {
    display: block;
    font-size: 15px;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    color: var(--zvv-ink);
    margin-bottom: 4px;
}

.zvv-author-who-role {
    display: block;
    font-size: 12px;
    color: var(--zvv-muted);
    font-weight: 600;
    margin-bottom: 6px;
}

.zvv-author-who-loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--zvv-muted);
}

/* ── Dark mode ── */
[data-bs-theme="dark"] .zvv-author-card {
    border-color: rgba(189,147,249,0.1);
    background: #140e30;
}

[data-bs-theme="dark"] .zvv-author-card:hover {
    box-shadow: 0 12px 36px rgba(124,58,237,0.2);
}

[data-bs-theme="dark"] .zvv-author-card-footer {
    border-top-color: rgba(189,147,249,0.1);
}

/* ── Responsive ── */
@media (max-width: 1040px) {
    .zvv-author-layout { grid-template-columns: 1fr 260px; gap: 24px; }
    .zvv-author-post-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .zvv-author-layout { grid-template-columns: 1fr; }
    .zvv-author-sidebar { display: grid; grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
    .zvv-author-hero-main { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
    .zvv-author-avatar { width: 96px; height: 96px; font-size: 32px; }
    .zvv-author-meta { justify-content: center; }
    .zvv-author-actions { justify-content: center; }
    .zvv-author-stats-strip { flex-wrap: wrap; }
    .zvv-author-stat { padding: 14px 20px; min-width: 50%; }
    .zvv-author-stat-div { display: none; }
    .zvv-author-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .zvv-author-hero { padding-top: 40px; }
    .zvv-author-post-grid { gap: 16px; }
}

/* Hidden post card (JS load-more) */
.zvv-author-card-hidden { display: none !important; }

/* Load more button */
.zvv-author-load-more-wrap {
    display: flex;
    justify-content: center;
    padding-top: 32px;
}

.zvv-author-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Sora', sans-serif;
    color: #7c3aed;
    background: rgba(124,58,237,0.07);
    border: 1.5px solid rgba(124,58,237,0.2);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
}

.zvv-author-load-more-btn:hover {
    background: rgba(124,58,237,0.14);
    border-color: rgba(124,58,237,0.4);
    transform: translateY(-1px);
}

.zvv-author-load-more-remaining {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background: rgba(124,58,237,0.12);
    color: #6d28d9;
}

/* Bio in sidebar who-card */
.zvv-author-who-bio {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--zvv-muted);
    text-align: left;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zvv-author-who-bio p { margin-bottom: 0.4em; }
.zvv-author-who-bio p:last-child { margin-bottom: 0; }

/* Author bio sidebar card */
.zvv-author-bio-card { }

.zvv-author-bio-body {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--zvv-ink);
    word-break: break-word;
}

/* Summernote prose resets inside bio card */
.zvv-author-bio-body p          { margin-bottom: 0.65em; }
.zvv-author-bio-body p:last-child { margin-bottom: 0; }
.zvv-author-bio-body ul,
.zvv-author-bio-body ol         { padding-left: 1.25rem; margin-bottom: 0.65em; }
.zvv-author-bio-body li         { margin-bottom: 0.2em; }
.zvv-author-bio-body strong,
.zvv-author-bio-body b          { font-weight: 700; color: var(--zvv-ink); }
.zvv-author-bio-body a          { color: #7c3aed; text-decoration: underline; text-underline-offset: 2px; }
.zvv-author-bio-body a:hover    { color: #6d28d9; }
.zvv-author-bio-body blockquote {
    border-left: 3px solid rgba(124,58,237,0.4);
    padding-left: 12px;
    margin: 0.5em 0;
    color: var(--zvv-muted);
    font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   PROFILE FIELD ICONS  (zvv-pf-*)
══════════════════════════════════════════════════════════════ */

.zvv-pf-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.zvv-pf-icon {
    position: absolute;
    left: 13px;
    color: #bd93f9;
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
    flex-shrink: 0;
}

.zvv-pf-has-icon { padding-left: 40px !important; }

/* Chevron for native selects with icon */
.zvv-pf-wrap .zvv-profile-select { padding-left: 40px !important; }

/* ══════════════════════════════════════════════════════════════
   COUNTRY SELECT WITH FLAGS  (zvv-country-*)
══════════════════════════════════════════════════════════════ */

.zvv-country-select {
    position: relative;
}

/* Trigger button — looks like an input */
.zvv-country-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    background: var(--zvv-bg, #f5f3ff);
    border: 1.5px solid #d1c6ff;
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--zvv-ink, #1a0f4a);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.zvv-country-trigger:hover,
.zvv-country-select.open .zvv-country-trigger {
    border-color: #7c3aed;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}

.zvv-ct-flag { font-size: 20px; line-height: 1; flex-shrink: 0; }

.zvv-ct-name { flex: 1; min-width: 0; }

.zvv-ct-chevron {
    margin-left: auto;
    font-size: 12px;
    color: #bd93f9;
    transition: transform 0.18s;
    flex-shrink: 0;
}

.zvv-country-select.open .zvv-ct-chevron { transform: rotate(180deg); }

/* Dropdown panel */
.zvv-country-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--zvv-panel, #fff);
    border: 1.5px solid rgba(124,58,237,0.2);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(124,58,237,0.14), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 1050;
    overflow: hidden;
    animation: zvvDropIn 0.15s ease;
}

@keyframes zvvDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.zvv-country-select.open .zvv-country-dropdown { display: block; }

/* Search row */
.zvv-country-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(124,58,237,0.1);
}

.zvv-country-search-wrap i { color: #bd93f9; font-size: 13px; flex-shrink: 0; }

.zvv-country-search {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--zvv-ink, #1a0f4a);
}

.zvv-country-search::placeholder { color: #bd93f9; }

/* Scrollable list */
.zvv-country-list {
    max-height: 220px;
    overflow-y: auto;
    padding: 6px 0;
    scroll-behavior: smooth;
}

.zvv-country-list::-webkit-scrollbar { width: 4px; }
.zvv-country-list::-webkit-scrollbar-track { background: transparent; }
.zvv-country-list::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.2); border-radius: 99px; }

/* Country item */
.zvv-country-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 13.5px;
    color: var(--zvv-ink, #1a0f4a);
}

.zvv-country-item:hover { background: rgba(124,58,237,0.07); }

.zvv-country-item.selected {
    background: rgba(124,58,237,0.1);
    color: #7c3aed;
    font-weight: 700;
}

.zvv-ci-flag { font-size: 20px; line-height: 1; flex-shrink: 0; }
.zvv-ci-name { flex: 1; }

/* Empty state */
.zvv-country-empty {
    padding: 14px;
    text-align: center;
    font-size: 13px;
    color: var(--zvv-muted, #9ca3af);
}

/* Dark mode */
[data-bs-theme="dark"] .zvv-country-trigger {
    background: rgba(189,147,249,0.07);
    border-color: rgba(167,139,250,0.2);
    color: #f8f8f2;
}

[data-bs-theme="dark"] .zvv-country-trigger:hover,
[data-bs-theme="dark"] .zvv-country-select.open .zvv-country-trigger {
    background: rgba(189,147,249,0.1);
}

[data-bs-theme="dark"] .zvv-country-dropdown {
    background: #1a1035;
    border-color: rgba(167,139,250,0.25);
}

[data-bs-theme="dark"] .zvv-country-search { color: #f8f8f2; }

[data-bs-theme="dark"] .zvv-country-item { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-country-item:hover { background: rgba(189,147,249,0.1); }
[data-bs-theme="dark"] .zvv-country-item.selected { background: rgba(124,58,237,0.2); }

.zvv-register-body .zvv-country-trigger {
    background: #f9f7ff;
    border-color: #e5dfff;
    color: #1a0f4a;
}

.zvv-register-body .zvv-country-trigger:not(.selected) {
    color: #7c6baf;
}

.zvv-register-body .zvv-country-trigger:hover,
.zvv-register-body .zvv-country-trigger[aria-expanded="true"] {
    background: #fff;
    border-color: #7c3aed;
}

.zvv-register-body .zvv-country-dropdown,
.zvv-register-body .zvv-country-search-wrap {
    background: #fff;
    border-color: #e5dfff;
}

.zvv-register-body .zvv-country-search {
    color: #1a0f4a;
}

.zvv-register-body .zvv-country-list li {
    color: #374151;
}

.zvv-register-body .zvv-country-list li:hover {
    background: #f5f0ff;
    color: #7c3aed;
}

.zvv-register-body .zvv-country-list li.active {
    background: #ede9fe;
    color: #6d28d9;
}

/* ══════════════════════════════════════════════════════════════
   POST BREADCRUMB STRIP  (zvv-bc-*)
══════════════════════════════════════════════════════════════ */

.zvv-bc-strip {
    background: var(--zvv-panel, #fff);
    border-bottom: 1px solid var(--zvv-line, #e9e6ff);
    padding: 0;
}

.zvv-bc {
    padding: 0;
}

.zvv-bc ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 11px 0;
}

.zvv-bc li {
    display: inline-flex;
    align-items: center;
}

.zvv-bc li a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--zvv-muted, #9ca3af);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 8px;
    transition: color 0.14s, background 0.14s;
    white-space: nowrap;
}

.zvv-bc li a:hover {
    color: #7c3aed;
    background: rgba(124,58,237,0.07);
}

.zvv-bc li a i {
    font-size: 11px;
    color: #bd93f9;
}

.zvv-bc-sep {
    font-size: 10px;
    color: rgba(124,58,237,0.25);
    margin: 0 2px;
    flex-shrink: 0;
}

/* Current page — last crumb, no link */
.zvv-bc-current {
    font-size: 12.5px;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    color: #7c3aed;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(124,58,237,0.07);
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* Dark mode */
[data-bs-theme="dark"] .zvv-bc-strip {
    background: rgba(189,147,249,0.04);
    border-bottom-color: rgba(189,147,249,0.14);
}

[data-bs-theme="dark"] .zvv-bc li a {
    color: rgba(189,147,249,0.65);
}

[data-bs-theme="dark"] .zvv-bc li a:hover {
    color: #bd93f9;
    background: rgba(124,58,237,0.12);
}

[data-bs-theme="dark"] .zvv-bc-current {
    color: #bd93f9;
    background: rgba(124,58,237,0.15);
}

@media (max-width: 600px) {
    .zvv-bc-current { max-width: 180px; }
}

/* ══════════════════════════════════════════════════════════════
   FUND WALLET PAGE  (zvv-fund-*)
══════════════════════════════════════════════════════════════ */

.zvv-fund-page-hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.zvv-fund-page-sub {
    font-size: 13.5px;
    color: var(--zvv-muted);
    margin: 4px 0 0;
    max-width: 520px;
}

/* ── Top row: balance + receive ── */
.zvv-fund-top-row {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
}

/* Balance card */
.zvv-fund-balance-card {
    position: relative;
    background: linear-gradient(145deg, #1a0f4a 0%, #2d1b69 55%, #1a0f4a 100%);
    border-radius: 20px;
    padding: 28px 24px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(124,58,237,0.35);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 190px;
}

.zvv-fund-balance-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,0.45) 0%, transparent 70%);
    top: -60px;
    right: -60px;
    pointer-events: none;
}

.zvv-fund-balance-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(189,147,249,0.8);
}

.zvv-fund-balance-amount {
    font-family: 'Sora', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.zvv-fund-balance-amount span {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(189,147,249,0.75);
}

.zvv-fund-balance-address {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(189,147,249,0.1);
    border-radius: 10px;
    padding: 8px 12px;
    margin-top: auto;
    border: 1px solid rgba(255,255,255,0.1);
}

.zvv-fund-balance-address i { color: #bd93f9; font-size: 13px; flex-shrink: 0; }

.zvv-fund-balance-address code {
    font-family: 'Space Grotesk', monospace;
    font-size: 11px;
    color: rgba(189,147,249,0.95);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zvv-fund-balance-address .zvv-profile-copy-btn {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: rgba(189,147,249,0.95);
    padding: 3px 8px;
    font-size: 11px;
    flex-shrink: 0;
}

.zvv-fund-balance-address .zvv-profile-copy-btn:hover {
    background: rgba(255,255,255,0.18);
}

/* Receive card */
.zvv-fund-receive-card { }

.zvv-fund-receive-body {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 0 1.5rem 1.5rem;
    flex-wrap: wrap;
}

.zvv-fund-qr-wrap {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    border: 1px solid rgba(124,58,237,0.1);
}

.zvv-fund-qr-wrap canvas { display: block !important; }
.zvv-fund-qr-wrap img   { display: none !important; }

.zvv-fund-receive-meta { flex: 1; min-width: 200px; }

/* ── Section header shared ── */
.zvv-fund-section { }

.zvv-fund-section-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--zvv-line, #f0edff);
    flex-wrap: wrap;
}

.zvv-fund-section-head > div { flex: 1; min-width: 0; }

.zvv-fund-section-head h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--zvv-ink);
    margin: 0 0 3px;
}

.zvv-fund-section-head p {
    font-size: 12.5px;
    color: var(--zvv-muted);
    margin: 0;
}

.zvv-fund-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(124,58,237,0.1);
    color: #7c3aed;
    font-size: 16px;
    flex-shrink: 0;
}

.zvv-fund-section-icon.reward { background: rgba(5,150,105,0.1); color: #059669; }

.zvv-fund-badge-soon {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: #d97706;
    background: rgba(217,119,6,0.1);
    border: 1px solid rgba(217,119,6,0.2);
    white-space: nowrap;
    align-self: center;
}

/* ── On-ramp provider cards ── */
.zvv-fund-provider-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 1.25rem 1.5rem;
}

.zvv-fund-provider-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--zvv-bg, #f5f3ff);
    border: 1.5px solid rgba(124,58,237,0.1);
    border-radius: 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.zvv-fund-provider-card.zvv-fund-provider-active {
    border-color: rgba(124,58,237,0.25);
    box-shadow: 0 4px 16px rgba(124,58,237,0.08);
}

.zvv-fund-provider-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.zvv-fund-provider-logo.moonpay  { background: #7c3aed; color: #fff; }
.zvv-fund-provider-logo.transak  { background: #0052ff; color: #fff; }
.zvv-fund-provider-logo.stripe   { background: #635bff; color: #fff; }

.zvv-fund-provider-body { flex: 1; }

.zvv-fund-provider-body strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    color: var(--zvv-ink);
    margin-bottom: 5px;
}

.zvv-fund-provider-body p {
    font-size: 12.5px;
    color: var(--zvv-muted);
    line-height: 1.5;
    margin: 0 0 10px;
}

.zvv-fund-provider-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.zvv-fund-provider-chips span {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #7c3aed;
    background: rgba(124,58,237,0.08);
    border: 1px solid rgba(124,58,237,0.15);
}

.zvv-fund-provider-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 3px 10px rgba(124,58,237,0.3);
    transition: opacity 0.14s, transform 0.12s;
}

.zvv-fund-provider-btn:hover { opacity: 0.88; transform: translateY(-1px); color: #fff; }

.zvv-fund-provider-soon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--zvv-muted);
    background: rgba(124,58,237,0.05);
    border: 1.5px dashed rgba(124,58,237,0.2);
    text-align: center;
}

/* ── DEX / CEX ── */
.zvv-fund-exchange-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 1.25rem 1.5rem;
}

.zvv-fund-exchange-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: var(--zvv-bg, #f5f3ff);
    border: 1px solid rgba(124,58,237,0.1);
    border-radius: 16px;
}

.zvv-fund-exchange-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.zvv-fund-exchange-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.zvv-fund-exchange-icon.dex { background: rgba(124,58,237,0.12); color: #7c3aed; }
.zvv-fund-exchange-icon.cex { background: rgba(5,150,105,0.1); color: #059669; }

.zvv-fund-exchange-head > div strong {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--zvv-ink);
}

.zvv-fund-exchange-head > div span {
    font-size: 12px;
    color: var(--zvv-muted);
}

.zvv-fund-exchange-placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(217,119,6,0.05);
    border: 1px dashed rgba(217,119,6,0.3);
    border-radius: 10px;
    font-size: 12.5px;
    color: #b45309;
    font-weight: 600;
}

.zvv-fund-exchange-placeholder i { flex-shrink: 0; }

.zvv-fund-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zvv-fund-steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: var(--zvv-muted);
    line-height: 1.5;
}

.zvv-fund-steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(124,58,237,0.12);
    color: #7c3aed;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 1px;
}

.zvv-fund-exchange-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    background: rgba(124,58,237,0.08);
    color: #7c3aed;
    border: 1.5px solid rgba(124,58,237,0.2);
    text-decoration: none;
    transition: background 0.14s, border-color 0.14s;
    margin-top: auto;
}

.zvv-fund-exchange-btn:hover {
    background: rgba(124,58,237,0.14);
    border-color: rgba(124,58,237,0.4);
    color: #6d28d9;
}

.zvv-fund-exchange-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(79,70,229,0.05);
    border-radius: 10px;
    font-size: 12px;
    color: var(--zvv-muted);
    line-height: 1.5;
    border: 1px solid rgba(79,70,229,0.1);
    margin-top: auto;
}

.zvv-fund-exchange-note i { color: #4f46e5; flex-shrink: 0; margin-top: 1px; }

.zvv-fund-exchange-cex-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--zvv-ink);
    margin: 0;
}

/* ── Earn section ── */
.zvv-fund-earn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 1.25rem 1.5rem;
}

.zvv-fund-earn-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--zvv-bg, #f5f3ff);
    border: 1.5px solid rgba(124,58,237,0.1);
    border-radius: 16px;
}

.zvv-fund-earn-card.zvv-fund-earn-coming { opacity: 0.65; }

.zvv-fund-earn-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.zvv-fund-earn-icon.post    { background: rgba(79,70,229,0.12); color: #4f46e5; }
.zvv-fund-earn-icon.profile { background: rgba(5,150,105,0.1); color: #059669; }
.zvv-fund-earn-icon.refer   { background: rgba(217,119,6,0.1); color: #d97706; }

.zvv-fund-earn-body { flex: 1; }

.zvv-fund-earn-body strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    color: var(--zvv-ink);
    margin-bottom: 5px;
}

.zvv-fund-earn-body p {
    font-size: 12.5px;
    color: var(--zvv-muted);
    line-height: 1.55;
    margin: 0 0 10px;
}

.zvv-fund-earn-reward {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #059669;
    background: rgba(5,150,105,0.08);
    border: 1px solid rgba(5,150,105,0.2);
    border-radius: 999px;
    padding: 4px 10px;
}

.zvv-fund-earn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 3px 10px rgba(124,58,237,0.25);
    transition: opacity 0.14s;
    cursor: pointer;
    border: none;
}

.zvv-fund-earn-btn:hover { opacity: 0.88; color: #fff; }
.zvv-fund-earn-btn.disabled {
    background: rgba(124,58,237,0.1);
    color: var(--zvv-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/* ── Dark mode ── */
[data-bs-theme="dark"] .zvv-fund-provider-card,
[data-bs-theme="dark"] .zvv-fund-exchange-card,
[data-bs-theme="dark"] .zvv-fund-earn-card {
    background: rgba(189,147,249,0.04);
    border-color: rgba(189,147,249,0.14);
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .zvv-fund-top-row { grid-template-columns: 1fr; }
    .zvv-fund-provider-grid { grid-template-columns: 1fr 1fr; }
    .zvv-fund-earn-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
    .zvv-fund-provider-grid,
    .zvv-fund-exchange-grid,
    .zvv-fund-earn-grid { grid-template-columns: 1fr; }
    .zvv-fund-receive-body { flex-direction: column; }
}

/* ── Admin archive info banner ── */
.zvv-admin-archive-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #ede9fe;
    border: 1px solid #bd93f9;
    border-radius: 10px;
    font-size: 13px;
    color: #5b21b6;
    font-weight: 500;
}

.zvv-admin-archive-info i { font-size: 15px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   MESSAGES REDESIGN  (zvv-inbox-*)
══════════════════════════════════════════════════════════════ */

/* Page header */
.zvv-inbox-hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.zvv-inbox-hd-title {
    font-size: 1.6rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.zvv-inbox-unread-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,58,237,0.35);
    vertical-align: middle;
}

.zvv-inbox-compose-btn { white-space: nowrap; }

/* Stats row */
.zvv-inbox-stats {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.zvv-inbox-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1.5px solid rgba(124,58,237,0.1);
    border-radius: 14px;
    padding: 14px 20px;
    flex: 1;
    min-width: 100px;
    position: relative;
    overflow: hidden;
}

.zvv-inbox-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #7c3aed, #4f46e5);
    border-radius: 14px 0 0 14px;
}

.zvv-inbox-stat-num {
    font-family: 'Sora', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #0f0a2e;
    line-height: 1;
}

.zvv-inbox-stat-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.zvv-inbox-stat-unread { color: #7c3aed; }

/* Main layout */
.zvv-inbox-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}

/* Message list panel */
.zvv-inbox-panel {
    background: #fff;
    border: 1.5px solid rgba(124,58,237,0.1);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(124,58,237,0.05);
}

.zvv-inbox-panel-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1.5px solid rgba(124,58,237,0.07);
    background: rgba(124,58,237,0.02);
}

.zvv-inbox-tabs {
    display: flex;
    gap: 4px;
    background: rgba(124,58,237,0.05);
    border-radius: 10px;
    padding: 4px;
}

.zvv-inbox-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    transition: background 0.14s, color 0.14s;
    white-space: nowrap;
}

.zvv-inbox-tab:hover { background: rgba(124,58,237,0.07); color: #7c3aed; }

.zvv-inbox-tab.active {
    background: #fff;
    color: #7c3aed;
    box-shadow: 0 1px 6px rgba(124,58,237,0.12);
}

.zvv-inbox-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(124,58,237,0.3);
}

.zvv-inbox-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(124,58,237,0.1);
    color: #7c3aed;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
}

.zvv-inbox-total {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap;
}

/* Message rows */
.zvv-inbox-list {
    display: flex;
    flex-direction: column;
}

.zvv-inbox-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(124,58,237,0.05);
    transition: background 0.14s;
    position: relative;
}

.zvv-inbox-row:last-child { border-bottom: none; }
.zvv-inbox-row:hover { background: rgba(124,58,237,0.03); }

.zvv-inbox-row.zvv-inbox-unread {
    background: rgba(124,58,237,0.035);
}

.zvv-inbox-row.zvv-inbox-unread::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #7c3aed, #4f46e5);
    border-radius: 0 2px 2px 0;
}

.zvv-inbox-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(124,58,237,0.25);
}

.zvv-inbox-row-body { flex: 1; min-width: 0; }

.zvv-inbox-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.zvv-inbox-row-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f0a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zvv-inbox-unread .zvv-inbox-row-name { color: #7c3aed; }

.zvv-inbox-row-time {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

.zvv-inbox-row-subject {
    font-size: 13.5px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zvv-inbox-unread .zvv-inbox-row-subject { color: #1a0f4a; }

.zvv-inbox-row-preview {
    font-size: 12.5px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zvv-inbox-dot {
    width: 9px;
    height: 9px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 8px;
    box-shadow: 0 0 0 2px rgba(124,58,237,0.2);
}

/* Empty state */
.zvv-inbox-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 24px;
    gap: 12px;
}

.zvv-inbox-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: rgba(124,58,237,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #7c3aed;
    margin-bottom: 4px;
}

.zvv-inbox-empty h3 {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #0f0a2e;
    margin: 0;
}

.zvv-inbox-empty p {
    font-size: 13px;
    color: #9ca3af;
    margin: 0;
    max-width: 260px;
}

.zvv-inbox-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    padding: 9px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(124,58,237,0.3);
    transition: opacity 0.14s;
}

.zvv-inbox-empty-cta:hover { opacity: 0.88; color: #fff; }

/* Compose panel */
.zvv-inbox-compose {
    background: #fff;
    border: 1.5px solid rgba(124,58,237,0.12);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(124,58,237,0.06);
    position: sticky;
    top: 20px;
}

.zvv-inbox-compose-hd {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px 16px;
    border-bottom: 1.5px solid rgba(124,58,237,0.07);
    background: linear-gradient(135deg, rgba(124,58,237,0.04), rgba(79,70,229,0.02));
}

.zvv-inbox-compose-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(124,58,237,0.3);
}

.zvv-inbox-compose-title {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--zvv-ink, #0f0a2e);
    margin: 2px 0 0;
}

.zvv-inbox-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px 22px;
}

.zvv-inbox-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zvv-inbox-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 5px;
}

.zvv-inbox-label i { color: #7c3aed; }

.zvv-inbox-hint {
    font-size: 11.5px;
    color: #9ca3af;
}

.zvv-inbox-textarea {
    border-radius: 12px;
    border: 1.5px solid rgba(124,58,237,0.15);
    font-size: 14px;
    resize: vertical;
    min-height: 160px;
    transition: border-color 0.15s;
}

.zvv-inbox-textarea:focus {
    border-color: rgba(124,58,237,0.4);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.07);
}

.zvv-inbox-send-btn {
    width: 100%;
    justify-content: center;
    margin-top: 2px;
}

.zvv-inbox-errors {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 22px;
    padding: 12px 14px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 12px;
    font-size: 13px;
    color: #7f1d1d;
}

.zvv-inbox-errors i { flex-shrink: 0; margin-top: 1px; }

.zvv-message-recipient-wrap .select2-container {
    width: 100% !important;
}

.zvv-message-recipient-wrap .select2-container--default .select2-selection--single {
    height: auto;
    min-height: 42px;
    background: var(--zvv-bg, #f5f3ff);
    border: 1.5px solid #d1c6ff;
    border-radius: 10px;
    padding: 8px 36px 8px 38px;
    display: flex;
    align-items: center;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.zvv-message-recipient-wrap .select2-container--default.select2-container--focus .select2-selection--single,
.zvv-message-recipient-wrap .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #7c3aed;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.zvv-message-recipient-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--zvv-ink, #1a0f4a);
    font-size: 0.95rem;
    line-height: 1.35;
    padding: 0;
}

.zvv-message-recipient-wrap .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #bd93f9;
}

.zvv-message-recipient-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 10px;
    top: 0;
}

.zvv-message-recipient-wrap .select2-container--default .select2-selection--single .select2-selection__clear {
    color: #7c3aed;
    margin-right: 12px;
}

.zvv-message-recipient-dropdown {
    border: 1px solid #d1c6ff !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 18px 46px rgba(124, 58, 237, 0.16);
}

.zvv-message-recipient-dropdown .select2-search--dropdown {
    padding: 10px;
    background: #fff;
}

.zvv-message-recipient-dropdown .select2-search__field {
    border: 1.5px solid #d1c6ff !important;
    border-radius: 9px;
    color: var(--zvv-ink, #1a0f4a);
    outline: none;
    padding: 8px 10px;
}

.zvv-message-recipient-dropdown .select2-results__option {
    padding: 10px 12px;
    color: var(--zvv-ink, #1a0f4a);
    font-size: 0.9rem;
}

.zvv-message-recipient-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
    background: #7c3aed;
    color: #fff;
}

/* Dark mode */
[data-bs-theme="dark"] .zvv-inbox-stat,
[data-bs-theme="dark"] .zvv-inbox-panel,
[data-bs-theme="dark"] .zvv-inbox-compose {
    background: rgba(189,147,249,0.04);
    border-color: rgba(189,147,249,0.14);
}

[data-bs-theme="dark"] .zvv-inbox-panel-hd,
[data-bs-theme="dark"] .zvv-inbox-compose-hd {
    background: rgba(124,58,237,0.05);
}

[data-bs-theme="dark"] .zvv-inbox-row-name,
[data-bs-theme="dark"] .zvv-inbox-stat-num { color: #f0eeff; }

[data-bs-theme="dark"] .zvv-inbox-row.zvv-inbox-unread { background: rgba(124,58,237,0.08); }
[data-bs-theme="dark"] .zvv-inbox-row:hover { background: rgba(124,58,237,0.06); }

[data-bs-theme="dark"] .zvv-inbox-tab.active { background: rgba(124,58,237,0.15); box-shadow: none; }

[data-bs-theme="dark"] .zvv-message-recipient-wrap .select2-container--default .select2-selection--single {
    background: rgba(189,147,249,0.07);
    border-color: rgba(167,139,250,0.25);
}

[data-bs-theme="dark"] .zvv-message-recipient-wrap .select2-container--default.select2-container--focus .select2-selection--single,
[data-bs-theme="dark"] .zvv-message-recipient-wrap .select2-container--default.select2-container--open .select2-selection--single {
    background: rgba(189,147,249,0.1);
    border-color: rgba(167,139,250,0.55);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
}

[data-bs-theme="dark"] .zvv-message-recipient-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f8f8f2;
}

[data-bs-theme="dark"] .zvv-message-recipient-dropdown {
    background: #282a36;
    border-color: rgba(189,147,249,0.24) !important;
}

[data-bs-theme="dark"] .zvv-message-recipient-dropdown .select2-search--dropdown {
    background: #282a36;
}

[data-bs-theme="dark"] .zvv-message-recipient-dropdown .select2-search__field {
    background: #1f2030;
    border-color: rgba(189,147,249,0.25) !important;
    color: #f8f8f2;
}

[data-bs-theme="dark"] .zvv-message-recipient-dropdown .select2-results__option {
    background: #282a36;
    color: #f8f8f2;
}

[data-bs-theme="dark"] .zvv-message-recipient-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
    background: #7c3aed;
    color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
    .zvv-inbox-layout { grid-template-columns: 1fr; }
    .zvv-inbox-compose { position: static; }
}

@media (max-width: 540px) {
    .zvv-inbox-stats { gap: 10px; }
    .zvv-inbox-stat { padding: 12px 14px; }
    .zvv-inbox-stat-num { font-size: 22px; }
    .zvv-inbox-row { padding: 14px 16px; }
    .zvv-inbox-avatar { width: 38px; height: 38px; font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════
   MESSAGE DETAIL VIEW  (zvv-msgv-*)
══════════════════════════════════════════════════════════════ */

.zvv-msgv-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.zvv-msgv-direction-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
}

.zvv-msgv-direction-badge.received {
    background: rgba(124,58,237,0.1);
    color: #7c3aed;
    border: 1px solid rgba(124,58,237,0.2);
}

.zvv-msgv-direction-badge.sent {
    background: rgba(5,150,105,0.08);
    color: #059669;
    border: 1px solid rgba(5,150,105,0.2);
}

/* Card */
.zvv-msgv-card {
    background: #fff;
    border: 1.5px solid rgba(124,58,237,0.1);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(124,58,237,0.07);
}

/* Subject bar */
.zvv-msgv-subject-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px 20px;
    border-bottom: 1.5px solid rgba(124,58,237,0.07);
    background: linear-gradient(135deg, rgba(124,58,237,0.03), rgba(79,70,229,0.02));
    flex-wrap: wrap;
}

.zvv-msgv-subject {
    font-family: 'Sora', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f0a2e;
    margin: 0;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.zvv-msgv-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
    padding-top: 4px;
    flex-shrink: 0;
}

.zvv-msgv-date i { color: #bd93f9; }

/* Participants */
.zvv-msgv-participants {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 28px;
    border-bottom: 1.5px solid rgba(124,58,237,0.07);
    flex-wrap: wrap;
}

.zvv-msgv-participant {
    display: flex;
    align-items: center;
    gap: 12px;
}

.zvv-msgv-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zvv-msgv-avatar-from {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    box-shadow: 0 4px 12px rgba(124,58,237,0.3);
}

.zvv-msgv-avatar-to {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    box-shadow: 0 4px 12px rgba(5,150,105,0.25);
}

.zvv-msgv-participant-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.zvv-msgv-participant-role {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #9ca3af;
}

.zvv-msgv-participant-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f0a2e;
}

.zvv-msgv-participant-email {
    font-size: 12px;
    color: #9ca3af;
}

.zvv-msgv-arrow {
    font-size: 18px;
    color: #bd93f9;
    flex-shrink: 0;
    margin: 0 4px;
}

/* Body */
.zvv-msgv-body-wrap {
    padding: 28px;
    border-bottom: 1.5px solid rgba(124,58,237,0.07);
}

.zvv-msgv-body {
    font-size: 15px;
    line-height: 1.8;
    color: #374151;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(124,58,237,0.02);
    border-radius: 14px;
    padding: 20px 22px;
    border: 1px solid rgba(124,58,237,0.07);
    min-height: 80px;
}

/* Thread */
.zvv-msgv-thread {
    padding: 20px 28px 10px;
    border-bottom: 1.5px solid rgba(124,58,237,0.07);
}

.zvv-msgv-thread-head,
.zvv-msgv-reply-hd,
.zvv-msgv-top-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.zvv-msgv-thread-title {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #0f0a2e;
    margin: 2px 0 0;
}

.zvv-msgv-thread-meta {
    font-size: 12px;
    font-weight: 700;
    color: #9ca3af;
    white-space: nowrap;
}

.zvv-msgv-thread-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

.zvv-msgv-thread-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(124,58,237,0.02);
    border: 1px solid rgba(124,58,237,0.08);
    border-radius: 14px;
    padding: 14px;
}

.zvv-msgv-thread-item.mine {
    background: rgba(5,150,105,0.04);
    border-color: rgba(5,150,105,0.14);
}

.zvv-msgv-thread-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
}

.zvv-msgv-thread-item.mine .zvv-msgv-thread-avatar {
    background: linear-gradient(135deg, #059669, #10b981);
}

.zvv-msgv-thread-content {
    min-width: 0;
    flex: 1;
}

.zvv-msgv-thread-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.zvv-msgv-thread-top strong {
    font-size: 13px;
    font-weight: 800;
    color: #0f0a2e;
}

.zvv-msgv-thread-top span {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    white-space: nowrap;
}

.zvv-msgv-thread-subject {
    font-size: 12px;
    font-weight: 800;
    color: #7c3aed;
    margin-bottom: 6px;
}

.zvv-msgv-thread-body {
    font-size: 14px;
    line-height: 1.7;
    color: #374151;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Reply composer */
.zvv-msgv-reply {
    padding: 20px 28px 28px;
}

.zvv-msgv-reply-hd {
    margin-bottom: 14px;
}

.zvv-msgv-reply-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    box-shadow: 0 4px 12px rgba(124,58,237,0.28);
}

.zvv-msgv-reply-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.zvv-msgv-reply-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zvv-msgv-reply-field span {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

.zvv-msgv-reply-field .form-control {
    border: 1.5px solid rgba(124,58,237,0.15);
    border-radius: 12px;
    font-size: 14px;
    color: #0f0a2e;
    background: #fff;
}

.zvv-msgv-reply-field .form-control[readonly] {
    background: rgba(124,58,237,0.04);
    color: #4b5563;
}

.zvv-msgv-reply-field .form-control:focus {
    border-color: rgba(124,58,237,0.4);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.08);
}

.zvv-msgv-reply-field textarea.form-control {
    min-height: 160px;
    resize: vertical;
}

/* Actions */
.zvv-msgv-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 28px;
    flex-wrap: wrap;
}

.zvv-msgv-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.14s, transform 0.12s;
}

.zvv-msgv-btn:hover { opacity: 0.85; transform: translateY(-1px); }

.zvv-msgv-btn-reply {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    box-shadow: 0 4px 12px rgba(124,58,237,0.3);
}

.zvv-msgv-btn-reply:hover { color: #fff; }

.zvv-msgv-btn-delete {
    background: rgba(239,68,68,0.08);
    color: #b91c1c;
    border: 1.5px solid rgba(239,68,68,0.2);
}

/* Dark mode */
[data-bs-theme="dark"] .zvv-msgv-card {
    background: rgba(189,147,249,0.04);
    border-color: rgba(189,147,249,0.14);
}

[data-bs-theme="dark"] .zvv-msgv-subject-bar {
    background: rgba(124,58,237,0.06);
}

[data-bs-theme="dark"] .zvv-msgv-subject,
[data-bs-theme="dark"] .zvv-msgv-participant-name,
[data-bs-theme="dark"] .zvv-msgv-thread-title,
[data-bs-theme="dark"] .zvv-msgv-thread-top strong { color: #f0eeff; }

[data-bs-theme="dark"] .zvv-msgv-body {
    background: rgba(124,58,237,0.05);
    color: #d1d5db;
    border-color: rgba(189,147,249,0.1);
}

[data-bs-theme="dark"] .zvv-msgv-thread,
[data-bs-theme="dark"] .zvv-msgv-reply {
    border-color: rgba(189,147,249,0.1);
}

[data-bs-theme="dark"] .zvv-msgv-thread-item {
    background: rgba(189,147,249,0.04);
    border-color: rgba(189,147,249,0.12);
}

[data-bs-theme="dark"] .zvv-msgv-thread-item.mine {
    background: rgba(5,150,105,0.05);
    border-color: rgba(5,150,105,0.16);
}

[data-bs-theme="dark"] .zvv-msgv-thread-body,
[data-bs-theme="dark"] .zvv-msgv-reply-field span {
    color: #d1d5db;
}

[data-bs-theme="dark"] .zvv-msgv-reply-field .form-control {
    background: #282a36;
    border-color: #44475a;
    color: #f8f8f2;
}

[data-bs-theme="dark"] .zvv-msgv-reply-field .form-control[readonly] {
    background: rgba(189,147,249,0.05);
    color: #cbd5e1;
}

/* Responsive */
@media (max-width: 600px) {
    .zvv-msgv-subject-bar,
    .zvv-msgv-participants,
    .zvv-msgv-thread,
    .zvv-msgv-reply,
    .zvv-msgv-body-wrap,
    .zvv-msgv-actions { padding-left: 18px; padding-right: 18px; }

    .zvv-msgv-subject { font-size: 1.1rem; }
    .zvv-msgv-arrow { display: none; }
    .zvv-msgv-participants { gap: 14px; }
    .zvv-msgv-thread-item { padding: 12px; }
    .zvv-msgv-top-actions { align-items: stretch; }
    .zvv-msgv-top-actions .zvv-msgv-btn,
    .zvv-msgv-top-actions form { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD ANALYTICS  (zvv-analytics-*)
══════════════════════════════════════════════════════════════ */

.zvv-analytics {
    margin-bottom: 28px;
}

.zvv-analytics-hd {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* Stat cards */
.zvv-analytics-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.zvv-analytics-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1.5px solid rgba(124,58,237,0.1);
    border-radius: 16px;
    padding: 16px 14px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.zvv-analytics-stat:hover {
    border-color: rgba(124,58,237,0.25);
    box-shadow: 0 4px 18px rgba(124,58,237,0.1);
}

.zvv-analytics-stat::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 0 0 16px 16px;
}

.zvv-analytics-stat-views::after  { background: linear-gradient(90deg, #7c3aed, #4f46e5); }
.zvv-analytics-stat-today::after  { background: linear-gradient(90deg, #0284c7, #0ea5e9); }
.zvv-analytics-stat-week::after   { background: linear-gradient(90deg, #059669, #10b981); }
.zvv-analytics-stat-month::after  { background: linear-gradient(90deg, #d97706, #f59e0b); }
.zvv-analytics-stat-posts::after  { background: linear-gradient(90deg, #7c3aed, #4f46e5); }
.zvv-analytics-stat-drafts::after { background: linear-gradient(90deg, #6b7280, #9ca3af); }

.zvv-analytics-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.zvv-analytics-stat-views .zvv-analytics-stat-icon  { background: rgba(124,58,237,0.1);  color: #7c3aed; }
.zvv-analytics-stat-today .zvv-analytics-stat-icon  { background: rgba(2,132,199,0.1);   color: #0284c7; }
.zvv-analytics-stat-week .zvv-analytics-stat-icon   { background: rgba(5,150,105,0.1);   color: #059669; }
.zvv-analytics-stat-month .zvv-analytics-stat-icon  { background: rgba(217,119,6,0.1);   color: #d97706; }
.zvv-analytics-stat-posts .zvv-analytics-stat-icon  { background: rgba(124,58,237,0.1);  color: #7c3aed; }
.zvv-analytics-stat-drafts .zvv-analytics-stat-icon { background: rgba(107,114,128,0.1); color: #6b7280; }

.zvv-analytics-stat-num {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #0f0a2e;
    line-height: 1;
    margin-bottom: 2px;
}

.zvv-analytics-stat-lbl {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Chart + Top posts two-column layout */
.zvv-analytics-body {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 16px;
    align-items: start;
}

.zvv-analytics-chart-panel,
.zvv-analytics-top-panel { margin-bottom: 0 !important; }

.zvv-analytics-chart-hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 14px;
    flex-wrap: wrap;
}

.zvv-analytics-chart-title {
    font-family: 'Sora', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f0a2e;
    margin: 2px 0 0;
}

.zvv-analytics-chart-total {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #059669;
    background: rgba(5,150,105,0.08);
    border: 1px solid rgba(5,150,105,0.2);
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
}

.zvv-analytics-chart-wrap {
    padding: 8px 18px 18px;
    height: 220px;
    position: relative;
}

/* Top posts leaderboard */
.zvv-analytics-top-list {
    display: flex;
    flex-direction: column;
}

.zvv-analytics-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid rgba(124,58,237,0.05);
    transition: background 0.12s;
}

.zvv-analytics-top-row:last-child { border-bottom: none; }
.zvv-analytics-top-row:hover { background: rgba(124,58,237,0.02); }

.zvv-analytics-top-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.zvv-analytics-top-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

[data-bs-theme="dark"] .zvv-analytics-top-thumb {
    background: linear-gradient(135deg, #5b21b6, #3730a3);
}

.zvv-analytics-top-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.zvv-analytics-top-title {
    font-size: 13px;
    font-weight: 600;
    color: #0f0a2e;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    transition: color 0.12s;
}

.zvv-analytics-top-title:hover { color: #7c3aed; }

.zvv-analytics-top-bar-track {
    height: 4px;
    background: rgba(124,58,237,0.08);
    border-radius: 999px;
    overflow: hidden;
}

.zvv-analytics-top-bar {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #4f46e5);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.zvv-analytics-top-views {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    min-width: 48px;
}

.zvv-analytics-top-views strong {
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: #0f0a2e;
    line-height: 1;
}

.zvv-analytics-top-views span {
    font-size: 10px;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.zvv-analytics-top-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}

.zvv-analytics-top-status.published { background: #d1fae5; color: #065f46; }
.zvv-analytics-top-status.draft     { background: #fef3c7; color: #92400e; }
.zvv-analytics-top-status.archived  { background: #ede9fe; color: #5b21b6; }

/* Dark mode */
[data-bs-theme="dark"] .zvv-analytics-stat {
    background: rgba(189,147,249,0.04);
    border-color: rgba(189,147,249,0.14);
}

[data-bs-theme="dark"] .zvv-analytics-stat-num,
[data-bs-theme="dark"] .zvv-analytics-chart-title,
[data-bs-theme="dark"] .zvv-analytics-top-views strong,
[data-bs-theme="dark"] .zvv-analytics-top-title { color: #f0eeff; }

[data-bs-theme="dark"] .zvv-analytics-top-title:hover { color: #bd93f9; }

[data-bs-theme="dark"] .zvv-analytics-top-row:hover { background: rgba(124,58,237,0.06); }

/* Responsive */
@media (max-width: 1100px) {
    .zvv-analytics-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
    .zvv-analytics-body { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .zvv-analytics-stats { grid-template-columns: repeat(2, 1fr); }
}

.zvv-admin-views-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: #6d28d9;
    background: rgba(124,58,237,0.08);
    border: 1px solid rgba(124,58,237,0.15);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.zvv-admin-views-badge i { font-size: 11px; }

/* ══════════════════════════════════════════════════════════════
   DRACULA DARK THEME OVERRIDES
   Applies to all public/wallet pages.
   Admin uses zvv-admin-body and never toggles data-bs-theme="dark".
══════════════════════════════════════════════════════════════ */

/* Body & global surface */
[data-bs-theme="dark"] body {
    background:
        radial-gradient(circle at top left,  rgba(189,147,249,0.08), transparent 40rem),
        radial-gradient(circle at bottom right, rgba(80,250,123,0.04), transparent 40rem),
        linear-gradient(180deg, #13141f, #13141f);
    color: #f8f8f2;
}

/* Nav bar */
[data-bs-theme="dark"] .blog-nav,
[data-bs-theme="dark"] .zvv-nav {
    background: rgba(19,20,31,0.95) !important;
    border-bottom-color: #44475a !important;
}

[data-bs-theme="dark"] .blog-nav .nav-link,
[data-bs-theme="dark"] .zvv-nav .nav-link { color: #6272a4 !important; }
[data-bs-theme="dark"] .blog-nav .nav-link:hover,
[data-bs-theme="dark"] .zvv-nav .nav-link:hover { color: #bd93f9 !important; }

/* Generic cards / panels */
[data-bs-theme="dark"] .zvv-card,
[data-bs-theme="dark"] .zvv-tx-panel,
[data-bs-theme="dark"] .zvv-tx-panel.zvv-inbox-panel,
[data-bs-theme="dark"] .zvv-inbox-panel,
[data-bs-theme="dark"] .zvv-inbox-compose,
[data-bs-theme="dark"] .zvv-fund-balance-card ~ *,
[data-bs-theme="dark"] .zvv-msgv-card {
    background: #1e1f2e !important;
    border-color: #44475a !important;
}

/* Headings */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] .zvv-section-title,
[data-bs-theme="dark"] .zvv-dash-heading { color: #f8f8f2; }

/* Section eyebrow */
[data-bs-theme="dark"] .zvv-section-eyebrow { color: #bd93f9 !important; }

/* Links */
[data-bs-theme="dark"] a:not(.btn):not([class*="zvv-btn"]):not([class*="zvv-admin"]) { color: #bd93f9; }
[data-bs-theme="dark"] a:not(.btn):not([class*="zvv-btn"]):not([class*="zvv-admin"]):hover { color: #ff79c6; }

/* Blog post body prose (Dracula code highlighting flavour) */
[data-bs-theme="dark"] .zvv-post-body a           { color: #8be9fd; }
[data-bs-theme="dark"] .zvv-post-body a:hover      { color: #ff79c6; }
[data-bs-theme="dark"] .zvv-post-body strong       { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-post-body em           { color: #ffb86c; }
[data-bs-theme="dark"] .zvv-post-body blockquote   { background: rgba(189,147,249,0.08); border-left-color: #bd93f9; color: #cba6f7; }
[data-bs-theme="dark"] .zvv-post-body code,
[data-bs-theme="dark"] .zvv-post-body pre          { background: #282a36; color: #50fa7b; border-color: #44475a; }
[data-bs-theme="dark"] .zvv-post-body hr           { border-color: #44475a; }
[data-bs-theme="dark"] .zvv-post-body table th     { background: #282a36; color: #bd93f9; }
[data-bs-theme="dark"] .zvv-post-body table td     { border-color: #44475a; color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-post-body table tr:nth-child(even) td { background: rgba(40,42,54,0.5); }
[data-bs-theme="dark"] .zvv-post-body li::marker   { color: #bd93f9; }

/* Auth / forms */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .zvv-admin-form-input,
[data-bs-theme="dark"] .zvv-admin-form-select {
    background-color: #282a36;
    border-color: #44475a;
    color: #f8f8f2;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #2d2f44;
    border-color: #bd93f9;
    box-shadow: 0 0 0 3px rgba(189,147,249,0.15);
    color: #f8f8f2;
}
[data-bs-theme="dark"] .form-control::placeholder { color: #6272a4; }

/* Footer */
[data-bs-theme="dark"] .zvv-footer {
    background: #1e1f2e !important;
    border-top-color: #44475a !important;
}

/* Scrollbar */
[data-bs-theme="dark"] ::-webkit-scrollbar { width: 8px; background: #13141f; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: #44475a; border-radius: 4px; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #bd93f9; }

/* Selection highlight */
[data-bs-theme="dark"] ::selection { background: rgba(189,147,249,0.35); color: #f8f8f2; }

/* Blog index cards */
[data-bs-theme="dark"] .zvv-card               { background: var(--zvv-panel); border-color: var(--zvv-line); }
[data-bs-theme="dark"] .zvv-card:hover          { border-color: #bd93f9; box-shadow: 0 8px 28px rgba(189,147,249,0.14); }
[data-bs-theme="dark"] .zvv-card-title a        { color: var(--zvv-ink); }
[data-bs-theme="dark"] .zvv-card-title a:hover  { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-card-meta           { color: var(--zvv-muted); }
[data-bs-theme="dark"] .zvv-card-footer         { border-top-color: var(--zvv-line); }

/* Story hero */
[data-bs-theme="dark"] .zvv-story-hero          { background: var(--zvv-panel); border-color: var(--zvv-line); }
[data-bs-theme="dark"] .zvv-story-hero:hover    { border-color: #bd93f9; }
[data-bs-theme="dark"] .zvv-story-hero-title a  { color: var(--zvv-ink); }
[data-bs-theme="dark"] .zvv-story-hero-title a:hover { color: #ff79c6; }

/* Feed items */
[data-bs-theme="dark"] .zvv-feed-item          { background: var(--zvv-panel); border-color: var(--zvv-line); }
[data-bs-theme="dark"] .zvv-feed-title a       { color: var(--zvv-ink); }
[data-bs-theme="dark"] .zvv-feed-title a:hover { color: #ff79c6; }
[data-bs-theme="dark"] .zvv-feed-meta          { color: var(--zvv-muted); }
[data-bs-theme="dark"] .zvv-feed-meta a        { color: #bd93f9; }

/* Sidebar widgets */
[data-bs-theme="dark"] .zvv-sw               { background: var(--zvv-panel); border-color: var(--zvv-line); }
[data-bs-theme="dark"] .zvv-sw-title         { color: rgba(189,147,249,0.5); }
[data-bs-theme="dark"] .zvv-popular-title    { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-popular-item,
[data-bs-theme="dark"] .zvv-cat-item         { border-bottom-color: #44475a; color: rgba(189,147,249,0.75); }
[data-bs-theme="dark"] .zvv-popular-item:hover,
[data-bs-theme="dark"] .zvv-cat-item:hover   { color: #ff79c6; }

/* Category badge */
[data-bs-theme="dark"] .post-category-badge  { background: rgba(189,147,249,0.12); color: #bd93f9; }
[data-bs-theme="dark"] .post-category-badge:hover { background: rgba(189,147,249,0.22); color: #ff79c6; }

/* Author chip */
[data-bs-theme="dark"] .zvv-author-chip,
[data-bs-theme="dark"] .zvv-post-author-chip { color: #bd93f9; }

/* Read badge */
[data-bs-theme="dark"] .zvv-read-badge { background: rgba(189,147,249,0.1); color: rgba(189,147,249,0.75); }

/* Search input */
[data-bs-theme="dark"] .zvv-search-input { background: var(--zvv-bg); border-color: var(--zvv-line); color: var(--zvv-ink); }
[data-bs-theme="dark"] .zvv-search-input:focus { border-color: #bd93f9; }

/* Tx table striping */
[data-bs-theme="dark"] .zvv-tx-table tbody tr:hover { background: rgba(189,147,249,0.06); }
[data-bs-theme="dark"] .zvv-tx-table thead th       { color: rgba(189,147,249,0.55); }
[data-bs-theme="dark"] .zvv-tx-table tr             { border-bottom-color: rgba(189,147,249,0.08); }

/* Analytics */
[data-bs-theme="dark"] .zvv-analytics-stat     { background: #1e1f2e; border-color: #44475a; }
[data-bs-theme="dark"] .zvv-analytics-stat-num { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-analytics-chart-title { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-analytics-top-title   { color: #cba6f7; }
[data-bs-theme="dark"] .zvv-analytics-top-title:hover { color: #ff79c6; }
[data-bs-theme="dark"] .zvv-analytics-top-views strong { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-analytics-top-row:hover { background: rgba(189,147,249,0.06); }

/* Inbox / messages */
[data-bs-theme="dark"] .zvv-inbox-stat     { background: #1e1f2e; border-color: #44475a; }
[data-bs-theme="dark"] .zvv-inbox-stat-num { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-inbox-row-name { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-inbox-unread .zvv-inbox-row-name { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-inbox-row-subject { color: #cba6f7; }
[data-bs-theme="dark"] .zvv-inbox-unread .zvv-inbox-row-subject { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-inbox-row:hover { background: rgba(189,147,249,0.06); }
[data-bs-theme="dark"] .zvv-inbox-panel-hd  { background: rgba(189,147,249,0.06); }
[data-bs-theme="dark"] .zvv-inbox-tab.active { background: rgba(189,147,249,0.14); box-shadow: none; }
[data-bs-theme="dark"] .zvv-inbox-compose-hd { background: rgba(189,147,249,0.06); }
[data-bs-theme="dark"] .zvv-inbox-textarea { background: #282a36; border-color: #44475a; color: #f8f8f2; }

/* Message detail */
[data-bs-theme="dark"] .zvv-msgv-subject-bar { background: rgba(189,147,249,0.06); }
[data-bs-theme="dark"] .zvv-msgv-subject     { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-msgv-body        { background: #282a36; border-color: #44475a; color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-msgv-participant-name { color: #f8f8f2; }

/* Fund wallet */
[data-bs-theme="dark"] .zvv-fund-provider-card,
[data-bs-theme="dark"] .zvv-fund-exchange-card,
[data-bs-theme="dark"] .zvv-fund-earn-card { background: #1e1f2e; border-color: #44475a; }
[data-bs-theme="dark"] .zvv-fund-provider-body strong,
[data-bs-theme="dark"] .zvv-fund-exchange-head > div strong,
[data-bs-theme="dark"] .zvv-fund-earn-body strong { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-fund-receive-card { background: #1e1f2e; border-color: #44475a; }

/* Author page */
[data-bs-theme="dark"] .zvv-author-card        { background: #1e1f2e; border-color: #44475a; }
[data-bs-theme="dark"] .zvv-author-post-card   { background: #1e1f2e; border-color: #44475a; }
[data-bs-theme="dark"] .zvv-author-post-title a { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-author-post-title a:hover { color: #ff79c6; }

/* Profile page */
[data-bs-theme="dark"] .zvv-pf-wrap .form-control { background: #282a36; border-color: #44475a; color: #f8f8f2; }

/* Post page hero */
[data-bs-theme="dark"] .zvv-post-hero          { background: linear-gradient(180deg, #1e1f2e 0%, #13141f 100%); }
[data-bs-theme="dark"] .zvv-post-title         { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-post-meta          { color: #6272a4; }
[data-bs-theme="dark"] .zvv-bc-strip           { background: #1e1f2e; border-color: #44475a; }
[data-bs-theme="dark"] .zvv-bc a              { color: #6272a4; }
[data-bs-theme="dark"] .zvv-bc a:hover        { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-bc-current        { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-bc-sep            { color: #44475a; }

/* Reward banner */
[data-bs-theme="dark"] .reward-announcement   { background: rgba(241,250,140,0.06); border-color: rgba(241,250,140,0.2); color: #f1fa8c; }
[data-bs-theme="dark"] .zvv-reward-banner     { background: rgba(80,250,123,0.07); border-color: rgba(80,250,123,0.2); color: #50fa7b; }

/* ══════════════════════════════════════════════════════════════
   POST TAGS
══════════════════════════════════════════════════════════════ */

/* Tag badge (used in post.php and form previews) */
.zvv-post-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 11px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    background: rgba(124,58,237,0.09);
    color: #7c3aed;
    border: 1.5px solid rgba(124,58,237,0.18);
    text-decoration: none;
    transition: background .18s, color .18s, border-color .18s;
    cursor: pointer;
}
a.zvv-post-tag:hover {
    background: rgba(124,58,237,0.18);
    color: #5b21b6;
    border-color: rgba(124,58,237,0.4);
    text-decoration: none;
}

/* Tag row on post.php */
.zvv-post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 16px 0;
    border-top: 1.5px solid var(--zvv-line, rgba(124,58,237,0.1));
    margin-bottom: 4px;
}
.zvv-post-tags-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--zvv-muted, #6272a4);
    margin-right: 4px;
}

/* Tag preview inside forms */
.zvv-tag-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

/* Dracula dark mode */
[data-bs-theme="dark"] .zvv-post-tag {
    background: rgba(189,147,249,0.1);
    color: #bd93f9;
    border-color: rgba(189,147,249,0.25);
}
[data-bs-theme="dark"] a.zvv-post-tag:hover {
    background: rgba(189,147,249,0.2);
    color: #ff79c6;
    border-color: rgba(189,147,249,0.45);
}
[data-bs-theme="dark"] .zvv-post-tags {
    border-top-color: #44475a;
}
[data-bs-theme="dark"] .zvv-post-tags-label {
    color: #6272a4;
}

/* ══════════════════════════════════════════════════════════════
   TAG CLOUD WIDGET
══════════════════════════════════════════════════════════════ */

.zvv-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 2px;
}

/* Size variants — font size driven by frequency */
.zvv-tag-cloud-item {
    transition: background .18s, color .18s, border-color .18s, transform .15s;
}
.zvv-tag-cloud-item:hover {
    transform: translateY(-2px);
}

.zvv-tag-cloud-sm {
    font-size: 11px;
    padding: 3px 10px;
    opacity: .85;
}
.zvv-tag-cloud-md {
    font-size: 12.5px;
    padding: 4px 12px;
}
.zvv-tag-cloud-lg {
    font-size: 13.5px;
    padding: 5px 14px;
    font-weight: 700;
    background: rgba(124,58,237,0.14);
    border-color: rgba(124,58,237,0.3);
}
.zvv-tag-cloud-lg:hover {
    background: rgba(124,58,237,0.24) !important;
}

/* Dracula dark */
[data-bs-theme="dark"] .zvv-tag-cloud-lg {
    background: rgba(189,147,249,0.18);
    border-color: rgba(189,147,249,0.38);
    color: #f8f8f2;
}
[data-bs-theme="dark"] .zvv-tag-cloud-lg:hover {
    background: rgba(189,147,249,0.28) !important;
    color: #ff79c6;
}
[data-bs-theme="dark"] .zvv-tag-cloud-sm {
    opacity: .75;
}

/* Tag cloud active state (when that tag is the current search) */
.zvv-tag-cloud-active {
    background: rgba(124,58,237,0.22) !important;
    color: #5b21b6 !important;
    border-color: rgba(124,58,237,0.5) !important;
    font-weight: 700;
}
[data-bs-theme="dark"] .zvv-tag-cloud-active {
    background: rgba(189,147,249,0.28) !important;
    color: #ff79c6 !important;
    border-color: rgba(189,147,249,0.55) !important;
}

/* ══════════════════════════════════════════════════════════════
   TRANSACTION DETAIL MODAL  (zvv-txm-*)
══════════════════════════════════════════════════════════════ */

/* Clickable reference link in table */
.zvv-tx-ref-link {
    text-decoration: none;
    display: inline-block;
}
.zvv-tx-ref-link .zvv-tx-ref {
    color: #7c3aed;
    transition: color .18s;
    cursor: pointer;
    border-bottom: 1.5px dashed rgba(124,58,237,0.35);
    padding-bottom: 1px;
}
.zvv-tx-ref-link:hover .zvv-tx-ref {
    color: #4f46e5;
    border-bottom-color: #4f46e5;
}

/* Modal dialog sizing */
.zvv-txm-dialog {
    max-width: 480px;
}

/* Modal content shell */
.zvv-txm-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 64px rgba(124,58,237,0.18), 0 4px 16px rgba(0,0,0,0.08);
}

/* Header bar */
.zvv-txm-hd {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px 16px;
    border-bottom: 1.5px solid rgba(124,58,237,0.08);
}
.zvv-txm-hd-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.zvv-txm-hd-icon.credit { background: rgba(34,197,94,0.12); color: #16a34a; }
.zvv-txm-hd-icon.debit  { background: rgba(239,68,68,0.12);  color: #dc2626; }
.zvv-txm-hd-meta { flex: 1; min-width: 0; }
.zvv-txm-label {
    display: block;
    font-size: 11px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: #9ca3af;
    margin-bottom: 2px;
}
.zvv-txm-ref {
    font-size: 15px; font-weight: 700; color: #1a0f4a;
    margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zvv-txm-close {
    background: none; border: none;
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #9ca3af; font-size: 15px; cursor: pointer;
    transition: background .18s, color .18s;
    flex-shrink: 0;
}
.zvv-txm-close:hover { background: rgba(124,58,237,0.08); color: #7c3aed; }

/* Amount hero row */
.zvv-txm-amount-row {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 24px 14px;
    background: linear-gradient(135deg, rgba(124,58,237,0.04), rgba(79,70,229,0.03));
    border-bottom: 1.5px solid rgba(124,58,237,0.07);
}
.zvv-txm-amount {
    font-size: 1.6rem; font-weight: 800; font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -.5px;
}
.zvv-txm-amount.credit { color: #16a34a; }
.zvv-txm-amount.debit  { color: #dc2626; }

/* Detail body */
.zvv-txm-body {
    padding: 6px 24px 4px;
}
.zvv-txm-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(124,58,237,0.06);
}
.zvv-txm-row:last-child { border-bottom: none; }
.zvv-txm-row-label {
    flex: 0 0 130px;
    font-size: 12px; font-weight: 600; color: #9ca3af;
    display: flex; align-items: center; gap: 6px;
}
.zvv-txm-row-label i { font-size: 13px; color: #c4b5fd; }
.zvv-txm-row-val {
    flex: 1; font-size: 13px; font-weight: 500; color: #1a0f4a;
    word-break: break-all;
}
.zvv-txm-row-val code { font-size: 12px; color: #7c3aed; background: rgba(124,58,237,0.07); padding: 2px 6px; border-radius: 5px; }

/* Status badges inside modal */
.zvv-txm-status-badge {
    display: inline-block; padding: 3px 10px; border-radius: 99px;
    font-size: 12px; font-weight: 600; letter-spacing: .3px;
}
.zvv-txm-status-completed { background: rgba(34,197,94,0.1);  color: #16a34a; }
.zvv-txm-status-pending   { background: rgba(234,179,8,0.12); color: #b45309; }
.zvv-txm-status-failed    { background: rgba(239,68,68,0.1);  color: #dc2626; }

/* Report section */
.zvv-txm-report {
    padding: 14px 24px 20px;
    border-top: 1.5px solid rgba(124,58,237,0.07);
}
.zvv-txm-report-toggle {
    background: none; border: none; padding: 0;
    font-size: 13px; font-weight: 600; color: #9ca3af;
    cursor: pointer; display: flex; align-items: center; gap: 7px;
    transition: color .18s;
}
.zvv-txm-report-toggle:hover { color: #ef4444; }
.zvv-txm-report-toggle i { font-size: 14px; }

.zvv-txm-report-form { margin-top: 12px; }
.zvv-txm-report-label {
    display: block; font-size: 12px; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
}
.zvv-txm-report-textarea {
    width: 100%; border: 1.5px solid rgba(124,58,237,0.15);
    border-radius: 12px; padding: 10px 13px;
    font-size: 13px; resize: none; outline: none;
    font-family: inherit; color: #1a0f4a;
    transition: border-color .18s, box-shadow .18s;
}
.zvv-txm-report-textarea:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.zvv-txm-report-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px;
}
.zvv-txm-report-chars { font-size: 11px; color: #9ca3af; }
.zvv-txm-report-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: opacity .18s, transform .18s;
}
.zvv-txm-report-btn:hover  { opacity: .88; transform: translateY(-1px); }
.zvv-txm-report-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.zvv-txm-report-feedback {
    margin-top: 10px; padding: 10px 13px; border-radius: 10px;
    font-size: 13px; font-weight: 500;
}
.zvv-txm-report-feedback.success { background: rgba(34,197,94,0.1);  color: #15803d; }
.zvv-txm-report-feedback.error   { background: rgba(239,68,68,0.1);  color: #b91c1c; }

/* ── Dracula dark ── */
[data-bs-theme="dark"] .zvv-txm-content {
    background: #1e1f2e;
    box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.3);
}
[data-bs-theme="dark"] .zvv-txm-hd { border-bottom-color: #44475a; }
[data-bs-theme="dark"] .zvv-txm-ref { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-txm-close:hover { background: rgba(189,147,249,0.1); color: #bd93f9; }
[data-bs-theme="dark"] .zvv-txm-amount-row { background: rgba(189,147,249,0.05); border-bottom-color: #44475a; }
[data-bs-theme="dark"] .zvv-txm-amount.credit { color: #50fa7b; }
[data-bs-theme="dark"] .zvv-txm-amount.debit  { color: #ff5555; }
[data-bs-theme="dark"] .zvv-txm-row { border-bottom-color: #44475a; }
[data-bs-theme="dark"] .zvv-txm-row-val { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-txm-row-val code { background: rgba(189,147,249,0.1); color: #bd93f9; }
[data-bs-theme="dark"] .zvv-txm-row-label { color: #6272a4; }
[data-bs-theme="dark"] .zvv-txm-row-label i { color: #6272a4; }
[data-bs-theme="dark"] .zvv-txm-report { border-top-color: #44475a; }
[data-bs-theme="dark"] .zvv-txm-report-textarea {
    background: #282a36; border-color: #44475a; color: #f8f8f2;
}
[data-bs-theme="dark"] .zvv-txm-report-textarea:focus {
    border-color: #bd93f9; box-shadow: 0 0 0 3px rgba(189,147,249,0.15);
}
[data-bs-theme="dark"] .zvv-tx-ref-link .zvv-tx-ref { color: #bd93f9; border-bottom-color: rgba(189,147,249,0.35); }
[data-bs-theme="dark"] .zvv-tx-ref-link:hover .zvv-tx-ref { color: #ff79c6; border-bottom-color: #ff79c6; }
[data-bs-theme="dark"] .zvv-txm-hd-icon.credit { background: rgba(80,250,123,0.12); color: #50fa7b; }
[data-bs-theme="dark"] .zvv-txm-hd-icon.debit  { background: rgba(255,85,85,0.12);  color: #ff5555; }

/* ══════════════════════════════════════════════════════════════
   ADMIN DARK-MODE ISOLATION
   Admin pages carry data-admin="true" on <html>.
   This overrides any accidental data-bs-theme="dark" the JS
   might set, forcing every element back to light values.
══════════════════════════════════════════════════════════════ */

[data-admin="true"],
[data-admin="true"] * {
    color-scheme: light only;
}

[data-admin="true"][data-bs-theme="dark"] body,
[data-admin="true"][data-bs-theme="dark"] .zvv-admin-body {
    background: #f8f7ff !important;
    color: #1a0f4a !important;
}

/* Nuke every dark-mode rule when on an admin page */
[data-admin="true"][data-bs-theme="dark"] .zvv-tx-table,
[data-admin="true"][data-bs-theme="dark"] .zvv-tx-table th,
[data-admin="true"][data-bs-theme="dark"] .zvv-tx-table td,
[data-admin="true"][data-bs-theme="dark"] .zvv-tx-table tbody tr,
[data-admin="true"][data-bs-theme="dark"] .zvv-admin-card,
[data-admin="true"][data-bs-theme="dark"] .zvv-admin-shell,
[data-admin="true"][data-bs-theme="dark"] .zvv-admin-sidebar,
[data-admin="true"][data-bs-theme="dark"] .zvv-admin-main,
[data-admin="true"][data-bs-theme="dark"] .zvv-admin-topbar,
[data-admin="true"][data-bs-theme="dark"] .form-control,
[data-admin="true"][data-bs-theme="dark"] .form-select,
[data-admin="true"][data-bs-theme="dark"] .zvv-admin-form-input,
[data-admin="true"][data-bs-theme="dark"] .zvv-admin-form-select {
    background: revert !important;
    background-color: revert !important;
    color: revert !important;
    border-color: revert !important;
    box-shadow: revert !important;
}

/* ══════════════════════════════════════════════════════════════
   ADMIN REPORTED TRANSACTIONS  (zvv-rpt-*)
══════════════════════════════════════════════════════════════ */

/* Red badge variant for sidebar */
.zvv-admin-nav-badge-red {
    background: #ef4444 !important;
    color: #fff !important;
}

/* Page title count badge */
.zvv-rpt-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px; height: 24px;
    padding: 0 7px;
    border-radius: 99px;
    background: #ef4444;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    vertical-align: middle;
    margin-left: 10px;
}

/* Tab bar badge */
.zvv-rpt-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    margin-left: 5px;
    vertical-align: middle;
}

/* Email-style reports inbox */
.zvv-rpt-inbox-list {
    display: flex;
    flex-direction: column;
}

.zvv-rpt-inbox-row {
    align-items: center;
    border-bottom: 1px solid rgba(124,58,237,0.08);
    color: #374151;
    display: grid;
    gap: 12px;
    grid-template-columns: 12px minmax(120px, 180px) minmax(0, 1fr) auto 58px;
    padding: 13px 18px;
    text-decoration: none;
    transition: background .16s, color .16s;
}

.zvv-rpt-inbox-row:last-child {
    border-bottom: 0;
}

.zvv-rpt-inbox-row:hover {
    background: rgba(124,58,237,0.045);
    color: #1a0f4a;
}

.zvv-rpt-inbox-row.unread {
    background: #fff;
    color: #111827;
    font-weight: 800;
}

.zvv-rpt-inbox-unread {
    background: transparent;
    border-radius: 50%;
    height: 8px;
    width: 8px;
}

.zvv-rpt-inbox-row.unread .zvv-rpt-inbox-unread {
    background: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}

.zvv-rpt-inbox-from,
.zvv-rpt-inbox-date {
    font-size: 12.5px;
    white-space: nowrap;
}

.zvv-rpt-inbox-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.zvv-rpt-inbox-title,
.zvv-rpt-inbox-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zvv-rpt-inbox-title {
    color: inherit;
    font-size: 13.5px;
}

.zvv-rpt-inbox-preview {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px;
}

.zvv-rpt-inbox-date {
    color: #9ca3af;
    justify-self: end;
}

.zvv-rpt-detail-head {
    align-items: center;
    border-bottom: 1px solid rgba(124,58,237,0.08);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
}

.zvv-rpt-detail {
    padding: 20px 24px 24px;
}

.zvv-rpt-message-head {
    align-items: flex-start;
    border-bottom: 1px solid rgba(124,58,237,0.08);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 16px;
}

.zvv-rpt-message-subject {
    color: #111827;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
}

.zvv-rpt-message-meta {
    color: #6b7280;
    font-size: 12.5px;
    margin-top: 6px;
}

.zvv-rpt-read-chip {
    align-items: center;
    background: rgba(34,197,94,0.1);
    border-radius: 999px;
    color: #15803d;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    gap: 6px;
    padding: 5px 10px;
}

@media (max-width: 760px) {
    .zvv-rpt-inbox-row {
        grid-template-columns: 12px minmax(0, 1fr) auto;
    }

    .zvv-rpt-inbox-from,
    .zvv-rpt-inbox-date {
        display: none;
    }

    .zvv-rpt-message-head,
    .zvv-rpt-detail-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Filter tabs */
.zvv-admin-filter-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.zvv-admin-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    text-decoration: none;
    transition: background .18s, color .18s;
}
.zvv-admin-filter-tab span {
    font-size: 11px;
    background: #e5e7eb;
    color: #6b7280;
    padding: 1px 7px;
    border-radius: 99px;
    font-weight: 700;
}
.zvv-admin-filter-tab:hover {
    background: #ede9fe;
    color: #7c3aed;
}
.zvv-admin-filter-tab.active {
    background: #7c3aed;
    color: #fff;
}
.zvv-admin-filter-tab.active span {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* Report card list */
.zvv-rpt-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zvv-rpt-card {
    border-bottom: 1.5px solid rgba(124,58,237,0.07);
    padding: 20px 24px;
    transition: background .18s;
}
.zvv-rpt-card:last-child { border-bottom: none; }
.zvv-rpt-card:hover { background: rgba(124,58,237,0.02); }
.zvv-rpt-card-pending  { border-left: 3.5px solid #f59e0b; }
.zvv-rpt-card-reviewed { border-left: 3.5px solid #22c55e; opacity: .85; }
.zvv-rpt-card-dismissed { border-left: 3.5px solid #d1d5db; opacity: .7; }

/* Report header row */
.zvv-rpt-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}
.zvv-rpt-hd-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.zvv-rpt-status-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.zvv-rpt-dot-pending   { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }
.zvv-rpt-dot-reviewed  { background: #22c55e; }
.zvv-rpt-dot-dismissed { background: #d1d5db; }

.zvv-rpt-id   { font-size: 12px; font-weight: 700; color: #1a0f4a; margin-right: 8px; }
.zvv-rpt-date { font-size: 11px; color: #9ca3af; }

.zvv-rpt-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 700;
}
.zvv-rpt-status-pending   { background: rgba(245,158,11,0.12); color: #b45309; }
.zvv-rpt-status-reviewed  { background: rgba(34,197,94,0.12);  color: #15803d; }
.zvv-rpt-status-dismissed { background: #f3f4f6; color: #6b7280; }

/* Two-col body */
.zvv-rpt-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}
@media (max-width: 640px) {
    .zvv-rpt-body { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .zvv-tx-filter .select2-container {
        width: 100% !important;
    }
}

.zvv-rpt-section {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1.5px solid #f3f4f6;
}
.zvv-rpt-section-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}
.zvv-rpt-reporter-name { font-size: 13px; font-weight: 700; color: #1a0f4a; }
.zvv-rpt-reporter-email { font-size: 12px; color: #6b7280; }
.zvv-rpt-user-link {
    font-size: 11.5px; font-weight: 600; color: #7c3aed;
    text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
    margin-top: 4px;
}
.zvv-rpt-user-link:hover { color: #4f46e5; }

.zvv-rpt-tx-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}
.zvv-rpt-tx-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Reason block */
.zvv-rpt-reason {
    background: rgba(239,68,68,0.04);
    border: 1.5px solid rgba(239,68,68,0.1);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.zvv-rpt-reason-text {
    font-size: 13px;
    color: #374151;
    margin: 4px 0 0;
    line-height: 1.6;
}

/* Admin note */
.zvv-rpt-admin-note {
    background: rgba(124,58,237,0.04);
    border: 1.5px solid rgba(124,58,237,0.1);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #374151;
}

/* Action buttons */
.zvv-rpt-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.zvv-rpt-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    border: 1.5px solid;
    cursor: pointer;
    transition: background .18s, color .18s;
    background: transparent;
}
.zvv-rpt-btn-review  { border-color: #22c55e; color: #15803d; }
.zvv-rpt-btn-review:hover  { background: rgba(34,197,94,0.1); }
.zvv-rpt-btn-dismiss { border-color: #d1d5db; color: #6b7280; }
.zvv-rpt-btn-dismiss:hover { background: #f3f4f6; }

/* Inline action form */
.zvv-rpt-inline-form {
    margin-top: 12px;
    padding: 14px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
}
.zvv-rpt-inline-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6b7280;
    margin-bottom: 6px;
}
.zvv-rpt-inline-textarea {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    resize: none;
    outline: none;
    transition: border-color .18s;
}
.zvv-rpt-inline-textarea:focus { border-color: #7c3aed; }

/* Reviewed-by line */
.zvv-rpt-reviewed-by {
    font-size: 11.5px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

/* Empty state */
.zvv-admin-empty {
    text-align: center;
    padding: 48px 24px;
    color: #9ca3af;
}
.zvv-admin-empty p { margin: 10px 0 0; font-size: 14px; }

/* ── Revoke transaction button & panel ── */
.zvv-rpt-btn-revoke {
    border-color: #ef4444;
    color: #dc2626;
}
.zvv-rpt-btn-revoke:hover {
    background: rgba(239,68,68,0.08);
}

.zvv-rpt-already-revoked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #9ca3af;
    border: 1.5px solid #e5e7eb;
    border-radius: 9px;
}

.zvv-rpt-revoke-panel {
    border: 1.5px solid rgba(239,68,68,0.25);
    background: rgba(239,68,68,0.03);
}

.zvv-rpt-revoke-warning {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    background: rgba(239,68,68,0.07);
    border: 1.5px solid rgba(239,68,68,0.18);
    border-radius: 9px;
    font-size: 13px;
    color: #b91c1c;
    margin-bottom: 12px;
    line-height: 1.5;
}
.zvv-rpt-revoke-warning i {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.zvv-rpt-revoke-tx-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f9fafb;
    border-radius: 9px;
    border: 1.5px solid #f3f4f6;
    margin-bottom: 12px;
}

.zvv-rpt-btn-revoke-confirm {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 9px;
    border: none;
    background: #dc2626;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, transform .15s;
}
.zvv-rpt-btn-revoke-confirm:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

/* ── My Reports — sidebar badge ── */
.zvv-dash-nav-badge-red {
    background: #ef4444;
}

/* ── My Reports — dashboard compact section ── */
.zvv-myrpt-panel {
    margin-top: 18px;
}

.zvv-myrpt-panel .zvv-myrpt-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.zvv-myrpt-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background .15s;
}
.zvv-myrpt-row:last-child { border-bottom: none; }
.zvv-myrpt-row:hover { background: rgba(0,0,0,0.02); }

.zvv-myrpt-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.zvv-myrpt-reason {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zvv-myrpt-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}
.zvv-myrpt-date {
    font-size: 11px;
    color: #9ca3af;
}

/* Status pills */
.zvv-myrpt-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.zvv-myrpt-status-pending   { background: rgba(245,158,11,0.12); color: #b45309; }
.zvv-myrpt-status-reviewed  { background: rgba(16,185,129,0.12); color: #047857; }
.zvv-myrpt-status-dismissed { background: rgba(107,114,128,0.12); color: #4b5563; }

/* ── My Reports — full page layout ── */
.zvv-myrpt-page {
    padding: 32px 28px 60px;
    max-width: 900px;
}
@media (max-width: 768px) { .zvv-myrpt-page { padding: 20px 16px 40px; } }

.zvv-myrpt-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.zvv-section-sub {
    font-size: 13.5px;
    color: #6b7280;
    max-width: 500px;
}

/* Filter tabs */
.zvv-myrpt-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.zvv-myrpt-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 9px;
    border: 1.5px solid #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    transition: all .15s;
}
.zvv-myrpt-tab:hover { border-color: #a78bfa; color: #7c3aed; }
.zvv-myrpt-tab.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.zvv-myrpt-tab-count {
    background: rgba(0,0,0,0.12);
    border-radius: 20px;
    padding: 1px 7px;
    font-size: 11px;
}
.zvv-myrpt-tab.active .zvv-myrpt-tab-count { background: rgba(255,255,255,0.25); }

/* Report cards */
.zvv-myrpt-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.zvv-myrpt-card {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .18s;
}
.zvv-myrpt-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.07); }

.zvv-myrpt-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    flex-wrap: wrap;
}
.zvv-myrpt-card-ref {
    display: flex;
    align-items: center;
    gap: 10px;
}
.zvv-myrpt-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.zvv-myrpt-card-body {
    display: flex;
    gap: 0;
    padding: 12px 20px;
    border-bottom: 1px solid #f3f4f6;
    flex-wrap: wrap;
}
.zvv-myrpt-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 20px 6px 0;
    min-width: 150px;
}
.zvv-myrpt-detail-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9ca3af;
}
.zvv-myrpt-detail-val {
    font-size: 12.5px;
    color: #374151;
    font-weight: 500;
}

.zvv-myrpt-reason-block,
.zvv-myrpt-admin-note,
.zvv-myrpt-pending-note {
    padding: 14px 20px;
}
.zvv-myrpt-admin-note {
    background: rgba(16,185,129,0.04);
    border-top: 1px solid rgba(16,185,129,0.12);
}
.zvv-myrpt-reason-text {
    font-size: 13.5px;
    color: #374151;
    margin: 6px 0 0;
    line-height: 1.6;
}
.zvv-myrpt-pending-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    background: rgba(245,158,11,0.05);
    border-top: 1px solid rgba(245,158,11,0.12);
}

/* Dark mode overrides for my-reports */
[data-bs-theme="dark"] .zvv-myrpt-row:hover { background: rgba(255,255,255,0.03); }
[data-bs-theme="dark"] .zvv-myrpt-row       { border-bottom-color: rgba(255,255,255,0.06); }
[data-bs-theme="dark"] .zvv-myrpt-card      { background: #1e1f2e; border-color: #44475a; }
[data-bs-theme="dark"] .zvv-myrpt-card-head { border-bottom-color: rgba(255,255,255,0.06); }
[data-bs-theme="dark"] .zvv-myrpt-card-body { border-bottom-color: rgba(255,255,255,0.06); }
[data-bs-theme="dark"] .zvv-myrpt-tab       { border-color: #44475a; color: #6272a4; }
[data-bs-theme="dark"] .zvv-myrpt-tab:hover { border-color: #bd93f9; color: #bd93f9; }
[data-bs-theme="dark"] .zvv-myrpt-reason-text  { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-myrpt-detail-val   { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-myrpt-admin-note   { background: rgba(80,250,123,0.05); border-color: rgba(80,250,123,0.15); }
[data-bs-theme="dark"] .zvv-myrpt-pending-note { background: rgba(241,196,15,0.05); border-color: rgba(241,196,15,0.12); color: #6272a4; }
[data-bs-theme="dark"] .zvv-section-sub        { color: #6272a4; }

/* ── My Reports — inbox list ── */
.zvv-inbox-page {
    padding: 32px 28px 60px;
    max-width: 860px;
}
@media (max-width: 768px) { .zvv-inbox-page { padding: 20px 16px 40px; } }

.zvv-inbox-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.zvv-inbox-table {
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.zvv-inbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    color: inherit;
    transition: background .13s;
    cursor: pointer;
}
.zvv-inbox-row:last-child { border-bottom: none; }
.zvv-inbox-row:hover { background: rgba(124,58,237,0.04); text-decoration: none; color: inherit; }
.zvv-inbox-row-unread { background: rgba(124,58,237,0.03); }
.zvv-inbox-row-unread:hover { background: rgba(124,58,237,0.07); }

.zvv-inbox-dot {
    width: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zvv-inbox-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7c3aed;
    display: block;
}

.zvv-inbox-num {
    font-size: 11.5px;
    font-weight: 700;
    color: #9ca3af;
    flex-shrink: 0;
    width: 34px;
    font-family: 'Space Grotesk', monospace;
}
.zvv-inbox-row-unread .zvv-inbox-num { color: #7c3aed; }

.zvv-inbox-status {
    flex-shrink: 0;
}

.zvv-inbox-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 6px;
}
.zvv-inbox-ref {
    font-size: 12.5px;
    font-family: 'Space Grotesk', monospace;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zvv-inbox-row-unread .zvv-inbox-ref { color: #1a0f4a; }
.zvv-inbox-excerpt {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zvv-inbox-row-unread .zvv-inbox-excerpt { color: #6b7280; }

.zvv-inbox-date {
    font-size: 11.5px;
    color: #9ca3af;
    flex-shrink: 0;
    white-space: nowrap;
}

.zvv-inbox-chevron {
    color: #d1d5db;
    font-size: 12px;
    flex-shrink: 0;
    transition: transform .15s;
}
.zvv-inbox-row:hover .zvv-inbox-chevron { transform: translateX(3px); color: #7c3aed; }

/* ── My Report Detail Page ── */
.zvv-report-detail-page {
    padding: 32px 28px 60px;
    max-width: 960px;
}
@media (max-width: 768px) { .zvv-report-detail-page { padding: 20px 16px 40px; } }

.zvv-report-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #7c3aed;
    text-decoration: none;
    margin-bottom: 20px;
    transition: gap .15s;
}
.zvv-report-back:hover { gap: 10px; color: #6d28d9; text-decoration: none; }

.zvv-report-hd-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.zvv-report-hd-meta {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 4px;
}

.zvv-report-detail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 18px;
    align-items: start;
}
@media (max-width: 840px) {
    .zvv-report-detail-grid { grid-template-columns: 1fr; }
}

.zvv-report-section {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
.zvv-report-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7280;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.zvv-report-tx-card {
    border: 1.5px solid #f3f4f6;
    border-radius: 12px;
    overflow: hidden;
}
.zvv-report-tx-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
}
.zvv-report-tx-meta {
    display: flex;
    gap: 24px;
    padding: 10px 16px;
    flex-wrap: wrap;
}

.zvv-report-reason-box {
    background: #f9fafb;
    border: 1.5px solid #f3f4f6;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 14px;
    color: #374151;
    line-height: 1.7;
}

/* Timeline */
.zvv-report-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.zvv-report-tl-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 18px;
    position: relative;
}
.zvv-report-tl-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
}
.zvv-report-tl-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
    color: #9ca3af;
    position: relative;
    z-index: 1;
}
.zvv-report-tl-done .zvv-report-tl-dot {
    background: rgba(124,58,237,0.1);
    border-color: #a78bfa;
    color: #7c3aed;
}
.zvv-report-tl-revoke .zvv-report-tl-dot {
    background: rgba(239,68,68,0.1);
    border-color: #fca5a5;
    color: #dc2626;
}
.zvv-report-tl-item > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
}
.zvv-report-tl-item > div strong { font-size: 13.5px; color: #1f2937; }
.zvv-report-tl-item > div span   { font-size: 12px; color: #6b7280; }

/* Admin response box */
.zvv-report-admin-note {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13.5px;
    color: #166534;
    line-height: 1.7;
}
.zvv-report-admin-note-dismissed {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #374151;
}

/* Dark mode */
[data-bs-theme="dark"] .zvv-inbox-table    { background: #1e1f2e; border-color: #44475a; }
[data-bs-theme="dark"] .zvv-inbox-row      { border-bottom-color: rgba(255,255,255,0.06); color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-inbox-row:hover { background: rgba(189,147,249,0.07); }
[data-bs-theme="dark"] .zvv-inbox-row-unread { background: rgba(189,147,249,0.05); }
[data-bs-theme="dark"] .zvv-inbox-ref      { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-inbox-row-unread .zvv-inbox-ref { color: #fff; }
[data-bs-theme="dark"] .zvv-inbox-unread-dot { background: #bd93f9; }
[data-bs-theme="dark"] .zvv-inbox-row-unread .zvv-inbox-num { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-report-hd-card  { background: #1e1f2e; border-color: #44475a; }
[data-bs-theme="dark"] .zvv-report-section  { background: #1e1f2e; border-color: #44475a; }
[data-bs-theme="dark"] .zvv-report-tx-card  { border-color: #44475a; }
[data-bs-theme="dark"] .zvv-report-tx-row   { border-bottom-color: rgba(255,255,255,0.06); }
[data-bs-theme="dark"] .zvv-report-reason-box { background: rgba(255,255,255,0.03); border-color: #44475a; color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-report-admin-note { background: rgba(80,250,123,0.06); border-color: rgba(80,250,123,0.2); color: #50fa7b; }
[data-bs-theme="dark"] .zvv-report-admin-note-dismissed { background: rgba(255,255,255,0.04); border-color: #44475a; color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-report-tl-item > div strong { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-report-tl-item:not(:last-child)::before { background: #44475a; }

/* ══════════════════════════════════════════
   Contact Us Page
   ══════════════════════════════════════════ */

/* Hero */
.zvv-contact-hero {
    background: linear-gradient(135deg, #1a0f4a 0%, #4f46e5 55%, #7c3aed 100%);
    padding: 72px 24px 64px;
    text-align: center;
}
.zvv-contact-hero-inner { max-width: 640px; margin: 0 auto; }
.zvv-contact-hero .zvv-section-eyebrow { color: rgba(255,255,255,0.6); }
.zvv-contact-hero-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #fff;
    margin: 8px 0 16px;
    letter-spacing: -1px;
}
.zvv-contact-hero-sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto;
}
.zvv-contact-hero-sub strong { color: #fff; }

/* Page wrapper */
.zvv-contact-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}

/* Two-col grid */
.zvv-contact-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 860px) {
    .zvv-contact-grid { grid-template-columns: 1fr; }
    .zvv-contact-info-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 540px) {
    .zvv-contact-info-col { grid-template-columns: 1fr; }
}

/* Form card */
.zvv-contact-form-card {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    padding: 32px 36px 36px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.05);
}
.zvv-contact-form-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a0f4a;
    margin: 0 0 6px;
}
.zvv-contact-form-sub {
    font-size: 13.5px;
    color: #6b7280;
    margin: 0 0 24px;
}

/* Field layout */
.zvv-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 560px) { .zvv-contact-row { grid-template-columns: 1fr; } }

.zvv-contact-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
}
.zvv-contact-row .zvv-contact-field { margin-bottom: 0; }

.zvv-contact-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.zvv-contact-req { color: #ef4444; }

.zvv-contact-input {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    color: #1f2937;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
    appearance: none;
}

.zvv-contact-input-wrap {
    position: relative;
}

.zvv-contact-input-with-icon {
    padding-left: 42px;
}

.zvv-contact-field-icon {
    color: #7c3aed;
    font-size: 15px;
    left: 14px;
    opacity: 0.72;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.zvv-contact-field-icon-top {
    top: 17px;
    transform: none;
}

.zvv-contact-input-wrap:focus-within .zvv-contact-field-icon {
    opacity: 1;
}

.zvv-contact-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
.zvv-contact-input-prefilled {
    background: #faf5ff;
    border-color: #c4b5fd;
    color: #5b21b6;
    cursor: default;
}
.zvv-contact-select { cursor: pointer; }
.zvv-contact-textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.65;
}

.zvv-contact-prefill-note {
    font-size: 11px;
    font-weight: 600;
    color: #7c3aed;
    display: flex;
    align-items: center;
    gap: 4px;
}

.zvv-contact-char-count {
    font-size: 11.5px;
    color: #9ca3af;
    text-align: right;
    margin-top: 4px;
}

/* reCAPTCHA */
.zvv-contact-captcha {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Submit button */
.zvv-contact-submit {
    width: 100%;
    padding: 13px 24px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity .18s, transform .15s, box-shadow .18s;
    box-shadow: 0 4px 20px rgba(124,58,237,0.3);
    margin-top: 4px;
}
.zvv-contact-submit:hover {
    opacity: .92;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124,58,237,0.38);
}

/* Success + error states */
.zvv-contact-success {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(16,185,129,0.07);
    border: 1.5px solid rgba(16,185,129,0.25);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 24px;
}
.zvv-contact-success-icon {
    font-size: 22px;
    color: #059669;
    flex-shrink: 0;
    line-height: 1;
    padding-top: 1px;
}
.zvv-contact-success strong { display: block; font-size: 14px; color: #065f46; margin-bottom: 2px; }
.zvv-contact-success p { margin: 0; font-size: 13px; color: #047857; }

.zvv-contact-errors {
    background: rgba(239,68,68,0.06);
    border: 1.5px solid rgba(239,68,68,0.2);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zvv-contact-errors div {
    font-size: 13.5px;
    color: #b91c1c;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Info cards (right col) */
.zvv-contact-info-card {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
    transition: box-shadow .18s;
}
.zvv-contact-info-card:last-child { margin-bottom: 0; }
.zvv-contact-info-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.07); }
.zvv-contact-info-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}
.zvv-contact-info-card h3 {
    font-size: 14px;
    font-weight: 700;
    color: #1a0f4a;
    margin: 0 0 5px;
}
.zvv-contact-info-card p {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 5px;
    line-height: 1.6;
}
.zvv-contact-info-card a {
    font-size: 12.5px;
    font-weight: 600;
    color: #7c3aed;
    text-decoration: none;
}
.zvv-contact-info-card a:hover { text-decoration: underline; }

.zvv-contact-info-card-cta {
    flex-direction: column;
    background: linear-gradient(135deg, #faf5ff, #ede9fe);
    border-color: #ddd6fe;
}
.zvv-contact-info-card-cta strong { font-size: 14px; color: #1a0f4a; margin-bottom: 4px; display: block; }
.zvv-contact-signin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    border-radius: 9px;
    text-decoration: none !important;
    transition: opacity .15s;
}
.zvv-contact-signin-btn:hover { opacity: .88; }

/* Dark mode */
[data-bs-theme="dark"] .zvv-contact-form-card   { background: #1e1f2e; border-color: #44475a; }
[data-bs-theme="dark"] .zvv-contact-form-title  { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-contact-input       { background: #13141f; border-color: #44475a; color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-contact-input:focus { border-color: #bd93f9; box-shadow: 0 0 0 3px rgba(189,147,249,0.15); }
[data-bs-theme="dark"] .zvv-contact-input-prefilled { background: rgba(189,147,249,0.08); border-color: #bd93f9; color: #bd93f9; }
[data-bs-theme="dark"] .zvv-contact-field-icon  { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-contact-label       { color: #cdd6f4; }
[data-bs-theme="dark"] .zvv-contact-info-card   { background: #1e1f2e; border-color: #44475a; }
[data-bs-theme="dark"] .zvv-contact-info-card h3 { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-contact-info-card p  { color: #6272a4; }
[data-bs-theme="dark"] .zvv-contact-info-card-cta { background: rgba(189,147,249,0.08); border-color: #44475a; }
[data-bs-theme="dark"] .zvv-contact-info-card-cta strong { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-contact-success     { background: rgba(80,250,123,0.06); border-color: rgba(80,250,123,0.2); }
[data-bs-theme="dark"] .zvv-contact-success strong { color: #50fa7b; }
[data-bs-theme="dark"] .zvv-contact-success p   { color: #50fa7b; }

/* ── 2FA security warning banner ── */
.zvv-2fa-warning {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.06);
    border: 1.5px solid rgba(239, 68, 68, 0.22);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.zvv-2fa-warning-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.zvv-2fa-warning-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #dc2626;
    flex-shrink: 0;
}

.zvv-2fa-warning-copy strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #991b1b;
    margin-bottom: 2px;
}

.zvv-2fa-warning-copy span {
    font-size: 0.82rem;
    color: #b91c1c;
    line-height: 1.55;
}

.zvv-2fa-warning-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.zvv-2fa-warning-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, transform 0.14s;
}
.zvv-2fa-warning-btn:hover {
    background: #b91c1c;
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}

.zvv-2fa-warning-dismiss {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #991b1b;
    flex-shrink: 0;
    transition: background 0.15s;
}
.zvv-2fa-warning-dismiss:hover { background: rgba(239, 68, 68, 0.22); }

/* Dark mode */
[data-bs-theme="dark"] .zvv-2fa-warning {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.28);
}
[data-bs-theme="dark"] .zvv-2fa-warning-copy strong { color: #fca5a5; }
[data-bs-theme="dark"] .zvv-2fa-warning-copy span   { color: #f87171; }
[data-bs-theme="dark"] .zvv-2fa-warning-dismiss     { color: #fca5a5; }

/* ══════════════════════════════════════════
   Summernote — dark mode
   Scoped to [data-bs-theme="dark"] so it
   never fires on admin pages (they never
   receive that attribute).
   ══════════════════════════════════════════ */

/* ── Outer frame ── */
[data-bs-theme="dark"] .note-editor.note-frame,
[data-bs-theme="dark"] .note-editor.note-airframe {
    border-color: #44475a;
    background: #1e1f2e;
}

/* ── Toolbar ── */
[data-bs-theme="dark"] .note-editor .note-toolbar {
    background: #282a36;
    border-bottom: 1px solid #44475a;
}

/* ── Toolbar buttons ── */
[data-bs-theme="dark"] .note-editor .note-btn {
    background: #1e1f2e;
    border-color: #44475a;
    color: #cdd6f4;
    border-radius: 6px;
}
[data-bs-theme="dark"] .note-editor .note-btn:hover,
[data-bs-theme="dark"] .note-editor .note-btn:focus {
    background: #383a4b;
    color: #bd93f9;
    border-color: #6272a4;
}
[data-bs-theme="dark"] .note-editor .note-btn.active,
[data-bs-theme="dark"] .note-editor .note-btn:active {
    background: rgba(189,147,249,0.18);
    color: #bd93f9;
    border-color: #bd93f9;
}

/* ── Toolbar button groups separator ── */
[data-bs-theme="dark"] .note-editor .note-btn-group {
    border-color: #44475a;
}

/* ── Dropdown arrow (caret) ── */
[data-bs-theme="dark"] .note-editor .note-caret {
    border-top-color: #cdd6f4;
}

/* ── Dropdown menus ── */
[data-bs-theme="dark"] .note-editor .note-dropdown-menu,
[data-bs-theme="dark"] .note-editor .dropdown-menu {
    background: #282a36;
    border: 1px solid #44475a;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.55);
}
[data-bs-theme="dark"] .note-editor .note-dropdown-item,
[data-bs-theme="dark"] .note-editor .dropdown-item,
[data-bs-theme="dark"] .note-editor .note-dropdown-menu a,
[data-bs-theme="dark"] .note-editor .note-dropdown-menu li a {
    color: #f8f8f2;
}
[data-bs-theme="dark"] .note-editor .note-dropdown-item:hover,
[data-bs-theme="dark"] .note-editor .dropdown-item:hover,
[data-bs-theme="dark"] .note-editor .note-dropdown-menu a:hover {
    background: rgba(189,147,249,0.12);
    color: #bd93f9;
}
[data-bs-theme="dark"] .note-editor .note-dropdown-menu .divider,
[data-bs-theme="dark"] .note-editor .note-dropdown-menu hr {
    border-color: #44475a;
}

/* ── Style tags dropdown ── */
[data-bs-theme="dark"] .note-editor .note-style h1,
[data-bs-theme="dark"] .note-editor .note-style h2,
[data-bs-theme="dark"] .note-editor .note-style h3,
[data-bs-theme="dark"] .note-editor .note-style h4,
[data-bs-theme="dark"] .note-editor .note-style h5,
[data-bs-theme="dark"] .note-editor .note-style h6,
[data-bs-theme="dark"] .note-editor .note-style p,
[data-bs-theme="dark"] .note-editor .note-style blockquote,
[data-bs-theme="dark"] .note-editor .note-style pre {
    color: #f8f8f2;
}

/* ── Font size / font name input fields ── */
[data-bs-theme="dark"] .note-editor .note-input {
    background: #1e1f2e;
    border-color: #44475a;
    color: #f8f8f2;
}

/* ── Editable content area ── */
[data-bs-theme="dark"] .note-editor .note-editing-area {
    background: #13141f;
}
[data-bs-theme="dark"] .note-editor .note-editable {
    background: #13141f;
    color: #f8f8f2;
    caret-color: #bd93f9;
}
[data-bs-theme="dark"] .note-editor .note-editable blockquote {
    border-left-color: #bd93f9;
    color: #6272a4;
}
[data-bs-theme="dark"] .note-editor .note-editable pre {
    background: #282a36;
    color: #50fa7b;
    border-color: #44475a;
}
[data-bs-theme="dark"] .note-editor .note-editable a {
    color: #8be9fd;
}
[data-bs-theme="dark"] .note-editor .note-editable table,
[data-bs-theme="dark"] .note-editor .note-editable th,
[data-bs-theme="dark"] .note-editor .note-editable td {
    border-color: #44475a;
}
[data-bs-theme="dark"] .note-editor .note-editable th {
    background: #282a36;
}

/* ── Placeholder text ── */
[data-bs-theme="dark"] .note-editor .note-placeholder {
    color: #6272a4;
}

/* ── Statusbar (resize handle) ── */
[data-bs-theme="dark"] .note-editor .note-statusbar {
    background: #282a36;
    border-top: 1px solid #44475a;
}
[data-bs-theme="dark"] .note-editor .note-statusbar .note-resizebar {
    border-top-color: #44475a;
}
[data-bs-theme="dark"] .note-editor .note-statusbar .note-resizebar .note-icon-bar {
    border-top-color: #6272a4;
}

/* ── Codeview textarea ── */
[data-bs-theme="dark"] .note-editor .note-codable {
    background: #13141f;
    color: #50fa7b;
    border-color: #44475a;
    font-family: 'Courier New', monospace;
}

/* ── Modals (link / image / video dialogs) ── */
[data-bs-theme="dark"] .note-modal .note-modal-content,
[data-bs-theme="dark"] .note-modal .modal-content {
    background: #1e1f2e;
    border: 1.5px solid #44475a;
    border-radius: 14px;
    color: #f8f8f2;
}
[data-bs-theme="dark"] .note-modal .note-modal-header,
[data-bs-theme="dark"] .note-modal .modal-header {
    background: #282a36;
    border-bottom: 1px solid #44475a;
}
[data-bs-theme="dark"] .note-modal .note-modal-title,
[data-bs-theme="dark"] .note-modal .modal-title {
    color: #f8f8f2;
}
[data-bs-theme="dark"] .note-modal .note-modal-footer,
[data-bs-theme="dark"] .note-modal .modal-footer {
    border-top: 1px solid #44475a;
    background: #1e1f2e;
}
[data-bs-theme="dark"] .note-modal label {
    color: #cdd6f4;
}
[data-bs-theme="dark"] .note-modal .note-form-control,
[data-bs-theme="dark"] .note-modal .form-control {
    background: #13141f;
    border-color: #44475a;
    color: #f8f8f2;
}
[data-bs-theme="dark"] .note-modal .note-form-control:focus,
[data-bs-theme="dark"] .note-modal .form-control:focus {
    border-color: #bd93f9;
    box-shadow: 0 0 0 3px rgba(189,147,249,0.15);
}
[data-bs-theme="dark"] .note-modal .note-btn-primary,
[data-bs-theme="dark"] .note-modal .btn-primary {
    background: #7c3aed;
    border-color: #7c3aed;
}
[data-bs-theme="dark"] .note-modal .note-close,
[data-bs-theme="dark"] .note-modal .btn-close {
    filter: invert(1);
}

/* ── Color palette ── */
[data-bs-theme="dark"] .note-editor .note-color-palette .note-color-row .note-color-btn {
    border-color: #44475a;
}
[data-bs-theme="dark"] .note-editor .note-color-select-btn {
    background: #1e1f2e;
    color: #cdd6f4;
    border-color: #44475a;
}

/* ── Popover (image / table / link tooltip) ── */
[data-bs-theme="dark"] .note-popover .popover-content,
[data-bs-theme="dark"] .note-popover .note-toolbar {
    background: #282a36;
    border: 1px solid #44475a;
}

/* ── Fullscreen mode ── */
[data-bs-theme="dark"] .note-editor.fullscreen {
    background: #13141f;
}
[data-bs-theme="dark"] .note-editor.fullscreen .note-toolbar {
    background: #282a36;
}
[data-bs-theme="dark"] .note-editor.fullscreen .note-editable {
    background: #13141f;
    color: #f8f8f2;
}

/* ── Help dialog ── */
[data-bs-theme="dark"] .note-help-dialog .modal-body {
    background: #1e1f2e;
    color: #f8f8f2;
}
[data-bs-theme="dark"] .note-help-dialog .note-shortcut-col {
    color: #cdd6f4;
}
[data-bs-theme="dark"] .note-help-dialog .note-shortcut-title {
    color: #bd93f9;
}
[data-bs-theme="dark"] .note-help-dialog kbd {
    background: #44475a;
    color: #f8f8f2;
    border-color: #6272a4;
}

/* ── Summernote: uploaded video wrapper ── */
.zvv-editor-video-wrap {
    margin: 12px 0;
    text-align: center;
}
.zvv-editor-video-wrap video {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.15);
}

/* ── Security Page ── */
.zvv-sec-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 24px 60px;
}

.zvv-sec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.zvv-sec-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #0f0a2e;
    margin: 0;
    line-height: 1.2;
}

[data-bs-theme="dark"] .zvv-sec-title { color: #f3f0ff; }

/* Overview grid */
.zvv-sec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 640px) { .zvv-sec-grid { grid-template-columns: 1fr; } }

.zvv-sec-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1.5px solid rgba(124,58,237,0.1);
    border-radius: 14px;
    padding: 16px 18px;
    transition: border-color .2s;
}

[data-bs-theme="dark"] .zvv-sec-card {
    background: #1a1530;
    border-color: rgba(139,92,246,0.18);
}

.zvv-sec-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.zvv-sec-card-icon.ok   { background: rgba(16,185,129,0.12); color: #059669; }
.zvv-sec-card-icon.warn { background: rgba(245,158,11,0.12);  color: #d97706; }

[data-bs-theme="dark"] .zvv-sec-card-icon.ok   { background: rgba(16,185,129,0.18); color: #34d399; }
[data-bs-theme="dark"] .zvv-sec-card-icon.warn { background: rgba(245,158,11,0.18);  color: #fbbf24; }

.zvv-sec-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zvv-sec-card-body strong {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e1b4b;
}

[data-bs-theme="dark"] .zvv-sec-card-body strong { color: #e9e4ff; }

.zvv-sec-card-body span {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.4;
}

[data-bs-theme="dark"] .zvv-sec-card-body span { color: #9ca3af; }

.zvv-sec-card-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* Badges */
.zvv-sec-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.zvv-sec-badge-ok   { background: rgba(16,185,129,0.12); color: #065f46; }
.zvv-sec-badge-warn { background: rgba(245,158,11,0.12);  color: #92400e; }
.zvv-sec-badge-info { background: rgba(99,102,241,0.12);  color: #3730a3; }

[data-bs-theme="dark"] .zvv-sec-badge-ok   { background: rgba(16,185,129,0.2); color: #6ee7b7; }
[data-bs-theme="dark"] .zvv-sec-badge-warn { background: rgba(245,158,11,0.2);  color: #fde68a; }
[data-bs-theme="dark"] .zvv-sec-badge-info { background: rgba(139,92,246,0.2);  color: #c4b5fd; }

.zvv-sec-link {
    font-size: 12px;
    font-weight: 500;
    color: #7c3aed;
    text-decoration: none;
}

.zvv-sec-link:hover { text-decoration: underline; color: #6d28d9; }

[data-bs-theme="dark"] .zvv-sec-link { color: #a78bfa; }

.zvv-sec-btn-enable {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 12px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s;
}

.zvv-sec-btn-enable:hover { opacity: .88; color: #fff; }

/* Sessions list */
.zvv-sessions-list {
    display: flex;
    flex-direction: column;
}

.zvv-session-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(124,58,237,0.07);
    transition: background .15s;
}

.zvv-session-row:last-child { border-bottom: none; }

.zvv-session-row:hover { background: rgba(124,58,237,0.03); }

[data-bs-theme="dark"] .zvv-session-row:hover { background: rgba(139,92,246,0.06); }
[data-bs-theme="dark"] .zvv-session-row { border-color: rgba(139,92,246,0.1); }

.zvv-session-current {
    background: rgba(124,58,237,0.04);
}

[data-bs-theme="dark"] .zvv-session-current { background: rgba(139,92,246,0.08); }

.zvv-session-icon {
    width: 38px;
    height: 38px;
    background: rgba(124,58,237,0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #7c3aed;
    flex-shrink: 0;
}

[data-bs-theme="dark"] .zvv-session-icon { background: rgba(139,92,246,0.18); color: #a78bfa; }

.zvv-session-info {
    flex: 1;
    min-width: 0;
}

.zvv-session-browser {
    font-size: 0.87rem;
    font-weight: 600;
    color: #1e1b4b;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

[data-bs-theme="dark"] .zvv-session-browser { color: #e9e4ff; }

.zvv-session-current-badge {
    font-size: 10.5px;
    font-weight: 600;
    background: rgba(124,58,237,0.12);
    color: #6d28d9;
    border-radius: 20px;
    padding: 2px 8px;
}

[data-bs-theme="dark"] .zvv-session-current-badge { background: rgba(139,92,246,0.2); color: #c4b5fd; }

.zvv-session-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 0.76rem;
    color: #6b7280;
}

.zvv-session-meta i { margin-right: 3px; }

[data-bs-theme="dark"] .zvv-session-meta { color: #9ca3af; }

.zvv-session-created { opacity: .75; }

.zvv-session-actions {
    flex-shrink: 0;
}

/* Session bulk action buttons */
.zvv-sec-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    transition: opacity .15s, background .15s;
    white-space: nowrap;
}

.zvv-sec-action-btn-outline {
    background: transparent;
    border: 1.5px solid rgba(124,58,237,0.35);
    color: #7c3aed;
}

.zvv-sec-action-btn-outline:hover { background: rgba(124,58,237,0.07); }

[data-bs-theme="dark"] .zvv-sec-action-btn-outline {
    border-color: rgba(167,139,250,0.4);
    color: #a78bfa;
}

.zvv-sec-action-btn-danger {
    background: rgba(239,68,68,0.1);
    color: #b91c1c;
    border: 1.5px solid rgba(239,68,68,0.25);
}

.zvv-sec-action-btn-danger:hover { background: rgba(239,68,68,0.18); }

[data-bs-theme="dark"] .zvv-sec-action-btn-danger {
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border-color: rgba(239,68,68,0.35);
}

@media (max-width: 640px) {
    .zvv-sec-page { padding: 20px 16px 40px; }
    .zvv-session-row { flex-wrap: wrap; }
    .zvv-session-created { display: none; }
    .zvv-tx-head { flex-wrap: wrap; gap: 10px; }
}

/* ── Login notification toasts ── */
.zvv-login-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.zvv-login-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1.5px solid rgba(124,58,237,0.18);
    border-left: 4px solid #f59e0b;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    max-width: 340px;
    pointer-events: all;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .35s ease, transform .35s ease;
}

.zvv-login-toast.zvv-lt-visible {
    opacity: 1;
    transform: translateX(0);
}

.zvv-login-toast.zvv-lt-hiding {
    opacity: 0;
    transform: translateX(24px);
}

[data-bs-theme="dark"] .zvv-login-toast {
    background: #1a1530;
    border-color: rgba(139,92,246,0.25);
    border-left-color: #f59e0b;
}

.zvv-lt-icon {
    width: 36px;
    height: 36px;
    background: rgba(245,158,11,0.12);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #d97706;
    flex-shrink: 0;
}

[data-bs-theme="dark"] .zvv-lt-icon { background: rgba(245,158,11,0.18); color: #fbbf24; }

.zvv-lt-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.zvv-lt-body strong {
    font-size: 0.84rem;
    font-weight: 700;
    color: #1e1b4b;
}

[data-bs-theme="dark"] .zvv-lt-body strong { color: #e9e4ff; }

.zvv-lt-body span {
    font-size: 0.76rem;
    color: #6b7280;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-bs-theme="dark"] .zvv-lt-body span { color: #9ca3af; }

.zvv-lt-meta { font-size: 0.72rem !important; margin-top: 2px; opacity: .8; }

.zvv-lt-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.zvv-lt-btn {
    font-size: 11.5px;
    font-weight: 700;
    color: #7c3aed;
    text-decoration: none;
    white-space: nowrap;
}

.zvv-lt-btn:hover { text-decoration: underline; }

[data-bs-theme="dark"] .zvv-lt-btn { color: #a78bfa; }

.zvv-lt-close {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.zvv-lt-close:hover { color: #6b7280; }

@media (max-width: 480px) {
    .zvv-login-toast-container { bottom: 16px; right: 12px; left: 12px; }
    .zvv-login-toast { max-width: 100%; }
}

/* ── 2FA method picker ── */
.zvv-2fa-method-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zvv-2fa-method-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #faf5ff;
    border: 1.5px solid rgba(124,58,237,0.15);
    border-radius: 14px;
    padding: 16px 18px;
    transition: border-color .2s, background .2s;
}

.zvv-2fa-method-card:hover {
    border-color: rgba(124,58,237,0.4);
    background: #f5f0ff;
}

[data-bs-theme="dark"] .zvv-2fa-method-card {
    background: #1a1530;
    border-color: rgba(139,92,246,0.2);
}

[data-bs-theme="dark"] .zvv-2fa-method-card:hover {
    border-color: rgba(139,92,246,0.45);
    background: #1e1838;
}

.zvv-2fa-method-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.zvv-2fa-method-icon.totp  { background: rgba(99,102,241,0.13); color: #4f46e5; }
.zvv-2fa-method-icon.email { background: rgba(124,58,237,0.13); color: #7c3aed; }

[data-bs-theme="dark"] .zvv-2fa-method-icon.totp  { background: rgba(99,102,241,0.2); color: #818cf8; }
[data-bs-theme="dark"] .zvv-2fa-method-icon.email { background: rgba(124,58,237,0.2); color: #a78bfa; }

.zvv-2fa-method-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zvv-2fa-method-body strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e1b4b;
}

[data-bs-theme="dark"] .zvv-2fa-method-body strong { color: #e9e4ff; }

.zvv-2fa-method-body span {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.4;
}

[data-bs-theme="dark"] .zvv-2fa-method-body span { color: #9ca3af; }

.zvv-2fa-method-btn {
    background: transparent;
    border: 1.5px solid rgba(124,58,237,0.3);
    color: #7c3aed;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}

.zvv-2fa-method-btn:hover { background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.5); }

[data-bs-theme="dark"] .zvv-2fa-method-btn { border-color: rgba(167,139,250,0.4); color: #a78bfa; }

/* ── 2FA OTP input (two-factor.php) ── */
.zvv-tfa-code-input {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 12px;
    padding: 18px 16px;
    border: 2px solid rgba(124,58,237,0.2);
    border-radius: 14px;
    background: #faf5ff;
    color: #1a0f4a;
    font-family: 'Courier New', monospace;
    transition: border-color .2s;
    outline: none;
}

.zvv-tfa-code-input:focus { border-color: #7c3aed; }

[data-bs-theme="dark"] .zvv-tfa-code-input {
    background: #1a1530;
    border-color: rgba(139,92,246,0.3);
    color: #e9e4ff;
}

[data-bs-theme="dark"] .zvv-tfa-code-input:focus { border-color: #a78bfa; }

/* ───────────────────────────────────────────────
   IDENTITY VERIFICATION PAGE
   ─────────────────────────────────────────────── */

.zvv-kyc-page { padding: 28px 32px 48px; max-width: 900px; }
@media (max-width: 767px) { .zvv-kyc-page { padding: 16px 16px 48px; } }

.zvv-kyc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.zvv-kyc-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
}
.zvv-kyc-status-badge.zvv-kyc-status-approved { background: rgba(16,185,129,.12); color: #059669; border: 1.5px solid rgba(16,185,129,.3); }
.zvv-kyc-status-badge.zvv-kyc-status-pending  { background: rgba(245,158,11,.1);  color: #d97706; border: 1.5px solid rgba(245,158,11,.3); }
.zvv-kyc-status-badge.zvv-kyc-status-rejected { background: rgba(239,68,68,.1);   color: #dc2626; border: 1.5px solid rgba(239,68,68,.3); }
.zvv-kyc-status-badge.zvv-kyc-status-none     { background: rgba(107,114,128,.1); color: #6b7280; border: 1.5px solid rgba(107,114,128,.25); }

/* Steps bar */
.zvv-kyc-steps-bar {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 4px;
}
.zvv-kyc-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 72px;
}
.zvv-kyc-step-item span {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .6px;
    white-space: nowrap;
}
.zvv-kyc-step-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #f3f4f6;
    color: #9ca3af;
    border: 2px solid #e5e7eb;
    transition: all .25s;
}
.zvv-kyc-step-item.active .zvv-kyc-step-dot {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(79,70,229,.35);
}
.zvv-kyc-step-item.done .zvv-kyc-step-dot {
    background: #ecfdf5;
    color: #059669;
    border-color: #6ee7b7;
}
.zvv-kyc-step-item.active span,
.zvv-kyc-step-item.done span { color: #4f46e5; }
.zvv-kyc-step-item.done span { color: #059669; }
.zvv-kyc-step-line {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    min-width: 28px;
    align-self: flex-start;
    margin-top: 19px;
}

/* Panel */
.zvv-kyc-panel {
    background: var(--zvv-card-bg, #fff);
    border: 1.5px solid var(--zvv-card-border, rgba(0,0,0,.06));
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 24px;
}
@media (max-width: 576px) { .zvv-kyc-panel { padding: 20px 16px; } }

.zvv-kyc-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
}
.zvv-kyc-panel-head > i {
    font-size: 26px;
    color: #4f46e5;
    margin-top: 2px;
    flex-shrink: 0;
}
.zvv-kyc-panel-head h2 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; }
.zvv-kyc-panel-head p  { margin: 0; font-size: 13.5px; color: #6b7280; }

/* Document picker cards */
.zvv-kyc-doc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}
@media (max-width: 576px) { .zvv-kyc-doc-grid { grid-template-columns: 1fr; } }

.zvv-kyc-doc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0;
    background: #fafafa;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    transition: all .2s;
    overflow: hidden;
}
.zvv-kyc-doc-card:hover { border-color: #a5b4fc; background: #f5f3ff; }
.zvv-kyc-doc-card.selected { border-color: #4f46e5; background: #f5f3ff; }

.zvv-kyc-doc-card-img {
    width: 100%;
    padding: 24px 24px 12px;
    font-size: 36px;
    color: #4f46e5;
    display: flex;
    align-items: center;
}
.zvv-kyc-doc-card-body {
    padding: 0 24px 24px;
    width: 100%;
}
.zvv-kyc-doc-card-body strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #111827;
}
.zvv-kyc-doc-card-body span {
    display: block;
    font-size: 12.5px;
    color: #6b7280;
    margin-bottom: 10px;
    line-height: 1.4;
}
.zvv-kyc-doc-card-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.zvv-kyc-doc-card-body ul li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}
.zvv-kyc-doc-card-body ul li i { color: #4f46e5; font-size: 13px; }

.zvv-kyc-doc-check {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 20px;
    color: #c7d2fe;
    transition: all .2s;
}
.zvv-kyc-doc-card.selected .zvv-kyc-doc-check { color: #4f46e5; }

/* Upload zones */
.zvv-kyc-upload-group { margin-bottom: 24px; }
.zvv-kyc-upload-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 10px;
}
.zvv-kyc-required {
    font-size: 10px;
    background: rgba(239,68,68,.1);
    color: #dc2626;
    padding: 2px 7px;
    border-radius: 50px;
    letter-spacing: .4px;
}

.zvv-kyc-upload-zone {
    border: 2.5px dashed #d1d5db;
    border-radius: 14px;
    background: #f9fafb;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
    overflow: hidden;
    position: relative;
}
.zvv-kyc-upload-zone:hover,
.zvv-kyc-upload-zone.drag-over { border-color: #6366f1; background: #f5f3ff; }
.zvv-kyc-upload-zone.has-file   { border-color: #10b981; border-style: solid; }

.zvv-kyc-upload-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px;
    pointer-events: none;
}
.zvv-kyc-upload-prompt i    { font-size: 36px; color: #a5b4fc; }
.zvv-kyc-upload-prompt strong { font-size: 14px; font-weight: 700; color: #374151; }
.zvv-kyc-upload-prompt span  { font-size: 12px; color: #9ca3af; }

.zvv-kyc-upload-preview { width: 100%; min-height: 140px; }
.zvv-kyc-upload-preview img {
    display: block;
    max-width: 100%;
    max-height: 200px;
    margin: 0 auto;
    border-radius: 10px;
    object-fit: contain;
    padding: 12px;
}
.zvv-kyc-pdf-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    color: #dc2626;
    font-size: 14px;
}
.zvv-kyc-pdf-badge i { font-size: 36px; }

.zvv-kyc-selfie-zone { min-height: 180px; }

.zvv-kyc-selfie-tip {
    background: rgba(245,158,11,.08);
    border: 1.5px solid rgba(245,158,11,.3);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 10px;
}
.zvv-kyc-selfie-tip i { color: #d97706; margin-top: 1px; flex-shrink: 0; }

/* Personal info fields */
.zvv-kyc-fields { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.zvv-kyc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 576px) { .zvv-kyc-field-row { grid-template-columns: 1fr; } }
.zvv-kyc-field { display: flex; flex-direction: column; gap: 6px; }
.zvv-kyc-field label {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.zvv-kyc-field input {
    padding: 11px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
    color: #111827;
    transition: border-color .2s;
    font-family: inherit;
    width: 100%;
}
.zvv-kyc-field input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

/* Review grid */
.zvv-kyc-review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
}
@media (max-width: 576px) { .zvv-kyc-review-grid { grid-template-columns: 1fr 1fr; } }
.zvv-kyc-review-block {
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
}
.zvv-kyc-review-block h4 { margin: 0 0 4px; font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .6px; }
.zvv-kyc-review-block p  { margin: 0; font-size: 14px; font-weight: 600; color: #111827; word-break: break-all; }

/* Consent */
.zvv-kyc-consent { margin-bottom: 24px; }
.zvv-kyc-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 13.5px;
    color: #374151;
    line-height: 1.5;
}
.zvv-kyc-consent-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #4f46e5;
    margin-top: 1px;
    cursor: pointer;
}

/* Nav row */
.zvv-kyc-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
}

/* Tips */
.zvv-kyc-tips {
    background: rgba(79,70,229,.04);
    border: 1.5px solid rgba(79,70,229,.12);
    border-radius: 16px;
    padding: 22px 26px;
}
.zvv-kyc-tips h4 {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: #4f46e5;
    display: flex;
    align-items: center;
    gap: 8px;
}
.zvv-kyc-tips ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.zvv-kyc-tips ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #374151; line-height: 1.4; }
.zvv-kyc-tips ul li i { color: #4f46e5; margin-top: 1px; flex-shrink: 0; }

/* Approved state */
.zvv-kyc-approved-card {
    background: linear-gradient(135deg, rgba(5,150,105,.05) 0%, rgba(16,185,129,.08) 100%);
    border: 2px solid rgba(16,185,129,.25);
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    margin-bottom: 24px;
}
.zvv-kyc-approved-icon { font-size: 56px; color: #059669; margin-bottom: 16px; }
.zvv-kyc-approved-body h2 { margin: 0 0 8px; font-size: 1.3rem; font-weight: 700; color: #065f46; }
.zvv-kyc-approved-body p  { margin: 0 0 24px; color: #047857; font-size: 14.5px; }
.zvv-kyc-approved-details {
    display: inline-flex;
    gap: 28px;
    background: rgba(16,185,129,.08);
    border: 1px solid rgba(16,185,129,.2);
    border-radius: 14px;
    padding: 14px 28px;
    flex-wrap: wrap;
    justify-content: center;
}
.zvv-kyc-approved-details div { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.zvv-kyc-approved-details span  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #6ee7b7; }
.zvv-kyc-approved-details strong { font-size: 14px; font-weight: 700; color: #065f46; }

/* Pending / status card */
.zvv-kyc-status-card {
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.zvv-kyc-status-card-pending {
    background: rgba(245,158,11,.05);
    border: 2px solid rgba(245,158,11,.25);
}
.zvv-kyc-status-card-icon { font-size: 36px; flex-shrink: 0; }
.zvv-kyc-status-card-pending .zvv-kyc-status-card-icon { color: #d97706; }
.zvv-kyc-status-card-body h2 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; }
.zvv-kyc-status-card-body p  { margin: 0 0 16px; font-size: 14px; color: #6b7280; line-height: 1.6; }
.zvv-kyc-submitted-info {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.zvv-kyc-submitted-info div {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #374151;
    font-weight: 500;
}
.zvv-kyc-submitted-info i { color: #d97706; }

/* Rejection banner */
.zvv-kyc-rejected-banner {
    background: rgba(239,68,68,.06);
    border: 1.5px solid rgba(239,68,68,.25);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    color: #991b1b;
}
.zvv-kyc-rejected-banner > i { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.zvv-kyc-rejected-banner strong { display: block; margin-bottom: 3px; font-weight: 700; }
.zvv-kyc-rejected-banner span   { font-size: 13.5px; line-height: 1.5; }

/* Dashboard KYC banner */
.zvv-kyc-dash-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 16px;
    margin: 0 0 20px;
    flex-wrap: wrap;
}
.zvv-kyc-dash-none,
.zvv-kyc-dash-rejected {
    background: rgba(79,70,229,.06);
    border: 1.5px solid rgba(79,70,229,.18);
}
.zvv-kyc-dash-pending {
    background: rgba(245,158,11,.06);
    border: 1.5px solid rgba(245,158,11,.22);
}

.zvv-kyc-dash-left { display: flex; align-items: flex-start; gap: 14px; flex: 1; min-width: 0; }
.zvv-kyc-dash-icon { font-size: 24px; flex-shrink: 0; margin-top: 1px; }
.zvv-kyc-dash-none .zvv-kyc-dash-icon,
.zvv-kyc-dash-rejected .zvv-kyc-dash-icon { color: #4f46e5; }
.zvv-kyc-dash-pending .zvv-kyc-dash-icon  { color: #d97706; }
.zvv-kyc-dash-copy strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 3px;
    color: #111827;
}
.zvv-kyc-dash-copy span { font-size: 13px; color: #6b7280; }
.zvv-kyc-dash-actions { flex-shrink: 0; }
.zvv-kyc-dash-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    transition: opacity .2s;
    white-space: nowrap;
}
.zvv-kyc-dash-btn:hover { opacity: .88; color: #fff; }

/* Sidebar badge for identity verify */
.zvv-dash-nav-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 50px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* Dark mode */
[data-bs-theme="dark"] .zvv-kyc-panel { --zvv-card-bg: #1e1a38; --zvv-card-border: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .zvv-kyc-doc-card { background: #1a1535; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .zvv-kyc-doc-card:hover { background: #221c45; }
[data-bs-theme="dark"] .zvv-kyc-doc-card.selected { background: #221c45; border-color: #6366f1; }
[data-bs-theme="dark"] .zvv-kyc-doc-card-body strong { color: #f9fafb; }
[data-bs-theme="dark"] .zvv-kyc-upload-zone { background: #1a1535; border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .zvv-kyc-upload-zone:hover { background: #221c45; border-color: #6366f1; }
[data-bs-theme="dark"] .zvv-kyc-field input { background: #1a1535; border-color: rgba(255,255,255,.1); color: #f9fafb; }
[data-bs-theme="dark"] .zvv-kyc-review-block { background: #1a1535; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .zvv-kyc-review-block p { color: #f9fafb; }
[data-bs-theme="dark"] .zvv-kyc-step-dot { background: #1e1a38; color: #6b7280; border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .zvv-kyc-step-line { background: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .zvv-kyc-tips {
    background: rgba(189,147,249,.06);
    border-color: rgba(189,147,249,.2);
}
[data-bs-theme="dark"] .zvv-kyc-tips h4 { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-kyc-tips ul li { color: #f8f8f2; }
[data-bs-theme="dark"] .zvv-kyc-tips ul li i { color: #bd93f9; }
[data-bs-theme="dark"] .zvv-kyc-consent-label { color: #d1d5db; }
[data-bs-theme="dark"] .zvv-kyc-dash-none,
[data-bs-theme="dark"] .zvv-kyc-dash-rejected { background: rgba(79,70,229,.08); border-color: rgba(79,70,229,.25); }
[data-bs-theme="dark"] .zvv-kyc-dash-pending { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); }
[data-bs-theme="dark"] .zvv-kyc-dash-copy strong { color: #f9fafb; }


/* ───────────────────────────────────────────────
   ADMIN — KYC REVIEW CENTER
   ─────────────────────────────────────────────── */

/* ── Stat row ─────────────────────────────────── */
.zvv-kyc-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}
@media (max-width: 900px)  { .zvv-kyc-stats-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .zvv-kyc-stats-row { grid-template-columns: 1fr 1fr; } }

.zvv-kyc-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,.06);
    border-radius: 14px;
}
.zvv-kyc-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.zvv-kyc-stat-body { display: flex; flex-direction: column; gap: 2px; }
.zvv-kyc-stat-body span  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #9ca3af; }
.zvv-kyc-stat-body strong { font-size: 22px; font-weight: 800; color: #111827; line-height: 1; }

/* ── Table row accents ─────────────────────────── */
.zvv-kyc-row-num { font-size: 11px; color: #9ca3af; font-weight: 600; }
.zvv-kyc-tbl-row-pending td:first-child { border-left: 3px solid #f59e0b; }
.zvv-kyc-tbl-row-approved td:first-child { border-left: 3px solid #10b981; }
.zvv-kyc-tbl-row-rejected td:first-child { border-left: 3px solid #ef4444; }

/* ── Document pill ─────────────────────────────── */
.zvv-kyc-doc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.18);
    border-radius: 50px;
    font-size: 12px;
    color: #4338ca;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Status badges ─────────────────────────────── */
.zvv-kyc-admin-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.zvv-kyc-admin-status-badge.zvv-kyc-admin-status-approved {
    background: rgba(16,185,129,.1);
    color: #065f46;
    border: 1.5px solid rgba(16,185,129,.25);
}
.zvv-kyc-admin-status-badge.zvv-kyc-admin-status-pending {
    background: rgba(245,158,11,.1);
    color: #92400e;
    border: 1.5px solid rgba(245,158,11,.25);
}
.zvv-kyc-admin-status-badge.zvv-kyc-admin-status-rejected {
    background: rgba(239,68,68,.1);
    color: #991b1b;
    border: 1.5px solid rgba(239,68,68,.25);
}
.zvv-kyc-status-lg { font-size: 14px; padding: 8px 18px; }

/* ── Hero card (detail view) ───────────────────── */
.zvv-kyc-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.zvv-kyc-hero-left {
    display: flex;
    align-items: center;
    gap: 18px;
}
.zvv-kyc-hero-avatar {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    font-family: 'Sora', sans-serif;
    letter-spacing: -0.5px;
}
.zvv-kyc-hero-meta h2 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; color: #0f0a2e; font-family: 'Sora', sans-serif; }
.zvv-kyc-hero-sub {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.zvv-kyc-hero-sub span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #6b7280;
}
.zvv-kyc-hero-sub i { color: #4f46e5; font-size: 13px; }
.zvv-kyc-hero-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Detail grid ───────────────────────────────── */
.zvv-kyc-detail-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) { .zvv-kyc-detail-grid { grid-template-columns: 1fr; } }

/* ── Card section head ─────────────────────────── */
.zvv-kyc-card-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #faf8ff;
    border-bottom: 1.5px solid rgba(79,70,229,.08);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #4f46e5;
}
.zvv-kyc-card-section-head i { font-size: 15px; }

/* ── Doc panels (images) ───────────────────────── */
.zvv-kyc-doc-panels { padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.zvv-kyc-doc-panel { display: flex; flex-direction: column; gap: 8px; }
.zvv-kyc-doc-panel-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #6b7280;
}
.zvv-kyc-doc-panel-label i { color: #4f46e5; }

.zvv-kyc-admin-img-wrap {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
    position: relative;
    text-decoration: none;
    background: #f9fafb;
    transition: border-color .2s, box-shadow .2s;
    aspect-ratio: 4/3;
}
.zvv-kyc-admin-img-wrap:hover { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.zvv-kyc-admin-img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}
.zvv-kyc-admin-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(79,70,229,.75);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transition: opacity .18s;
}
.zvv-kyc-admin-img-wrap:hover .zvv-kyc-admin-img-overlay { opacity: 1; }

.zvv-kyc-admin-pdf-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    border-radius: 12px;
    border: 2px dashed #fca5a5;
    background: #fef2f2;
    color: #dc2626;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .2s;
    aspect-ratio: 4/3;
}
.zvv-kyc-admin-pdf-link:hover { border-color: #dc2626; color: #b91c1c; }
.zvv-kyc-admin-pdf-link i { font-size: 32px; flex-shrink: 0; }

/* ── Info table ────────────────────────────────── */
.zvv-kyc-info-table { padding: 4px 0 8px; }
.zvv-kyc-info-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0,0,0,.04);
    font-size: 13.5px;
}
.zvv-kyc-info-row:last-child { border-bottom: none; }
.zvv-kyc-info-row span {
    flex-shrink: 0;
    width: 108px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #9ca3af;
}
.zvv-kyc-info-row strong { color: #111827; font-weight: 600; word-break: break-word; }
.zvv-kyc-code {
    font-size: 12.5px;
    color: #4f46e5;
    background: rgba(79,70,229,.08);
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: .3px;
}

/* ── Rejection card ────────────────────────────── */
.zvv-kyc-rejection-card {
    background: rgba(239,68,68,.04) !important;
    border-color: rgba(239,68,68,.2) !important;
}
.zvv-kyc-rejection-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #dc2626;
    margin-bottom: 10px;
}
.zvv-kyc-rejection-card p { margin: 0; font-size: 13.5px; color: #7f1d1d; line-height: 1.6; }

/* ── Action card ───────────────────────────────── */
.zvv-kyc-action-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; }

.zvv-kyc-decision-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all .18s;
}
.zvv-kyc-decision-approve {
    background: linear-gradient(135deg, #059669, #047857);
    color: #fff;
}
.zvv-kyc-decision-approve:hover { opacity: .9; }
.zvv-kyc-decision-reject {
    background: rgba(239,68,68,.06);
    border-color: rgba(239,68,68,.22);
    color: #dc2626;
}
.zvv-kyc-decision-reject:hover { background: rgba(239,68,68,.1); }
.zvv-kyc-decision-reject-confirm {
    background: #dc2626;
    color: #fff;
    width: 100%;
    justify-content: center;
    margin-top: 4px;
    border: none;
}
.zvv-kyc-decision-reject-confirm:hover { background: #b91c1c; }

.zvv-kyc-decision-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.zvv-kyc-decision-reject .zvv-kyc-decision-icon {
    background: rgba(239,68,68,.12);
    color: #dc2626;
}
.zvv-kyc-decision-body { display: flex; flex-direction: column; gap: 1px; }
.zvv-kyc-decision-body strong { font-size: 14px; font-weight: 700; }
.zvv-kyc-decision-body small  { font-size: 12px; opacity: .75; }

/* Rejection reason panel */
.zvv-kyc-reject-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 8px;
}
.zvv-kyc-reject-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13.5px;
    font-family: inherit;
    resize: vertical;
    transition: border-color .2s;
}
.zvv-kyc-reject-textarea:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1); }

.zvv-kyc-reason-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 12px;
}
.zvv-kyc-reason-chip {
    padding: 5px 11px;
    border-radius: 50px;
    border: 1.5px solid #e5e7eb;
    background: #f9fafb;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.zvv-kyc-reason-chip:hover { border-color: #a5b4fc; background: #f0f0ff; color: #4f46e5; }
.zvv-kyc-reason-chip.active { border-color: #6366f1; background: #eef2ff; color: #4f46e5; }

/* ── Dark mode ─────────────────────────────────── */
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-stat-card {
    background: #1e1a38;
    border-color: rgba(255,255,255,.07);
}
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-stat-body strong { color: #f9fafb; }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-hero-meta h2 { color: #f9fafb; }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-hero-sub span { color: #9ca3af; }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-card-section-head { background: rgba(79,70,229,.12); border-color: rgba(79,70,229,.15); }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-admin-img-wrap { border-color: rgba(255,255,255,.08); background: #1a1535; }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-info-row { border-color: rgba(255,255,255,.04); }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-info-row strong { color: #f9fafb; }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-doc-panel-label { color: #6b7280; }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-reject-textarea { background: #1a1535; border-color: rgba(255,255,255,.1); color: #f9fafb; }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-reason-chip { background: #1a1535; border-color: rgba(255,255,255,.1); color: #d1d5db; }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-reason-chip:hover { background: #221c45; border-color: #6366f1; color: #a5b4fc; }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-admin-status-badge.zvv-kyc-admin-status-approved { color: #6ee7b7; }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-admin-status-badge.zvv-kyc-admin-status-pending  { color: #fcd34d; }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-admin-status-badge.zvv-kyc-admin-status-rejected { color: #fca5a5; }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-tbl-row-pending td:first-child  { border-color: #f59e0b; }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-tbl-row-approved td:first-child { border-color: #10b981; }
[data-admin="true"][data-bs-theme="dark"] .zvv-kyc-tbl-row-rejected td:first-child { border-color: #ef4444; }

/* ═══════════════════════════════════════════════════
   Scroll-triggered fade animations (non-admin pages)
   ═══════════════════════════════════════════════════ */
.zvv-fade-up {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .62s cubic-bezier(.22,1,.36,1),
                transform .62s cubic-bezier(.22,1,.36,1);
}
.zvv-fade-up.zvv-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .zvv-fade-up,
    .zvv-fade-up.zvv-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════
   Cookie consent bar
   ═══════════════════════════════════════════ */
.zvv-cookie-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1030;
    padding: 18px 0;
    background: rgba(10, 6, 30, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(167, 139, 250, 0.22);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
    transform: translateY(100%);
    transition: transform .42s cubic-bezier(.22, 1, .36, 1),
                opacity .42s ease;
    opacity: 0;
}
.zvv-cookie-bar.zvv-cookie-visible {
    transform: translateY(0);
    opacity: 1;
}
.zvv-cookie-bar.zvv-cookie-hiding {
    transform: translateY(110%);
    opacity: 0;
}

.zvv-cookie-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.zvv-cookie-left {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.zvv-cookie-icon {
    font-size: 26px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
    filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.5));
}

.zvv-cookie-copy {
    flex: 1;
    min-width: 0;
}
.zvv-cookie-copy strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #e2d9ff;
    margin-bottom: 4px;
    font-family: 'Sora', sans-serif;
}
.zvv-cookie-copy p {
    font-size: 13px;
    color: rgba(200, 185, 255, 0.58);
    line-height: 1.55;
    margin: 0;
}

.zvv-cookie-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.zvv-cookie-link {
    font-size: 12px;
    color: rgba(167, 139, 250, 0.7);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .2s;
    white-space: nowrap;
}
.zvv-cookie-link:hover { color: #a78bfa; }

.zvv-cookie-btn {
    border: none;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 10px;
    transition: all .2s;
    white-space: nowrap;
}
.zvv-cookie-decline {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(220, 210, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.zvv-cookie-decline:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-1px);
}
.zvv-cookie-accept {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
}
.zvv-cookie-accept:hover {
    opacity: .88;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5);
}

@media (max-width: 640px) {
    .zvv-cookie-inner { flex-direction: column; align-items: stretch; }
    .zvv-cookie-left { align-items: flex-start; }
    .zvv-cookie-actions { justify-content: flex-end; }
    .zvv-cookie-copy p { font-size: 12px; }
}

/* ── Admin IP display ── */
.zvv-admin-ip {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12px;
    color: #4f46e5;
    background: rgba(79,70,229,0.07);
    border: 1px solid rgba(79,70,229,0.15);
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
}
.zvv-admin-form-readonly {
    background: #f5f3ff !important;
    border-color: rgba(124,58,237,0.1) !important;
    cursor: default;
    user-select: all;
}

/* ── Login suspended notice ── */
.zvv-login-suspended-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff7ed;
    border: 1.5px solid #fed7aa;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
}
.zvv-login-suspended-icon {
    font-size: 22px;
    color: #c2410c;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 1px;
}
.zvv-login-suspended-body {
    flex: 1;
    min-width: 0;
}
.zvv-login-suspended-body strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #7c2d12;
    margin-bottom: 8px;
    font-family: 'Sora', sans-serif;
}
.zvv-login-suspended-reason {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #92400e;
    background: rgba(234,88,12,.08);
    border-radius: 8px;
    padding: 7px 12px;
    margin-bottom: 8px;
}
.zvv-login-suspended-label {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #c2410c;
    flex-shrink: 0;
}
.zvv-login-suspended-note {
    font-size: 13px;
    color: #92400e;
    line-height: 1.55;
    margin-bottom: 8px;
    padding: 7px 12px;
    background: rgba(234,88,12,.05);
    border-radius: 8px;
}
.zvv-login-suspended-help {
    font-size: 12px;
    color: #b45309;
    line-height: 1.5;
}
.zvv-login-suspended-help a {
    color: #c2410c;
    font-weight: 600;
    text-decoration: underline;
}
.zvv-login-suspended-help a:hover { color: #9a3412; }

/* ═══════════════════════════════════════════════════════════════
   Media Library — modal + admin page
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared spin animation ── */
@keyframes zvv-spin { to { transform: rotate(360deg); } }
.zvv-spin { display: inline-block; animation: zvv-spin .7s linear infinite; }

/* ── Modal positioning ── */
#zvvMediaLibModal,
#storyPostsPickerModal {
    z-index: 10500;
}
#zvvMediaLibModal + .modal-backdrop {
    z-index: 10499;
}

/* ── Modal shell ── */
.zvv-ml-content {
    border-radius: 16px;
    overflow: hidden;
    border: 1.5px solid rgba(124,58,237,0.15);
}
[data-bs-theme="dark"] .zvv-ml-content {
    background: #1e1f2e;
    border-color: rgba(189,147,249,0.18);
}

/* ── Header ── */
.zvv-ml-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1.5px solid rgba(124,58,237,0.1);
    gap: 12px;
    flex-wrap: wrap;
}
[data-bs-theme="dark"] .zvv-ml-header {
    border-color: rgba(189,147,249,0.12);
    background: #16172a;
}
.zvv-ml-header-left  { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.zvv-ml-header-right { display: flex; align-items: center; gap: 10px; }
.zvv-ml-title {
    font-size: 16px;
    font-weight: 700;
    color: #7c3aed;
    margin: 0;
    white-space: nowrap;
}
[data-bs-theme="dark"] .zvv-ml-title { color: #bd93f9; }

/* ── Scope tabs (My Media / All Media) — admin modal only ── */
.zvv-ml-scope-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.zvv-ml-scope-tab {
    padding: 4px 13px;
    border-radius: 8px;
    border: 1.5px solid rgba(124,58,237,0.2);
    background: transparent;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    display: flex; align-items: center; gap: 5px;
}
.zvv-ml-scope-tab:hover,
.zvv-ml-scope-tab.active { background: rgba(124,58,237,0.08); color: #7c3aed; border-color: #7c3aed; }
[data-bs-theme="dark"] .zvv-ml-scope-tab { border-color: rgba(189,147,249,0.2); color: #6272a4; }
[data-bs-theme="dark"] .zvv-ml-scope-tab:hover,
[data-bs-theme="dark"] .zvv-ml-scope-tab.active { background: rgba(189,147,249,0.12); color: #bd93f9; border-color: #bd93f9; }

/* ── Type tabs (Images / Videos) ── */
.zvv-ml-type-tabs { display: flex; gap: 4px; }
.zvv-ml-type-tab {
    padding: 5px 14px;
    border-radius: 8px;
    border: 1.5px solid rgba(124,58,237,0.2);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #6272a4;
    cursor: pointer;
    transition: background .15s, color .15s;
    display: flex; align-items: center; gap: 5px;
}
.zvv-ml-type-tab:hover,
.zvv-ml-type-tab.active {
    background: rgba(124,58,237,0.1);
    color: #7c3aed;
    border-color: #7c3aed;
}
[data-bs-theme="dark"] .zvv-ml-type-tab { border-color: rgba(189,147,249,0.2); color: #6272a4; }
[data-bs-theme="dark"] .zvv-ml-type-tab:hover,
[data-bs-theme="dark"] .zvv-ml-type-tab.active { background: rgba(189,147,249,0.12); color: #bd93f9; border-color: #bd93f9; }

/* ── Upload button ── */
.zvv-ml-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    white-space: nowrap;
}
.zvv-ml-upload-btn:hover { opacity: .88; }
[data-bs-theme="dark"] .zvv-ml-upload-btn { background: linear-gradient(135deg, #bd93f9, #9580ff); color: #1e1f2e; }
.zvv-ml-upload-status { font-size: 12px; color: #059669; font-weight: 600; }

/* ── Body / grid ── */
.zvv-ml-body { padding: 16px; min-height: 340px; }
.zvv-ml-loading,
.zvv-ml-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: #9ca3af;
    font-size: 14px;
}
.zvv-ml-empty i { font-size: 2.5rem; opacity: .4; }

.zvv-ml-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}

.zvv-ml-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: rgba(124,58,237,0.04);
    transition: border-color .15s, box-shadow .15s;
    aspect-ratio: 1;
}
.zvv-ml-item:hover  { border-color: rgba(124,58,237,0.3); }
.zvv-ml-item.selected { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.2); }
[data-bs-theme="dark"] .zvv-ml-item { background: rgba(189,147,249,0.06); }
[data-bs-theme="dark"] .zvv-ml-item:hover { border-color: rgba(189,147,249,0.35); }
[data-bs-theme="dark"] .zvv-ml-item.selected { border-color: #bd93f9; box-shadow: 0 0 0 3px rgba(189,147,249,0.2); }

.zvv-ml-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.zvv-ml-video-thumb {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px;
    background: #1e1f2e;
    color: #bd93f9;
    padding: 8px;
}
.zvv-ml-video-thumb i  { font-size: 2rem; }
.zvv-ml-video-thumb span {
    font-size: 10px; color: #9ca3af; text-align: center;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    max-width: 100%;
}

.zvv-ml-del {
    position: absolute;
    top: 4px; right: 4px;
    width: 24px; height: 24px;
    border-radius: 6px;
    border: none;
    background: rgba(220,38,38,0.85);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.zvv-ml-item:hover .zvv-ml-del { display: flex; }

/* ── Pager ── */
.zvv-ml-pager {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; margin-top: 14px;
}
.zvv-ml-pg-btn {
    padding: 5px 14px;
    border-radius: 8px;
    border: 1.5px solid rgba(124,58,237,0.2);
    background: transparent;
    color: #7c3aed;
    font-weight: 600; cursor: pointer;
    transition: background .15s;
}
.zvv-ml-pg-btn:hover { background: rgba(124,58,237,0.08); }
[data-bs-theme="dark"] .zvv-ml-pg-btn { color: #bd93f9; border-color: rgba(189,147,249,0.2); }
.zvv-ml-pg-info { font-size: 13px; color: #6272a4; }

/* ── Footer ── */
.zvv-ml-footer {
    border-top: 1.5px solid rgba(124,58,237,0.1);
    padding: 12px 20px;
    display: flex; align-items: center; gap: 10px;
}
[data-bs-theme="dark"] .zvv-ml-footer { border-color: rgba(189,147,249,0.12); background: #16172a; }
.zvv-ml-selected-info {
    flex: 1; font-size: 13px; color: #6272a4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zvv-ml-insert-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 20px; border-radius: 9px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff; font-size: 13px; font-weight: 700;
    border: none; cursor: pointer; transition: opacity .15s;
}
.zvv-ml-insert-btn:disabled { opacity: .4; cursor: not-allowed; }
.zvv-ml-insert-btn:not(:disabled):hover { opacity: .88; }
[data-bs-theme="dark"] .zvv-ml-insert-btn { background: linear-gradient(135deg, #bd93f9, #9580ff); color: #1e1f2e; }

/* ── Admin media library page ── */
.zvv-admin-tabs { display: flex; gap: 6px; }
.zvv-admin-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 18px; border-radius: 10px;
    font-size: 13px; font-weight: 600;
    border: 1.5px solid rgba(124,58,237,0.2);
    color: #6272a4; text-decoration: none;
    transition: background .15s, color .15s;
}
.zvv-admin-tab:hover,
.zvv-admin-tab.active {
    background: rgba(124,58,237,0.09);
    color: #7c3aed; border-color: #7c3aed;
}
.zvv-media-upload-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.zvv-media-upload-status { font-size: 13px; color: #059669; font-weight: 600; }
.zvv-media-admin-filterbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.zvv-media-user-filter select { padding: 5px 12px; border-radius: 8px; border: 1.5px solid rgba(124,58,237,0.2); font-size: 13px; background: var(--bs-body-bg, #fff); color: inherit; cursor: pointer; }
.zvv-media-user-filter select:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.zvv-media-admin-stats { font-size: 13px; color: #9ca3af; }
.zvv-media-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.zvv-media-filter-btn {
    padding: 5px 14px; border-radius: 8px;
    border: 1.5px solid rgba(124,58,237,0.15);
    background: transparent; font-size: 13px; font-weight: 600;
    color: #6272a4; cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    transition: background .15s, color .15s;
}
.zvv-media-filter-btn.active,
.zvv-media-filter-btn:hover { background: rgba(124,58,237,0.08); color: #7c3aed; border-color: #7c3aed; }

.zvv-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.zvv-media-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(124,58,237,0.08);
    background: rgba(124,58,237,0.03);
    cursor: default;
}
.zvv-media-thumb { aspect-ratio: 1; overflow: hidden; }
.zvv-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zvv-media-thumb-video {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    background: #1e1f2e; color: #bd93f9; font-size: 2.5rem;
}
.zvv-media-info {
    padding: 6px 8px;
    display: flex; flex-direction: column; gap: 2px;
}
.zvv-media-name {
    font-size: 11px; font-weight: 600; color: var(--zvv-ink, #282a36);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zvv-media-uploader { font-size: 10px; color: #7c3aed; }
.zvv-media-size { font-size: 10px; color: #9ca3af; }
.zvv-media-del-btn {
    position: absolute; top: 5px; right: 5px;
    width: 26px; height: 26px; border-radius: 7px;
    border: none; background: rgba(220,38,38,0.88);
    color: #fff; font-size: 12px;
    cursor: pointer; display: none;
    align-items: center; justify-content: center; padding: 0;
}
.zvv-media-item:hover .zvv-media-del-btn { display: flex; }
.zvv-media-loading,
.zvv-media-empty {
    grid-column: 1/-1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; padding: 60px 20px;
    color: #9ca3af; font-size: 14px;
}
.zvv-media-empty i { font-size: 2.5rem; opacity: .35; }
.zvv-media-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.zvv-media-page-btn {
    padding: 5px 13px; border-radius: 8px;
    border: 1.5px solid rgba(124,58,237,0.2);
    background: transparent; font-size: 13px; font-weight: 600;
    color: #7c3aed; cursor: pointer; transition: background .15s;
}
.zvv-media-page-btn:hover,
.zvv-media-page-btn.active { background: rgba(124,58,237,0.1); }

/* ═══════════════════════════════════════════════════════════
   SEO Panel  — .zvv-seo-*
   ═══════════════════════════════════════════════════════════ */
.zvv-seo-panel {
    margin-top: 24px;
    border: 1.5px solid rgba(124,58,237,0.18);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bs-body-bg, #fff);
}
[data-bs-theme="dark"] .zvv-seo-panel { border-color: rgba(189,147,249,0.18); }

/* Toggle button */
.zvv-seo-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: rgba(124,58,237,0.04);
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #7c3aed;
    gap: 10px;
    transition: background .15s;
}
.zvv-seo-toggle:hover { background: rgba(124,58,237,0.09); }
[data-bs-theme="dark"] .zvv-seo-toggle { background: rgba(189,147,249,0.06); color: #bd93f9; }
.zvv-seo-toggle-left { display: flex; align-items: center; gap: 8px; }
.zvv-seo-chevron { font-size: 12px; transition: transform .25s; }
.zvv-seo-toggle[aria-expanded="true"] .zvv-seo-chevron { transform: rotate(180deg); }
.zvv-seo-filled-dot { color: #7c3aed; font-size: 10px; }

/* Body */
.zvv-seo-body { padding: 0 20px 20px; }

/* Section */
.zvv-seo-section {
    padding: 18px 0;
    border-top: 1px solid rgba(124,58,237,0.10);
}
.zvv-seo-section:first-child { border-top: none; padding-top: 14px; }
.zvv-seo-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #7c3aed;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
[data-bs-theme="dark"] .zvv-seo-section-title { color: #bd93f9; }
.zvv-seo-section-sub { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: #9ca3af; margin-left: 4px; }

/* Grid row */
.zvv-seo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
@media (max-width: 700px) { .zvv-seo-row { grid-template-columns: 1fr; } }

/* Field */
.zvv-seo-field { display: flex; flex-direction: column; gap: 5px; }
.zvv-seo-label {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 6px;
}
[data-bs-theme="dark"] .zvv-seo-label { color: #e2e8f0; }
.zvv-seo-counter { font-weight: 400; color: #9ca3af; margin-left: auto; font-size: 11px; }
.zvv-seo-counter.warn { color: #f59e0b; }
.zvv-seo-counter.over { color: #ef4444; }
.zvv-seo-hint { font-size: 11px; color: #9ca3af; line-height: 1.45; }
.zvv-seo-hint code { font-size: 10.5px; background: rgba(124,58,237,0.08); padding: 1px 4px; border-radius: 4px; }

/* Inputs */
.zvv-seo-input,
.zvv-seo-textarea,
.zvv-seo-select {
    border: 1.5px solid rgba(124,58,237,0.15);
    border-radius: 8px;
    padding: 7px 11px;
    font-size: 13px;
    background: var(--bs-body-bg, #fff);
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    font-family: inherit;
}
.zvv-seo-input:focus,
.zvv-seo-textarea:focus,
.zvv-seo-select:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
[data-bs-theme="dark"] .zvv-seo-input,
[data-bs-theme="dark"] .zvv-seo-textarea,
[data-bs-theme="dark"] .zvv-seo-select { border-color: rgba(189,147,249,0.2); }
.zvv-seo-textarea { resize: vertical; }
.zvv-seo-select { cursor: pointer; }

/* Auto-slug button */
.zvv-seo-auto-btn {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 6px;
    border: 1.5px solid rgba(124,58,237,0.3);
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: #7c3aed;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background .15s;
}
.zvv-seo-auto-btn:hover { background: rgba(124,58,237,0.08); }

/* Slug input row */
.zvv-seo-slug-wrap { display: flex; align-items: center; border: 1.5px solid rgba(124,58,237,0.15); border-radius: 8px; overflow: hidden; }
.zvv-seo-slug-base { padding: 7px 8px; background: rgba(124,58,237,0.05); font-size: 12px; color: #9ca3af; white-space: nowrap; flex-shrink: 0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.zvv-seo-slug-input { border: none !important; border-radius: 0 !important; box-shadow: none !important; flex: 1; }
.zvv-seo-slug-wrap:focus-within { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }

/* SERP preview */
.zvv-seo-serp-preview {
    margin-top: 8px;
    padding: 10px 13px;
    border-radius: 9px;
    border: 1px solid rgba(124,58,237,0.1);
    background: rgba(124,58,237,0.03);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.zvv-serp-url  { font-size: 11px; color: #059669; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zvv-serp-title { font-size: 13px; color: #1a56db; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zvv-serp-desc { font-size: 11.5px; color: #4b5563; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-bs-theme="dark"] .zvv-serp-title { color: #818cf8; }
[data-bs-theme="dark"] .zvv-serp-desc { color: #9ca3af; }

/* Noindex checkbox */
.zvv-seo-checkbox-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.zvv-seo-checkbox { flex-shrink: 0; margin-top: 2px; width: 15px; height: 15px; accent-color: #7c3aed; cursor: pointer; }

/* Redirect chips */
.zvv-seo-redirect-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.zvv-seo-redirect-chip { font-size: 11.5px; background: rgba(124,58,237,0.07); color: #7c3aed; border: 1px solid rgba(124,58,237,0.18); padding: 3px 10px; border-radius: 20px; }

/* FAQ builder */
.zvv-seo-faq-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.zvv-seo-faq-row { display: flex; gap: 10px; align-items: flex-start; }
.zvv-seo-faq-fields { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.zvv-seo-faq-del {
    padding: 6px 8px;
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 7px;
    background: transparent;
    color: #ef4444;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
    transition: background .15s;
}
.zvv-seo-faq-del:hover { background: rgba(239,68,68,0.07); }
.zvv-seo-add-faq {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px dashed rgba(124,58,237,0.3);
    border-radius: 8px;
    background: transparent;
    color: #7c3aed;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.zvv-seo-add-faq:hover { border-color: #7c3aed; background: rgba(124,58,237,0.04); }

/* ── Save button ── */
.zvv-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
    text-decoration: none;
    backdrop-filter: blur(4px);
}
.zvv-save-btn:hover {
    border-color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.22);
    color: #fff;
}
.zvv-save-btn.saved {
    border-color: #a78bfa;
    background: rgba(124,58,237,0.25);
    color: #c4b5fd;
}
.zvv-save-btn.saved:hover {
    background: rgba(124,58,237,0.35);
    color: #ddd6fe;
}

/* ── Notification page ── */
.zvv-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1.5px solid rgba(124,58,237,0.08);
    background: var(--zvv-card-bg, #fff);
    margin-bottom: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, background .15s;
}
.zvv-notif-item:hover { border-color: rgba(124,58,237,0.2); background: rgba(124,58,237,0.03); }
.zvv-notif-item.unread { border-left: 3px solid #7c3aed; background: rgba(124,58,237,0.04); }
[data-bs-theme=dark] .zvv-notif-item { background: rgba(30,27,75,.35); border-color: rgba(124,58,237,.2); }
[data-bs-theme=dark] .zvv-notif-item.unread { background: rgba(124,58,237,.1); }
.zvv-notif-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
    background: rgba(124,58,237,0.1); color: #7c3aed;
}
.zvv-notif-title { font-size: 14px; font-weight: 700; color: #1f2937; margin-bottom: 2px; }
[data-bs-theme=dark] .zvv-notif-title { color: #f3f4f6; }
.zvv-notif-body { font-size: 13px; color: #6b7280; }
[data-bs-theme=dark] .zvv-notif-body { color: #9ca3af; }
.zvv-notif-time { font-size: 11px; color: #9ca3af; white-space: nowrap; margin-left: auto; flex-shrink: 0; }

/* ── Reading history & saved posts pages ── */
.zvv-hist-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px; border-radius: 12px;
    border: 1.5px solid rgba(124,58,237,0.08);
    background: var(--zvv-card-bg, #fff);
    margin-bottom: 8px;
}
[data-bs-theme=dark] .zvv-hist-row { background: rgba(30,27,75,.35); border-color: rgba(124,58,237,.2); }
.zvv-hist-thumb {
    width: 60px; height: 45px; border-radius: 8px; object-fit: cover;
    flex-shrink: 0; background: rgba(124,58,237,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800; color: #7c3aed; overflow: hidden;
}
.zvv-hist-thumb img { width: 100%; height: 100%; object-fit: cover; }
.zvv-hist-body { flex: 1; min-width: 0; }
.zvv-hist-title { font-size: 14px; font-weight: 600; color: #1f2937; text-decoration: none; }
[data-bs-theme=dark] .zvv-hist-title { color: #f3f4f6; }
.zvv-hist-title:hover { color: #7c3aed; }
.zvv-hist-meta { font-size: 12px; color: #9ca3af; margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
.zvv-hist-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.zvv-badge-read { background: rgba(124,58,237,0.1); color: #7c3aed; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.zvv-saved-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 640px) { .zvv-saved-grid { grid-template-columns: 1fr; } }
.zvv-saved-card {
    border-radius: 14px; border: 1.5px solid rgba(124,58,237,0.1);
    background: var(--zvv-card-bg, #fff); overflow: hidden;
    display: flex; flex-direction: column;
}
[data-bs-theme=dark] .zvv-saved-card { background: rgba(30,27,75,.35); border-color: rgba(124,58,237,.2); }
.zvv-saved-thumb {
    width: 100%; height: 120px; object-fit: cover;
    background: rgba(124,58,237,0.08); display: flex;
    align-items: center; justify-content: center;
    font-size: 28px; font-weight: 800; color: #7c3aed;
}
.zvv-saved-thumb img { width: 100%; height: 100%; object-fit: cover; }
.zvv-saved-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.zvv-saved-title { font-size: 14px; font-weight: 700; color: #1f2937; text-decoration: none; line-height: 1.4; }
[data-bs-theme=dark] .zvv-saved-title { color: #f3f4f6; }
.zvv-saved-title:hover { color: #7c3aed; }
.zvv-saved-meta { font-size: 11px; color: #9ca3af; }
.zvv-saved-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }

/* ══════════════════════════════════════════════════════════════
   READER EXPERIENCE — toolbar, TOC, reading mode, print, PWA
══════════════════════════════════════════════════════════════ */

/* ── Continue Reading Banner ── */
.zvv-continue-bar {
    position: fixed; top: 64px; left: 0; right: 0;
    z-index: 1038;
    background: #7c3aed;
    color: #fff;
    padding: 10px 20px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    font-size: 13.5px; font-weight: 600;
    box-shadow: 0 4px 24px rgba(124,58,237,.4);
    animation: zvvSlideDown .3s ease;
}
@keyframes zvvSlideDown { from { transform: translateY(-100%); opacity:0; } to { transform: none; opacity:1; } }
.zvv-continue-bar-actions { display: flex; gap: 8px; align-items: center; }
.zvv-continue-btn {
    background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.4);
    color: #fff; border-radius: 6px; padding: 4px 14px; font-size: 12.5px; font-weight: 700;
    cursor: pointer; transition: background .15s;
}
.zvv-continue-btn:hover { background: rgba(255,255,255,.28); }
.zvv-continue-dismiss {
    background: transparent; border: none; color: rgba(255,255,255,.7);
    cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 4px;
}
.zvv-continue-dismiss:hover { color: #fff; }

/* ── Reader Toolbar ── */
.zvv-reader-bar {
    position: fixed;
    bottom: 88px; right: 20px;
    z-index: 1038;
    display: flex; flex-direction: column; align-items: flex-end; gap: 0;
}
.zvv-reader-toggle {
    width: 46px; height: 46px; border-radius: 50%;
    background: #7c3aed; color: #fff;
    border: none; cursor: pointer;
    font-size: 13px; font-weight: 800; letter-spacing: -.02em;
    box-shadow: 0 4px 20px rgba(124,58,237,.5);
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s, box-shadow .15s;
}
.zvv-reader-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(124,58,237,.65); }
.zvv-reader-toggle-aa { font-family: Georgia, serif; }

.zvv-reader-panel {
    background: #fff;
    border: 1.5px solid rgba(124,58,237,.15);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,.14);
    min-width: 200px;
    animation: zvvFadeUp .2s ease;
}
@keyframes zvvFadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
[data-bs-theme=dark] .zvv-reader-panel { background: #1e1f2e; border-color: rgba(124,58,237,.25); }

.zvv-reader-section { padding: 8px 0; border-bottom: 1px solid rgba(124,58,237,.08); }
.zvv-reader-section:last-child { border-bottom: none; padding-bottom: 0; }
.zvv-reader-label {
    display: block; font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: #9ca3af; margin-bottom: 8px;
}
.zvv-reader-fontsize { display: flex; align-items: center; gap: 8px; }
.zvv-reader-fs-btn {
    background: rgba(124,58,237,.08); border: 1.5px solid rgba(124,58,237,.15);
    border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 14px;
    color: #7c3aed; font-weight: 700; transition: background .15s;
}
.zvv-reader-fs-btn:hover { background: rgba(124,58,237,.18); }
[data-bs-theme=dark] .zvv-reader-fs-btn { color: #bd93f9; border-color: rgba(189,147,249,.2); background: rgba(189,147,249,.08); }
.zvv-reader-fs-val {
    flex:1; text-align:center; font-size: 13px; font-weight: 700; color: #6b7280; min-width: 28px;
}
[data-bs-theme=dark] .zvv-reader-fs-val { color: #9ca3af; }

.zvv-reader-fonts { display: flex; gap: 6px; }
.zvv-reader-font-btn {
    flex: 1; padding: 5px 6px; border-radius: 8px; border: 1.5px solid rgba(124,58,237,.12);
    background: transparent; cursor: pointer; font-size: 12px; font-weight: 600;
    color: #6b7280; transition: all .15s;
}
.zvv-reader-font-btn:hover, .zvv-reader-font-btn.active {
    background: #7c3aed; border-color: #7c3aed; color: #fff;
}
[data-bs-theme=dark] .zvv-reader-font-btn { color: #9ca3af; border-color: rgba(189,147,249,.18); }
[data-bs-theme=dark] .zvv-reader-font-btn.active { background: #7c3aed; color: #fff; }

.zvv-reader-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.zvv-reader-icon-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 6px; border-radius: 10px;
    border: 1.5px solid rgba(124,58,237,.1); background: transparent;
    cursor: pointer; font-size: 18px; color: #7c3aed;
    transition: all .15s;
}
.zvv-reader-icon-btn span { font-size: 10px; font-weight: 700; color: #9ca3af; }
.zvv-reader-icon-btn:hover { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.25); }
.zvv-reader-icon-btn[aria-pressed="true"] { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.zvv-reader-icon-btn[aria-pressed="true"] span { color: rgba(255,255,255,.75); }
[data-bs-theme=dark] .zvv-reader-icon-btn { color: #bd93f9; border-color: rgba(189,147,249,.18); }

/* ── Table of Contents ── */
.zvv-toc-inline {
    margin: 0 0 28px;
    border: 1.5px solid rgba(124,58,237,.15);
    border-radius: 14px;
    background: rgba(124,58,237,.04);
    overflow: hidden;
}
[data-bs-theme=dark] .zvv-toc-inline { background: rgba(124,58,237,.07); border-color: rgba(124,58,237,.2); }
.zvv-toc-inline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px 10px;
}
.zvv-toc-inline-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 800;
    color: #7c3aed;
}
[data-bs-theme=dark] .zvv-toc-inline-title { color: #bd93f9; }
.zvv-toc-inline-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 0; background: transparent; border: none;
    font-size: 13.5px; font-weight: 700; color: #7c3aed;
    cursor: pointer;
}
[data-bs-theme=dark] .zvv-toc-inline-toggle { color: #bd93f9; }
.zvv-toc-inline-toggle:hover { color: #5b21b6; }
.zvv-toc-chevron { margin-left: auto; font-size: 12px; transition: transform .2s; }
.zvv-toc-inline-list { display: block; padding: 0 16px 14px; }

.zvv-toc-list { display: flex; flex-direction: column; gap: 1px; }
.zvv-toc-link {
    display: block; padding: 5px 12px;
    font-size: 13px; font-weight: 500; color: #4b5563;
    text-decoration: none; border-radius: 7px;
    border-left: 2px solid transparent;
    transition: all .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zvv-toc-link:hover { background: rgba(124,58,237,.07); color: #7c3aed; border-left-color: #7c3aed; }
.zvv-toc-link.active { background: rgba(124,58,237,.1); color: #7c3aed; border-left-color: #7c3aed; font-weight: 700; }
.zvv-toc-h2 { padding-left: 12px; }
.zvv-toc-h3 { padding-left: 24px; font-size: 12.5px; }
.zvv-toc-h4 { padding-left: 36px; font-size: 12px; }
[data-bs-theme=dark] .zvv-toc-link { color: #9ca3af; }
[data-bs-theme=dark] .zvv-toc-link:hover, [data-bs-theme=dark] .zvv-toc-link.active { color: #bd93f9; border-left-color: #bd93f9; }

/* Floating TOC panel */
.zvv-toc-float {
    position: fixed; top: 80px; right: 20px;
    width: 240px; max-height: calc(100vh - 100px);
    background: #fff;
    border: 1.5px solid rgba(124,58,237,.15);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,.12);
    overflow-y: auto;
    z-index: 1035;
    animation: zvvFadeUp .2s ease;
}
.zvv-toc-float,
.zvv-toc-inline {
    -webkit-overflow-scrolling: touch;
}
[data-bs-theme=dark] .zvv-toc-float { background: #1e1f2e; border-color: rgba(124,58,237,.25); }
.zvv-toc-float-head {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; color: #7c3aed;
    border-bottom: 1px solid rgba(124,58,237,.1);
    position: sticky; top: 0; background: inherit;
}
[data-bs-theme=dark] .zvv-toc-float-head { color: #bd93f9; border-color: rgba(124,58,237,.2); }
.zvv-toc-float-close {
    margin-left: auto; background: transparent; border: none; cursor: pointer;
    color: #9ca3af; font-size: 16px; line-height: 1; padding: 2px;
}
.zvv-toc-float-close:hover { color: #7c3aed; }
.zvv-toc-float .zvv-toc-list { padding: 8px 8px 12px; }

/* ── Anchor Links ── */
.zvv-post-body h2,
.zvv-post-body h3,
.zvv-post-body h4 { position: relative; }
.zvv-post-body h2,
.zvv-post-body h3,
.zvv-post-body h4 { scroll-margin-top: 92px; }
.zvv-anchor-link {
    opacity: 0; margin-left: 8px;
    color: rgba(124,58,237,.5); font-size: .7em;
    text-decoration: none; vertical-align: middle;
    transition: opacity .15s, color .15s;
}
.zvv-post-body h2:hover .zvv-anchor-link,
.zvv-post-body h3:hover .zvv-anchor-link,
.zvv-post-body h4:hover .zvv-anchor-link { opacity: 1; }
.zvv-anchor-link:hover { color: #7c3aed; }
.zvv-heading-flash {
    animation: zvvFlash .8s ease;
    border-radius: 4px;
}
@keyframes zvvFlash {
    0%,100% { background: transparent; }
    30% { background: rgba(124,58,237,.12); }
}

/* ── Copy Code Button ── */
.zvv-copy-code-btn {
    position: absolute; top: 8px; right: 8px;
    background: rgba(124,58,237,.15); color: #7c3aed;
    border: 1px solid rgba(124,58,237,.25); border-radius: 7px;
    padding: 3px 10px; font-size: 11.5px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; gap: 5px;
    transition: all .15s; opacity: 0;
    font-family: inherit;
}
pre:hover .zvv-copy-code-btn { opacity: 1; }
.zvv-copy-code-btn:hover { background: rgba(124,58,237,.25); }
.zvv-copy-code-btn.copied { background: #059669; border-color: #059669; color: #fff; }
[data-bs-theme=dark] .zvv-copy-code-btn { background: rgba(189,147,249,.1); color: #bd93f9; border-color: rgba(189,147,249,.2); }
[data-bs-theme=dark] .zvv-copy-code-btn:hover { background: rgba(189,147,249,.2); }

/* ── Reading Mode ── */
body.zvv-reading-mode .zvv-header { opacity: 0; pointer-events: none; transition: opacity .3s; }
body.zvv-reading-mode .zvv-post-hero { display: none; }
body.zvv-reading-mode .zvv-post-sidebar { display: none; }
body.zvv-reading-mode .zvv-post-article {
    max-width: 680px; margin: 40px auto;
    padding: 0 24px;
}
body.zvv-reading-mode .zvv-post-layout { display: block; }
body.zvv-reading-mode .zvv-post-wrap { max-width: 100%; }
body.zvv-reading-mode .zvv-post-body { line-height: 1.85; }
body.zvv-reading-mode:hover .zvv-header { opacity: 1; pointer-events: auto; }
body.zvv-reading-mode .zvv-toc-float { display: none; }

/* ── Night / Sepia Mode ── */
body.zvv-sepia-mode {
    background: #f4ecd8 !important;
    color: #3b2f2f !important;
}
body.zvv-sepia-mode .zvv-post-body,
body.zvv-sepia-mode .zvv-post-article { color: #3b2f2f; }
body.zvv-sepia-mode .zvv-header {
    background: rgba(90,65,40,.92) !important;
}
body.zvv-sepia-mode .zvv-post-hero { filter: sepia(40%) brightness(.95); }
body.zvv-sepia-mode .zvv-reader-panel,
body.zvv-sepia-mode .zvv-toc-float { background: #fdf6e3; border-color: rgba(90,65,40,.2); }

/* ── Print Styles ── */
@media print {
    .zvv-header, .zvv-footer, .zvv-post-sidebar,
    .zvv-reader-bar, .zvv-toc-float, .zvv-toc-inline,
    .zvv-continue-bar, .zvv-read-progress,
    .zvv-post-footer, .zvv-nl-section, .zvv-related-section,
    #discussion, .zvv-comment-section,
    .zvv-copy-code-btn, .zvv-anchor-link,
    .zvv-post-tags, .zvv-back-top, .zvv-cookie-bar { display: none !important; }
    body { background: #fff !important; color: #000 !important; font-size: 12pt !important; }
    .zvv-post-layout { display: block !important; }
    .zvv-post-article { max-width: 100% !important; }
    .zvv-post-body { line-height: 1.7 !important; font-size: 12pt !important; }
    .zvv-post-body h2, .zvv-post-body h3 { page-break-after: avoid; }
    .zvv-post-body p { orphans: 3; widows: 3; }
    .zvv-post-body pre { white-space: pre-wrap; border: 1px solid #ccc; padding: 8px; }
    .zvv-post-body a::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; }
    .zvv-post-hero { page-break-after: avoid; }
    @page { margin: 2cm; }
}

/* ── Scrollbar for TOC ── */
.zvv-toc-float::-webkit-scrollbar { width: 4px; }
.zvv-toc-float::-webkit-scrollbar-thumb { background: rgba(124,58,237,.3); border-radius: 4px; }

/* ── Mobile: the floating TOC becomes a near-full-width sheet ── */
@media (max-width: 1099px) {
    .zvv-toc-float {
        left: 12px; right: 12px; width: auto;
        top: auto; bottom: 150px;
        max-height: 55vh;
    }
    .zvv-reader-bar { bottom: 80px; right: 14px; }
}

/* ══════════════════════════════════════════════════════════════
   FRIEND SYSTEM — author page button states
══════════════════════════════════════════════════════════════ */
.zvv-friend-form { display: inline-flex; margin: 0; }
.zvv-friend-btn { cursor: pointer; }
.zvv-friend-btn .zvv-friend-label-hover { display: none; }
.zvv-friend-btn-pending:hover .zvv-friend-label,
.zvv-friend-btn-friends:hover .zvv-friend-label { display: none; }
.zvv-friend-btn-pending:hover .zvv-friend-label-hover,
.zvv-friend-btn-friends:hover .zvv-friend-label-hover { display: inline; }
.zvv-friend-btn-pending:hover { border-color: #f59e0b !important; color: #d97706 !important; }
.zvv-friend-btn-friends { border-color: rgba(5,150,105,.4) !important; color: #059669 !important; }
.zvv-friend-btn-friends:hover { border-color: #dc2626 !important; color: #dc2626 !important; background: rgba(220,38,38,.06) !important; }

/* ══════════════════════════════════════════════════════════════
   FRIEND CHAT WIDGET — floating bottom-left chatbox
══════════════════════════════════════════════════════════════ */
.zvv-chat-widget {
    position: fixed; bottom: 20px; left: 20px;
    z-index: 1039;
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}

/* ── Launcher ── */
.zvv-chat-fab {
    width: 54px; height: 54px; border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff; border: none; cursor: pointer;
    font-size: 22px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 26px rgba(124,58,237,.5);
    transition: transform .15s, box-shadow .15s;
    position: relative;
}
.zvv-chat-fab:hover { transform: scale(1.08); box-shadow: 0 8px 34px rgba(124,58,237,.65); }
.zvv-chat-fab.open { background: #4b5563; }
.zvv-chat-fab-badge {
    position: absolute; top: -4px; right: -4px;
    background: #ef4444; color: #fff;
    font-size: 10.5px; font-weight: 800; line-height: 1;
    border-radius: 10px; padding: 4px 7px;
    border: 2px solid #fff;
}
[data-bs-theme=dark] .zvv-chat-fab-badge { border-color: #16112e; }

/* ── Panel ── */
.zvv-chat-panel {
    width: 330px; height: 460px; max-height: calc(100vh - 120px);
    background: #fff;
    border: 1.5px solid rgba(124,58,237,.15);
    border-radius: 18px;
    box-shadow: 0 12px 50px rgba(0,0,0,.18);
    overflow: hidden;
    display: flex; flex-direction: column;
    animation: zvvChatUp .2s ease;
}
@keyframes zvvChatUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
[data-bs-theme=dark] .zvv-chat-panel { background: #1e1f2e; border-color: rgba(124,58,237,.3); }

.zvv-chat-view { display: flex; flex-direction: column; height: 100%; }
.zvv-chat-view[hidden] { display: none; }

/* ── Head ── */
.zvv-chat-head {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 14px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff; flex-shrink: 0;
}
.zvv-chat-head strong { font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex: 1; }
.zvv-chat-head-btn {
    background: rgba(255,255,255,.15); border: none; color: #fff;
    width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
    transition: background .15s; flex-shrink: 0;
}
.zvv-chat-head-btn:hover { background: rgba(255,255,255,.3); }
.zvv-chat-convo-who { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.zvv-chat-convo-who strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zvv-chat-convo-who small { font-size: 10.5px; font-weight: 600; }
.zvv-chat-status-on  { color: #6ee7b7; }
.zvv-chat-status-on::before  { content: '● '; }
.zvv-chat-status-off { color: rgba(255,255,255,.65); }
.zvv-chat-status-off::before { content: '○ '; }

/* ── Friends list ── */
.zvv-chat-friends { flex: 1; overflow-y: auto; padding: 8px; }
.zvv-chat-friend {
    display: flex; align-items: center; gap: 11px;
    width: 100%; padding: 9px 10px;
    background: transparent; border: none; border-radius: 12px;
    cursor: pointer; text-align: left; transition: background .12s;
}
.zvv-chat-friend:hover { background: rgba(124,58,237,.07); }
.zvv-chat-friend-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.zvv-chat-friend-info strong { font-size: 13.5px; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zvv-chat-friend-info small { font-size: 11.5px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-bs-theme=dark] .zvv-chat-friend-info strong { color: #f3f4f6; }

.zvv-chat-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800; position: relative;
}
/* round the image itself instead of clipping the wrapper, so the
   online dot can sit on the circle's edge without being cut off */
.zvv-chat-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.zvv-chat-avatar.online::after {
    content: ''; position: absolute; bottom: -1px; right: -1px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #10b981; border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
[data-bs-theme=dark] .zvv-chat-avatar.online::after { border-color: #1e1f2e; }

.zvv-chat-unread {
    background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 800;
    border-radius: 10px; padding: 3px 7px; flex-shrink: 0;
}

/* ── Messages ── */
.zvv-chat-messages {
    flex: 1; overflow-y: auto; padding: 14px 12px;
    display: flex; flex-direction: column; gap: 8px;
    background: #faf8ff;
}
[data-bs-theme=dark] .zvv-chat-messages { background: #16112e; }
.zvv-chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; }
.zvv-chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.zvv-chat-bubble {
    background: #fff; color: #1f2937;
    border: 1px solid rgba(124,58,237,.12);
    padding: 8px 12px; border-radius: 14px 14px 14px 4px;
    font-size: 13.5px; line-height: 1.45; word-break: break-word; white-space: pre-wrap;
}
.zvv-chat-msg.mine .zvv-chat-bubble {
    background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff;
    border: none; border-radius: 14px 14px 4px 14px;
}
[data-bs-theme=dark] .zvv-chat-bubble { background: #2a2b3d; color: #f3f4f6; border-color: rgba(124,58,237,.25); }
.zvv-chat-msg-time { font-size: 10px; color: #b0a8c9; margin-top: 2px; padding: 0 4px; }

.zvv-chat-msg-row { display: flex; align-items: center; gap: 3px; }
.zvv-chat-msg.mine .zvv-chat-msg-row { flex-direction: row-reverse; }
.zvv-chat-react-trigger {
    width: 22px; height: 22px; border-radius: 50%; border: none; background: transparent;
    color: #b0a8c9; font-size: 13px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: .5; transition: opacity .12s, background .12s, color .12s;
}
.zvv-chat-react-trigger:hover, .zvv-chat-react-trigger:focus-visible { opacity: 1; background: rgba(124,58,237,.12); color: #7c3aed; }

.zvv-chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.zvv-chat-reaction-pill {
    display: inline-flex; align-items: center; gap: 3px;
    border: 1px solid rgba(124,58,237,.18); background: #fff;
    border-radius: 10px; padding: 1px 6px; font-size: 11px; cursor: pointer;
    color: #4b5563; line-height: 1.6;
}
.zvv-chat-reaction-pill span { font-weight: 700; }
[data-bs-theme=dark] .zvv-chat-reaction-pill { background: #241f3a; color: #d8d2ea; border-color: rgba(124,58,237,.3); }
.zvv-chat-reaction-pill.mine { border-color: #7c3aed; background: rgba(124,58,237,.12); color: #7c3aed; }

.zvv-chat-reaction-picker {
    position: fixed; z-index: 4200;
    display: flex; gap: 3px; padding: 6px 8px;
    background: #fff; border-radius: 20px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
    border: 1px solid rgba(124,58,237,.15);
}
[data-bs-theme=dark] .zvv-chat-reaction-picker { background: #241f3a; border-color: rgba(124,58,237,.3); }
.zvv-chat-reaction-picker button {
    border: none; background: transparent; font-size: 18px; cursor: pointer; line-height: 1;
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .1s, background .1s;
}
.zvv-chat-reaction-picker button:hover { background: rgba(124,58,237,.12); transform: scale(1.15); }
[data-bs-theme=dark] .zvv-chat-reaction-picker button:hover { background: rgba(124,58,237,.25); }

/* ── Compose ── */
.zvv-chat-compose {
    display: flex; gap: 8px; padding: 10px;
    border-top: 1px solid rgba(124,58,237,.1);
    background: #fff; flex-shrink: 0; margin: 0;
}
[data-bs-theme=dark] .zvv-chat-compose { background: #1e1f2e; border-color: rgba(124,58,237,.2); }
.zvv-chat-compose input {
    flex: 1; border: 1.5px solid rgba(124,58,237,.15); border-radius: 20px;
    padding: 8px 15px; font-size: 13.5px; outline: none; min-width: 0;
    background: #faf8ff; color: #1f2937;
}
.zvv-chat-compose input:focus { border-color: #7c3aed; }
[data-bs-theme=dark] .zvv-chat-compose input { background: #16112e; color: #f3f4f6; border-color: rgba(124,58,237,.3); }
.zvv-chat-compose button {
    width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
    background: #7c3aed; color: #fff; font-size: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.zvv-chat-compose button:hover { background: #6d28d9; }
.zvv-chat-compose .zvv-chat-emoji-btn {
    background: transparent; color: #b0a8c9; font-size: 19px;
}
.zvv-chat-compose .zvv-chat-emoji-btn:hover { background: rgba(124,58,237,.12); color: #7c3aed; }

.zvv-chat-emoji-picker {
    position: fixed; z-index: 4200;
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
    padding: 8px; max-width: 268px;
    background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
    border: 1px solid rgba(124,58,237,.15);
}
[data-bs-theme=dark] .zvv-chat-emoji-picker { background: #241f3a; border-color: rgba(124,58,237,.3); }
.zvv-chat-emoji-picker button {
    border: none; background: transparent; font-size: 18px; cursor: pointer; line-height: 1;
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .1s;
}
.zvv-chat-emoji-picker button:hover { background: rgba(124,58,237,.12); }
[data-bs-theme=dark] .zvv-chat-emoji-picker button:hover { background: rgba(124,58,237,.25); }

.zvv-chat-tick { margin-left: 3px; font-size: 12px; color: #9ca3af; vertical-align: -1px; }
.zvv-chat-tick.read { color: #7c3aed; }

/* ── Empty / loading ── */
.zvv-chat-empty { text-align: center; padding: 40px 20px; color: #9ca3af; }
.zvv-chat-empty i { font-size: 34px; color: #ddd6fe; display: block; margin-bottom: 10px; }
.zvv-chat-empty p { font-size: 12.5px; line-height: 1.5; margin: 0; }
.zvv-chat-loading { text-align: center; padding: 30px; color: #9ca3af; font-size: 13px; }
.zvv-chat-loading i { animation: zvvChatSpin 1s linear infinite; display: inline-block; }
@keyframes zvvChatSpin { to { transform: rotate(360deg); } }

/* ── Mobile ── */
@media (max-width: 480px) {
    .zvv-chat-widget { bottom: 14px; left: 14px; }
    .zvv-chat-panel { width: calc(100vw - 28px); height: 65vh; }
}

/* keep out of print */
@media print { .zvv-chat-widget { display: none !important; } }

/* ── Chat FAB new-message attention ── */
.zvv-chat-fab.has-unread {
    box-shadow: 0 6px 26px rgba(124,58,237,.5), 0 0 0 0 rgba(239,68,68,.55);
}
.zvv-chat-fab.pulse {
    animation: zvvChatPulse 1.2s ease-out 3;
}
@keyframes zvvChatPulse {
    0%   { box-shadow: 0 6px 26px rgba(124,58,237,.5), 0 0 0 0 rgba(239,68,68,.55); }
    70%  { box-shadow: 0 6px 26px rgba(124,58,237,.5), 0 0 0 16px rgba(239,68,68,0); }
    100% { box-shadow: 0 6px 26px rgba(124,58,237,.5), 0 0 0 0 rgba(239,68,68,0); }
}

/* ══════════════════════════════════════════════════════════════
   ADVANCED SEARCH PAGE
══════════════════════════════════════════════════════════════ */
.zvv-adv-hero {
    background: linear-gradient(160deg, #f4f1ff 0%, #ede9fe 60%, #e0e7ff 100%);
    padding: 52px 0 40px;
    border-bottom: 1.5px solid rgba(124,58,237,.1);
}
[data-bs-theme=dark] .zvv-adv-hero {
    background: linear-gradient(160deg, #16112e 0%, #1e1b4b 100%);
    border-color: rgba(124,58,237,.25);
}
.zvv-adv-title {
    font-family: 'Sora', sans-serif; font-size: clamp(24px, 4vw, 36px);
    font-weight: 800; color: #0f0a2e; margin: 10px 0 26px;
}
[data-bs-theme=dark] .zvv-adv-title { color: #f3f4f6; }

/* keyword bar */
.zvv-adv-bar {
    display: flex; align-items: center; gap: 4px;
    background: #fff; border: 2px solid rgba(124,58,237,.25);
    border-radius: 16px; padding: 6px 6px 6px 18px;
    max-width: 720px;
    box-shadow: 0 8px 32px rgba(124,58,237,.12);
    transition: border-color .15s;
}
.zvv-adv-bar:focus-within { border-color: #7c3aed; }
[data-bs-theme=dark] .zvv-adv-bar { background: #1e1f2e; border-color: rgba(124,58,237,.35); }
.zvv-adv-bar-icon { color: #a78bfa; font-size: 18px; flex-shrink: 0; }
.zvv-adv-input {
    flex: 1; border: none; outline: none; background: transparent;
    padding: 10px 12px; font-size: 16px; color: #1f2937; min-width: 0;
}
[data-bs-theme=dark] .zvv-adv-input { color: #f3f4f6; }
.zvv-adv-submit {
    background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff;
    border: none; border-radius: 12px; padding: 11px 26px;
    font-size: 14.5px; font-weight: 700; cursor: pointer; flex-shrink: 0;
    transition: opacity .15s;
}
.zvv-adv-submit:hover { opacity: .9; }

/* filter toggle */
.zvv-adv-filter-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 16px; padding: 8px 18px;
    background: transparent; border: 1.5px solid rgba(124,58,237,.3);
    border-radius: 22px; font-size: 13px; font-weight: 700; color: #7c3aed;
    cursor: pointer; transition: all .15s;
}
.zvv-adv-filter-toggle:hover { background: rgba(124,58,237,.08); }
.zvv-adv-filter-toggle[aria-expanded="true"] .zvv-adv-chevron { transform: rotate(180deg); }
.zvv-adv-chevron { font-size: 11px; transition: transform .2s; }
.zvv-adv-filter-count {
    background: #7c3aed; color: #fff; font-size: 10.5px; font-weight: 800;
    border-radius: 10px; padding: 2px 7px;
}
[data-bs-theme=dark] .zvv-adv-filter-toggle { color: #bd93f9; }

/* filter grid */
.zvv-adv-filters {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px; margin-top: 18px; max-width: 980px;
    background: #fff; border: 1.5px solid rgba(124,58,237,.12);
    border-radius: 16px; padding: 18px;
    animation: zvvFadeUp .2s ease;
}
[data-bs-theme=dark] .zvv-adv-filters { background: rgba(30,27,75,.5); border-color: rgba(124,58,237,.25); }
.zvv-adv-field { display: flex; flex-direction: column; gap: 6px; }
.zvv-adv-field label {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: #9ca3af; display: flex; align-items: center; gap: 5px;
}
.zvv-adv-field select,
.zvv-adv-field input {
    border: 1.5px solid rgba(124,58,237,.15); border-radius: 10px;
    padding: 8px 12px; font-size: 13.5px; color: #1f2937; background: #faf8ff;
    outline: none; transition: border-color .15s;
}
.zvv-adv-field select:focus,
.zvv-adv-field input:focus { border-color: #7c3aed; }
[data-bs-theme=dark] .zvv-adv-field select,
[data-bs-theme=dark] .zvv-adv-field input { background: #16112e; color: #f3f4f6; border-color: rgba(124,58,237,.3); }
.zvv-adv-field-actions { justify-content: flex-end; }
.zvv-adv-reset {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700; color: #9ca3af; text-decoration: none;
    margin-top: auto; padding: 8px 0;
}
.zvv-adv-reset:hover { color: #dc2626; }

/* nearby button */
.zvv-nearby-btn {
    display: inline-flex; align-items: center; gap: 10px; width: 100%;
    margin-top: auto; padding: 9px 12px;
    border: 1.5px solid rgba(124,58,237,.22); border-radius: 12px;
    background: linear-gradient(180deg, #faf8ff 0%, #f4f0ff 100%);
    color: #4c1d95; font-size: 13px; font-weight: 700; text-align: left;
    cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
}
.zvv-nearby-btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px;
    background: rgba(124,58,237,.12); color: #7c3aed; font-size: 15px;
    transition: background .15s, color .15s;
}
.zvv-nearby-btn-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.zvv-nearby-btn-label { font-size: 12.5px; font-weight: 700; }
.zvv-nearby-btn-loc {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zvv-nearby-btn-check { margin-left: auto; color: #7c3aed; font-size: 16px; }
.zvv-nearby-btn:hover:not(:disabled) {
    border-color: rgba(124,58,237,.5); background: linear-gradient(180deg, #f4f0ff 0%, #ede6ff 100%);
    box-shadow: 0 4px 14px rgba(124,58,237,.14);
}
.zvv-nearby-btn:hover:not(:disabled) .zvv-nearby-btn-icon { background: #7c3aed; color: #fff; }
.zvv-nearby-btn:active:not(:disabled) { transform: translateY(1px); }
.zvv-nearby-btn.is-active {
    border-color: #7c3aed; background: #7c3aed; color: #fff;
    box-shadow: 0 4px 14px rgba(124,58,237,.28);
}
.zvv-nearby-btn.is-active .zvv-nearby-btn-icon { background: rgba(255,255,255,.22); color: #fff; }
.zvv-nearby-btn.is-active .zvv-nearby-btn-loc { color: rgba(255,255,255,.75); }
.zvv-nearby-btn:disabled { opacity: .55; cursor: not-allowed; }
.zvv-nearby-btn:disabled .zvv-nearby-btn-icon { background: rgba(156,163,175,.18); color: #9ca3af; }
[data-bs-theme=dark] .zvv-nearby-btn {
    border-color: rgba(124,58,237,.3); background: #1b1533; color: #e9d5ff;
}
[data-bs-theme=dark] .zvv-nearby-btn:hover:not(:disabled) {
    border-color: rgba(139,92,246,.6); background: #241a45;
}
[data-bs-theme=dark] .zvv-nearby-btn.is-active { background: #7c3aed; color: #fff; border-color: #7c3aed; }

/* results */
.zvv-adv-body { padding: 36px 0 64px; }
.zvv-adv-results-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 24px;
}
.zvv-adv-results-title { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 800; color: #0f0a2e; margin: 0; }
[data-bs-theme=dark] .zvv-adv-results-title { color: #f3f4f6; }
.zvv-adv-results-sub { font-size: 12.5px; font-weight: 600; color: #9ca3af; }
/* ── Search results: Google-style detailed list ── */
.zvv-gsr-list { display: flex; flex-direction: column; margin-bottom: 36px; }

.zvv-gsr-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(124,58,237,0.08);
}
.zvv-gsr-item:first-child { padding-top: 2px; }
.zvv-gsr-item:last-child { border-bottom: none; }

.zvv-gsr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }

.zvv-gsr-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12.5px;
    font-weight: 600;
    color: #065f46;
}
.zvv-gsr-favicon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    color: #fff; font-family: 'Sora', sans-serif; font-size: 10px; font-weight: 800;
}
.zvv-gsr-domain { color: var(--zvv-ink); font-weight: 700; }
.zvv-gsr-crumb {
    display: inline-flex; align-items: center; gap: 3px;
    color: #065f46; text-decoration: none;
}
.zvv-gsr-crumb i { font-size: 9px; opacity: .7; }
.zvv-gsr-crumb:hover { text-decoration: underline; }

.zvv-gsr-title {
    font-family: 'Sora', sans-serif;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    margin: 0;
}
.zvv-gsr-title a { color: #4c1d95; text-decoration: none; }
[data-bs-theme=dark] .zvv-gsr-title a { color: #c4b5fd; }
.zvv-gsr-title a:hover { text-decoration: underline; }

.zvv-gsr-snippet {
    font-size: 14px;
    line-height: 1.65;
    color: var(--zvv-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zvv-gsr-title mark, .zvv-gsr-snippet mark {
    background: none;
    color: inherit;
    font-weight: 800;
    padding: 0;
}

.zvv-gsr-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--zvv-muted);
}
.zvv-gsr-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.zvv-gsr-meta-item i { color: #7c3aed; }
a.zvv-gsr-meta-item { color: var(--zvv-muted); text-decoration: none; font-weight: 600; }
a.zvv-gsr-meta-item:hover { color: #7c3aed; }
.zvv-gsr-meta-share { display: inline-flex; margin-left: auto; }

.zvv-gsr-thumb {
    position: relative;
    display: block;
    width: 176px;
    height: 132px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #1a0f4a, #0f0a2e);
    box-shadow: 0 6px 20px rgba(124,58,237,0.12);
}
.zvv-gsr-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.3s;
}
.zvv-gsr-item:hover .zvv-gsr-thumb img { transform: scale(1.05); }
.zvv-gsr-thumb-initial {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: 'Sora', sans-serif; font-size: 2.25rem; font-weight: 800;
    color: rgba(255,255,255,0.2);
}

[data-bs-theme=dark] .zvv-gsr-item { border-bottom-color: rgba(189,147,249,0.1); }
[data-bs-theme=dark] .zvv-gsr-breadcrumb,
[data-bs-theme=dark] .zvv-gsr-crumb { color: #34d399; }

@media (max-width: 680px) {
    .zvv-gsr-item { flex-direction: column-reverse; gap: 12px; }
    .zvv-gsr-thumb { width: 100%; height: 180px; }
    .zvv-gsr-meta-share { margin-left: 0; }
}

/* pagination */
.zvv-adv-pagination { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.zvv-adv-pg {
    min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 10px; border-radius: 10px; border: 1.5px solid rgba(124,58,237,.15);
    font-size: 13px; font-weight: 700; color: #6b7280; text-decoration: none; transition: all .15s;
}
.zvv-adv-pg:hover { border-color: #7c3aed; color: #7c3aed; }
.zvv-adv-pg.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.zvv-adv-pg.disabled { opacity: .35; pointer-events: none; }
[data-bs-theme=dark] .zvv-adv-pg { color: #9ca3af; border-color: rgba(124,58,237,.3); }
.zvv-adv-pg-ellipsis {
    min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #6b7280;
}
[data-bs-theme=dark] .zvv-adv-pg-ellipsis { color: #9ca3af; }

/* ── Advanced search: Select2 themed dropdowns ── */
.zvv-adv-filters .select2-container--default .select2-selection--single {
    border: 1.5px solid rgba(124,58,237,.15); border-radius: 10px;
    height: 38px; background: #faf8ff;
}
.zvv-adv-filters .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 35px; font-size: 13.5px; color: #1f2937; padding-left: 12px;
}
.zvv-adv-filters .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.zvv-adv-filters .select2-container--default.select2-container--focus .select2-selection--single,
.zvv-adv-filters .select2-container--default.select2-container--open .select2-selection--single { border-color: #7c3aed; }
.zvv-adv-filters .select2-container--default .select2-selection__clear { color: #9ca3af; font-size: 16px; margin-right: 16px; }

.zvv-adv-s2-drop { border: 1.5px solid rgba(124,58,237,.25) !important; border-radius: 12px !important; overflow: hidden; }
.zvv-adv-s2-drop .select2-search--dropdown { padding: 8px; }
.zvv-adv-s2-drop .select2-search--dropdown .select2-search__field {
    border: 1.5px solid rgba(124,58,237,.2) !important; border-radius: 8px !important;
    padding: 6px 10px !important; font-size: 13px; outline: none;
}
.zvv-adv-s2-drop .select2-results__option { font-size: 13.5px; padding: 7px 12px; }
.zvv-adv-s2-drop .select2-results__option--highlighted[aria-selected] { background: #7c3aed !important; }
.zvv-adv-s2-drop .select2-results__option[aria-selected=true] { background: rgba(124,58,237,.12); color: #7c3aed; }

[data-bs-theme=dark] .zvv-adv-filters .select2-container--default .select2-selection--single {
    background: #16112e; border-color: rgba(124,58,237,.3);
}
[data-bs-theme=dark] .zvv-adv-filters .select2-container--default .select2-selection--single .select2-selection__rendered { color: #f3f4f6; }
[data-bs-theme=dark] .zvv-adv-s2-drop { background: #1e1f2e !important; border-color: rgba(124,58,237,.35) !important; }
[data-bs-theme=dark] .zvv-adv-s2-drop .select2-results__option { color: #d1d5db; }
[data-bs-theme=dark] .zvv-adv-s2-drop .select2-search--dropdown .select2-search__field {
    background: #16112e !important; color: #f3f4f6 !important; border-color: rgba(124,58,237,.35) !important;
}

/* ── Header search dropdown ── */
.zvv-header-search-drop {
    width: 320px; padding: 14px;
    border: 1.5px solid rgba(124,58,237,.18);
    border-radius: 16px;
    box-shadow: 0 12px 44px rgba(0,0,0,.16);
    margin-top: 10px !important;
}
[data-bs-theme=dark] .zvv-header-search-drop { background: #1e1f2e; border-color: rgba(124,58,237,.3); }
.zvv-header-search-form { margin: 0; }
.zvv-header-search-bar {
    display: flex; align-items: center; gap: 8px;
    border: 1.5px solid rgba(124,58,237,.2);
    border-radius: 12px; padding: 4px 4px 4px 12px;
    background: #faf8ff; transition: border-color .15s;
}
.zvv-header-search-bar:focus-within { border-color: #7c3aed; }
.zvv-header-search-bar > i { color: #a78bfa; font-size: 14px; flex-shrink: 0; }
[data-bs-theme=dark] .zvv-header-search-bar { background: #16112e; border-color: rgba(124,58,237,.35); }
.zvv-header-search-input {
    flex: 1; border: none; outline: none; background: transparent;
    padding: 7px 0; font-size: 13.5px; color: #1f2937; min-width: 0;
}
[data-bs-theme=dark] .zvv-header-search-input { color: #f3f4f6; }
.zvv-header-search-go {
    background: #7c3aed; color: #fff; border: none; border-radius: 9px;
    padding: 7px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer;
    transition: background .15s; flex-shrink: 0;
}
.zvv-header-search-go:hover { background: #6d28d9; }
.zvv-header-search-adv {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px; font-size: 12px; font-weight: 700;
    color: #7c3aed; text-decoration: none;
}
.zvv-header-search-adv:hover { text-decoration: underline; color: #6d28d9; }
[data-bs-theme=dark] .zvv-header-search-adv { color: #bd93f9; }

@media (max-width: 480px) {
    .zvv-header-search-drop { width: calc(100vw - 24px); }
}

/* ── Advanced search: author option avatars ── */
.zvv-s2-author { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; }
.zvv-s2-author-img,
.zvv-s2-author-letter {
    width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
    object-fit: cover;
}
.zvv-s2-author-letter {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff; font-size: 12px; font-weight: 800; line-height: 1;
}
.zvv-s2-author-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* highlighted row keeps the letter square readable */
.zvv-adv-s2-drop .select2-results__option--highlighted[aria-selected] .zvv-s2-author-letter {
    background: rgba(255,255,255,.25);
}
/* keep the closed control tidy */
.zvv-adv-filters .select2-selection__rendered .zvv-s2-author { line-height: normal; vertical-align: middle; }

/* ── Reader panel: reset button ── */
.zvv-reader-reset {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 10px; border-radius: 10px;
    background: transparent; border: 1.5px dashed rgba(124,58,237,.3);
    font-size: 12px; font-weight: 700; color: #9ca3af;
    cursor: pointer; transition: all .15s;
}
.zvv-reader-reset:hover { border-color: #7c3aed; color: #7c3aed; background: rgba(124,58,237,.06); }
.zvv-reader-reset.done { border-style: solid; border-color: #059669; color: #059669; background: rgba(5,150,105,.08); }
[data-bs-theme=dark] .zvv-reader-reset { border-color: rgba(189,147,249,.3); color: #9ca3af; }
[data-bs-theme=dark] .zvv-reader-reset:hover { color: #bd93f9; border-color: #bd93f9; }

/* ── Share buttons: official brand colors on hover (all variants) ── */
.post-share-actions a[aria-label="Share on X"]:hover {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}
[data-bs-theme=dark] .post-share-actions a[aria-label="Share on X"]:hover {
    background: #000000;
    border-color: #3f3f46;
    color: #ffffff;
}
.post-share-actions a[aria-label="Share on Facebook"]:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: #ffffff;
}
.post-share-actions a[aria-label="Share on WhatsApp"]:hover {
    background: #25d366;
    border-color: #25d366;
    color: #ffffff;
}
/* Generic share + copy-link buttons hover in site violet */
.post-share-actions .post-share-button:hover,
.post-share-actions .post-share-copy:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #ffffff;
}

/* ── Post form: predefined tag picker ── */
.zvv-tag-picker { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 0; max-height: 160px; overflow-y: auto; }
.zvv-tag-pick {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 13px; border-radius: 18px;
    border: 1.5px solid rgba(124,58,237,.2); background: transparent;
    font-size: 12.5px; font-weight: 600; color: #6b7280;
    cursor: pointer; transition: all .13s;
}
.zvv-tag-pick i { font-size: 11px; color: #a78bfa; }
.zvv-tag-pick:hover { border-color: #7c3aed; color: #7c3aed; }
.zvv-tag-pick.selected { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.zvv-tag-pick.selected i { color: rgba(255,255,255,.8); }
.zvv-tag-pick.shake { animation: zvvTagShake .35s ease; border-color: #ef4444; color: #ef4444; }
@keyframes zvvTagShake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}
[data-bs-theme=dark] .zvv-tag-pick { border-color: rgba(189,147,249,.25); color: #9ca3af; }
[data-bs-theme=dark] .zvv-tag-pick:hover { color: #bd93f9; border-color: #bd93f9; }
[data-bs-theme=dark] .zvv-tag-pick.selected { background: #7c3aed; color: #fff; }
.zvv-tag-filter { margin-bottom: 8px; font-size: 13px !important; }

/* ── Profile selects (Account type / Theme): proper dark mode ── */
[data-bs-theme="dark"] .zvv-profile-select {
    background-color: #1e1f2e;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bd93f9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    color: #f8f8f2;
    color-scheme: dark; /* makes the native options popup render dark */
}
[data-bs-theme="dark"] .zvv-profile-select option {
    background-color: #1e1f2e;
    color: #f8f8f2;
}
[data-bs-theme="dark"] .zvv-profile-select:focus {
    border-color: #bd93f9;
    box-shadow: 0 0 0 3px rgba(189,147,249,0.14);
}

/* ══════════════════════════════════════════════════════════════
   POST HERO ACTIONS — one unified pill row (Edit / Save / Share)
══════════════════════════════════════════════════════════════ */
.zvv-post-hero-actions { gap: 8px; }

/* share group sits inline with the other buttons */
.zvv-post-hero-actions .post-share-actions { margin-top: 0; gap: 8px; }

/* every control in the row: same height, same pill shape, same glass look */
.zvv-post-hero-actions .zvv-btn-ghost-light,
.zvv-post-hero-actions .zvv-save-btn,
.zvv-post-hero-actions .post-share-actions a,
.zvv-post-hero-actions .post-share-actions button {
    height: 40px;
    min-width: 40px;
    padding: 0 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    backdrop-filter: blur(6px);
    transition: background .18s, border-color .18s, color .18s, transform .18s;
}

/* icon-only circles (X / Facebook / WhatsApp / copy link) */
.zvv-post-hero-actions .post-share-actions a,
.zvv-post-hero-actions .post-share-actions .post-share-copy {
    padding: 0;
    width: 40px;
}
.zvv-post-hero-actions .post-share-actions .post-share-button { padding: 0 16px; width: auto; }

/* unified hover lift */
.zvv-post-hero-actions .zvv-btn-ghost-light:hover,
.zvv-post-hero-actions .zvv-save-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    transform: translateY(-1px);
}

/* saved state keeps its violet identity */
.zvv-post-hero-actions .zvv-save-btn.saved {
    background: rgba(124, 58, 237, 0.35);
    border-color: #a78bfa;
    color: #ddd6fe;
}
.zvv-post-hero-actions .zvv-save-btn.saved:hover { background: rgba(124, 58, 237, 0.5); }

.zvv-post-hero-actions .post-share-actions .post-share-button.is-shared {
    background: rgba(220, 38, 38, 0.22);
    border-color: rgba(248, 113, 113, 0.45);
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.18);
    color: #ffe4e6;
}

.zvv-post-hero-actions .post-share-actions .post-share-button.is-shared:hover,
.zvv-post-hero-actions .post-share-actions .post-share-button.is-shared.active {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
    color: #fff;
}

/* brand hovers still apply on the share icons (declared later = wins) */
.zvv-post-hero-actions .post-share-actions a[aria-label="Share on X"]:hover {
    background: #000; border-color: #000; color: #fff;
}
.zvv-post-hero-actions .post-share-actions a[aria-label="Share on Facebook"]:hover {
    background: #1877f2; border-color: #1877f2; color: #fff;
}
.zvv-post-hero-actions .post-share-actions a[aria-label="Share on WhatsApp"]:hover {
    background: #25d366; border-color: #25d366; color: #fff;
}
.zvv-post-hero-actions .post-share-actions .post-share-button:hover,
.zvv-post-hero-actions .post-share-actions .post-share-copy:hover {
    background: #7c3aed; border-color: #7c3aed; color: #fff;
}

@media (max-width: 576px) {
    .zvv-post-hero-actions .zvv-btn-ghost-light,
    .zvv-post-hero-actions .zvv-save-btn,
    .zvv-post-hero-actions .post-share-actions .post-share-button { padding: 0 13px; font-size: 12.5px; }
}

/* ══════════════════════════════════════════════════════════════
   ADMIN SIDEBAR — accordion groups with submenus
══════════════════════════════════════════════════════════════ */
.zvv-admin-nav-group { display: flex; flex-direction: column; }

.zvv-admin-nav-group-head {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    position: relative;
}
.zvv-admin-nav-group-head:focus-visible { outline: 2px solid rgba(167,139,250,.6); outline-offset: -2px; }

.zvv-admin-nav-chevron {
    margin-left: auto;
    font-size: 11px;
    opacity: .55;
    transition: transform .2s ease;
    flex-shrink: 0;
}
.zvv-admin-nav-group.open .zvv-admin-nav-chevron { transform: rotate(180deg); }

/* group holding the current page keeps a subtle highlight on its header */
.zvv-admin-nav-group.active-group > .zvv-admin-nav-group-head {
    color: #fff;
    background: rgba(255,255,255,0.05);
}

/* group badge (summed counts) hides while the group is open —
   the per-item badges take over */
.zvv-admin-group-badge { margin-left: auto; }
.zvv-admin-nav-group-head .zvv-admin-group-badge + .zvv-admin-nav-chevron { margin-left: 8px; }
.zvv-admin-nav-group.open .zvv-admin-group-badge { display: none; }

/* submenu — animated open/close via the grid 0fr trick */
.zvv-admin-nav-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s ease;
    margin-left: 17px;
    border-left: 1.5px solid rgba(255,255,255,0.09);
    padding-left: 7px;
}
.zvv-admin-nav-group.open .zvv-admin-nav-sub { grid-template-rows: 1fr; }
.zvv-admin-nav-group:not(.open) .zvv-admin-nav-sub { border-left-color: transparent; }
.zvv-admin-nav-sub-inner {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 2px;
}

.zvv-admin-nav-subitem {
    padding: 8px 11px;
    font-size: 13.5px;
    border-radius: 9px;
    position: relative;
}
.zvv-admin-nav-subitem .zvv-admin-nav-icon { font-size: 13px; opacity: .8; }
.zvv-admin-nav-subitem .zvv-admin-nav-badge {
    margin-left: auto;
    position: static;
    border-radius: 20px;
    padding: 0 7px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════
   USER DASHBOARD SIDEBAR — accordion groups
══════════════════════════════════════════════════════════════ */
.zvv-dash-group { display: flex; flex-direction: column; }

.zvv-dash-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 600;
    color: rgba(196, 181, 253, 0.65);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.zvv-dash-group-head i:first-child { font-size: 1rem; flex-shrink: 0; }
.zvv-dash-group-head:hover { color: #e2d9fa; background: rgba(167, 139, 250, 0.1); }
.zvv-dash-group-head:focus-visible { outline: 2px solid rgba(167,139,250,.6); outline-offset: -2px; }

.zvv-dash-group.active-group > .zvv-dash-group-head {
    color: #e2d9fa;
    background: rgba(167, 139, 250, 0.08);
}

.zvv-dash-group-chevron {
    margin-left: auto;
    font-size: 11px !important;
    opacity: .55;
    transition: transform .2s ease;
}
.zvv-dash-group.open .zvv-dash-group-chevron { transform: rotate(180deg); }

/* summed badge on collapsed group header */
.zvv-dash-group-badge { margin-left: auto; }
.zvv-dash-group-head .zvv-dash-group-badge + .zvv-dash-group-chevron { margin-left: 8px; }
.zvv-dash-group.open .zvv-dash-group-badge { display: none; }

/* submenu — animated with the grid 0fr trick */
.zvv-dash-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s ease;
    margin-left: 16px;
    border-left: 1.5px solid rgba(167, 139, 250, 0.15);
    padding-left: 6px;
}
.zvv-dash-group.open .zvv-dash-sub { grid-template-rows: 1fr; }
.zvv-dash-group:not(.open) .zvv-dash-sub { border-left-color: transparent; }
.zvv-dash-sub-inner {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 2px;
}
.zvv-dash-sub-inner a,
.zvv-dash-sub-inner button {
    padding: 8px 11px;
    font-size: 0.82rem;
    border-radius: 9px;
}
.zvv-dash-sub-inner i { font-size: 0.85rem !important; opacity: .85; }
.zvv-dash-sub-inner .zvv-dash-nav-badge { margin-left: auto; }

/* light-theme (default) tweaks are inherited; dark theme borders */
[data-bs-theme="dark"] .zvv-dash-group-head { color: #6272a4; }
[data-bs-theme="dark"] .zvv-dash-group-head:hover { background: rgba(189,147,249,0.08); color: #bd93f9; }
[data-bs-theme="dark"] .zvv-dash-group.active-group > .zvv-dash-group-head { color: #bd93f9; background: rgba(189,147,249,0.08); }
[data-bs-theme="dark"] .zvv-dash-sub { border-left-color: rgba(189,147,249,0.18); }
[data-bs-theme="dark"] .zvv-dash-group:not(.open) .zvv-dash-sub { border-left-color: transparent; }

/* chat: remove-chat button turns red on hover */
.zvv-chat-remove-btn:hover { background: #ef4444 !important; }

/* ── Post form: selected tags summary ── */
.zvv-tag-selected {
    display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; margin-bottom: 8px;
    background: rgba(124,58,237,.05);
    border: 1.5px solid rgba(124,58,237,.12);
    border-radius: 12px;
}
[data-bs-theme=dark] .zvv-tag-selected { background: rgba(124,58,237,.09); border-color: rgba(124,58,237,.22); }
.zvv-tag-selected-label {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: #9ca3af; white-space: nowrap; padding-top: 3px;
}
.zvv-tag-selected-label strong { color: #7c3aed; }
[data-bs-theme=dark] .zvv-tag-selected-label strong { color: #bd93f9; }
.zvv-tag-selected-list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.zvv-tag-selected-empty { font-size: 12px; color: #9ca3af; font-style: italic; padding-top: 3px; }

.zvv-tag-sel-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #7c3aed; color: #fff;
    font-size: 12px; font-weight: 700;
    border-radius: 16px; padding: 3px 6px 3px 12px;
}
.zvv-tag-sel-remove {
    background: rgba(255,255,255,.2); border: none; color: #fff;
    width: 17px; height: 17px; border-radius: 50%;
    font-size: 13px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s;
}
.zvv-tag-sel-remove:hover { background: rgba(255,255,255,.4); }

/* admin live preview: unknown tags flagged red */
.zvv-post-tag-invalid {
    background: #fee2e2 !important; color: #b91c1c !important;
    border: 1px dashed #fca5a5 !important; text-decoration: line-through;
}
.zvv-post-tag-invalid i { font-size: 10px; text-decoration: none; }

/* ── Ghost buttons: proper dark mode (Receive widget etc.) ── */
[data-bs-theme="dark"] .zvv-btn-ghost {
    color: #bd93f9;
    border-color: rgba(189, 147, 249, 0.4);
    background: rgba(189, 147, 249, 0.06);
}
[data-bs-theme="dark"] .zvv-btn-ghost:hover {
    color: #d6bcfa;
    border-color: #bd93f9;
    background: rgba(189, 147, 249, 0.14);
}
/* themed focus ring instead of the browser's white outline */
.zvv-btn-ghost:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35);
}
[data-bs-theme="dark"] .zvv-btn-ghost:focus-visible {
    box-shadow: 0 0 0 3px rgba(189, 147, 249, 0.35);
}

/* ── Transactions: awaiting-acceptance surfacing ── */
.zvv-tx-awaiting-strip {
    display: flex; align-items: center; gap: 14px;
    background: rgba(245, 158, 11, 0.08);
    border: 1.5px solid rgba(245, 158, 11, 0.3);
    border-radius: 14px;
    padding: 13px 18px;
    margin-bottom: 16px;
}
.zvv-tx-awaiting-strip > i { font-size: 20px; color: #d97706; flex-shrink: 0; }
.zvv-tx-awaiting-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.zvv-tx-awaiting-copy strong { font-size: 13.5px; color: #92400e; }
.zvv-tx-awaiting-copy span { font-size: 12px; color: #b45309; }
[data-bs-theme="dark"] .zvv-tx-awaiting-strip { background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.35); }
[data-bs-theme="dark"] .zvv-tx-awaiting-copy strong { color: #fbbf24; }
[data-bs-theme="dark"] .zvv-tx-awaiting-copy span { color: #d97706; }
.zvv-tx-awaiting-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700; color: #d97706; text-decoration: none;
    border: 1.5px solid rgba(245,158,11,.4); border-radius: 18px; padding: 6px 14px;
    white-space: nowrap; transition: all .15s;
}
.zvv-tx-awaiting-link:hover { background: #d97706; border-color: #d97706; color: #fff; }

.zvv-tx-tab-badge {
    background: #f59e0b; color: #fff;
    font-size: 10.5px; font-weight: 800;
    border-radius: 10px; padding: 1px 7px; line-height: 1.6;
    margin-left: 4px;
}

/* Notification center tabs use red badges regardless of count/type */
.zvv-notif-filter-tabs .zvv-tx-tab-badge { background: #ef4444; }
.zvv-metric-awaiting i, .zvv-metric-awaiting strong { color: #fbbf24 !important; }

/* ── Profile photo editor (reposition + zoom + free rotate) ── */
.zvv-photo-stage-shell {
    position: relative;
    width: 320px;
    padding-top: 20px;
}
.zvv-photo-rotate-handle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(124,58,237,.28);
    background: linear-gradient(180deg, rgba(124,58,237,.22), rgba(124,58,237,.1));
    color: #7c3aed;
    box-shadow: 0 10px 24px rgba(28,14,68,.14);
    cursor: grab;
    touch-action: none;
    z-index: 2;
}
.zvv-photo-rotate-handle:active { cursor: grabbing; }
.zvv-photo-rotate-handle i { font-size: 16px; line-height: 1; }
[data-bs-theme=dark] .zvv-photo-rotate-handle {
    border-color: rgba(189,147,249,.24);
    background: linear-gradient(180deg, rgba(189,147,249,.22), rgba(189,147,249,.08));
    color: #e9d5ff;
}
.zvv-photo-stage {
    position: relative;
    width: 320px; height: 320px;
    overflow: hidden;
    border-radius: 14px;
    background: #16112e;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.zvv-photo-stage.grabbing { cursor: grabbing; }
.zvv-photo-stage img {
    position: absolute; top: 0; left: 0;
    transform-origin: center center;
    max-width: none;
    pointer-events: none;
    will-change: transform;
}
/* circular guide showing the avatar crop */
.zvv-photo-stage-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 999px rgba(10, 6, 30, 0.55);
    pointer-events: none;
}
.zvv-photo-zoom-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; max-width: 320px; color: #9ca3af;
}
.zvv-photo-zoom-row input[type="range"] {
    flex: 1;
    accent-color: #7c3aed;
    cursor: pointer;
}
[data-bs-theme=dark] #zvvPhotoEditorModal .modal-content { background: #1e1f2e; color: #f3f4f6; }
[data-bs-theme=dark] #zvvPhotoEditorModal .modal-title { color: #f3f4f6; }

/* ── Photo editor: crop mode ── */
.zvv-photo-mode-toggle {
    display: flex; gap: 6px;
    background: rgba(124,58,237,.07);
    border-radius: 12px; padding: 4px;
}
.zvv-photo-mode-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: none; background: transparent;
    padding: 6px 18px; border-radius: 9px;
    font-size: 12.5px; font-weight: 700; color: #6b7280;
    cursor: pointer; transition: all .13s;
}
.zvv-photo-mode-btn.active { background: #7c3aed; color: #fff; }
.zvv-photo-mode-btn:not(.active):hover { color: #7c3aed; }
[data-bs-theme=dark] .zvv-photo-mode-btn { color: #9ca3af; }
[data-bs-theme=dark] .zvv-photo-mode-btn.active { color: #fff; }

.zvv-photo-crop-box {
    position: absolute;
    border: 2px solid #a78bfa;
    box-shadow: 0 0 0 999px rgba(10, 6, 30, 0.55);
    cursor: move;
    touch-action: none;
}
.zvv-photo-crop-box::after {
    /* rule-of-thirds grid */
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(to right, transparent calc(33% - 1px), rgba(255,255,255,.25) 33%, transparent calc(33% + 1px),
            transparent calc(66% - 1px), rgba(255,255,255,.25) 66%, transparent calc(66% + 1px)),
        linear-gradient(to bottom, transparent calc(33% - 1px), rgba(255,255,255,.25) 33%, transparent calc(33% + 1px),
            transparent calc(66% - 1px), rgba(255,255,255,.25) 66%, transparent calc(66% + 1px));
    pointer-events: none;
}
.zvv-crop-handle {
    position: absolute;
    width: 16px; height: 16px;
    background: #fff;
    border: 2.5px solid #7c3aed;
    border-radius: 50%;
    touch-action: none;
}
.zvv-crop-handle[data-corner="tl"] { top: -9px; left: -9px; cursor: nwse-resize; }
.zvv-crop-handle[data-corner="tr"] { top: -9px; right: -9px; cursor: nesw-resize; }
.zvv-crop-handle[data-corner="bl"] { bottom: -9px; left: -9px; cursor: nesw-resize; }
.zvv-crop-handle[data-corner="br"] { bottom: -9px; right: -9px; cursor: nwse-resize; }

/* ── Admin dashboard: Quick Notes widget ── */
.zvv-qn-layout {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.2fr);
    gap: 22px;
}
@media (max-width: 860px) { .zvv-qn-layout { grid-template-columns: 1fr; } }

.zvv-qn-form { display: flex; flex-direction: column; gap: 10px; }
.zvv-qn-textarea { resize: vertical; min-height: 110px; font-family: inherit; line-height: 1.5; }
.zvv-qn-actions { display: flex; gap: 8px; }

.zvv-qn-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.zvv-qn-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    background: #faf8ff;
    border: 1px solid rgba(124, 58, 237, 0.1);
    border-radius: 12px;
    transition: border-color .15s;
}
.zvv-qn-item:hover { border-color: rgba(124, 58, 237, 0.3); }
.zvv-qn-item.editing { border-color: #7c3aed; background: rgba(124, 58, 237, 0.06); }
.zvv-qn-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zvv-qn-item-title { font-size: 13.5px; color: #0f0a2e; }
.zvv-qn-item-body { font-size: 12.5px; color: #6b7280; line-height: 1.45; word-break: break-word; }
.zvv-qn-item-time { font-size: 11px; color: #9ca3af; margin-top: 3px; }
.zvv-qn-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.zvv-qn-item-btn {
    width: 28px; height: 28px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(124, 58, 237, 0.15); background: #fff;
    color: #7c3aed; font-size: 12.5px; cursor: pointer;
    text-decoration: none; transition: all .13s;
}
.zvv-qn-item-btn:hover { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.zvv-qn-item-del { color: #dc2626; border-color: rgba(220, 38, 38, 0.25); }
.zvv-qn-item-del:hover { background: #dc2626; border-color: #dc2626; }

.zvv-qn-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 36px 16px; color: #9ca3af; font-size: 13px; text-align: center;
}
.zvv-qn-empty i { font-size: 30px; color: #ddd6fe; }

/* zero-count badge: quiet gray so it informs without shouting */
.zvv-dash-nav-badge-zero {
    background: rgba(148, 163, 184, 0.25) !important;
    color: rgba(203, 213, 225, 0.8) !important;
    box-shadow: none !important;
}

/* Fix: an older rule makes .zvv-dash-nav-badge position:absolute (for the old
   sidebar links). Inside the accordion nav the badges must sit in normal flow
   at the right edge of their row, or they escape to the sidebar corner. */
.zvv-dash-nav .zvv-dash-nav-badge {
    position: static;
    top: auto;
    right: auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: auto;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 800;
    border-radius: 20px;
    line-height: 1;
    flex-shrink: 0;
}

/* ── Admin dashboard: activity + comments panels ── */
.zvv-adm-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
@media (max-width: 1000px) { .zvv-adm-duo { grid-template-columns: 1fr; } }

.zvv-adm-feed { display: flex; flex-direction: column; gap: 4px; max-height: 380px; overflow-y: auto; padding-right: 4px; }
.zvv-adm-feed-item {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 9px 10px; border-radius: 12px;
    transition: background .13s;
}
.zvv-adm-feed-item:hover { background: #faf8ff; }
.zvv-adm-feed-icon {
    width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; border: 1.5px solid;
}
.zvv-adm-feed-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff;
    font-size: 13px; font-weight: 800;
}
.zvv-adm-feed-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.zvv-adm-feed-desc { font-size: 13px; font-weight: 600; color: #0f0a2e; text-decoration: none; line-height: 1.4; word-break: break-word; }
a.zvv-adm-feed-desc:hover { color: #7c3aed; }
.zvv-adm-feed-desc a { color: #7c3aed; text-decoration: none; }
.zvv-adm-feed-desc a:hover { text-decoration: underline; }
.zvv-adm-feed-comment { font-size: 12px; color: #6b7280; line-height: 1.45; word-break: break-word; }
.zvv-adm-feed-main small { font-size: 11px; color: #9ca3af; margin-top: 2px; }

.zvv-adm-cstatus { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 9.5px; border-radius: 8px; padding: 1px 7px; }
.zvv-adm-cstatus-approved { background: #d1fae5; color: #065f46; }
.zvv-adm-cstatus-pending  { background: #fef3c7; color: #92400e; }
.zvv-adm-cstatus-spam,
.zvv-adm-cstatus-rejected { background: #fee2e2; color: #b91c1c; }

.zvv-adm-feed-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 34px 18px; color: #9ca3af; font-size: 13px; text-align: center;
}
.zvv-adm-feed-empty i { font-size: 28px; color: #ddd6fe; }

/* ══════════════════════════════════════════════════════════════
   ADVANCED FOOTER — popular/recent posts, explore, newsletter
══════════════════════════════════════════════════════════════ */
.zvv-footer-adv { padding: 48px 0 0; }

.zvv-ft-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 0.95fr;
    gap: 34px;
    padding-bottom: 34px;
}
@media (max-width: 1100px) { .zvv-ft-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .zvv-ft-grid { grid-template-columns: 1fr; } }

.zvv-ft-col { min-width: 0; }

.zvv-ft-heading {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Sora', sans-serif;
    font-size: 13px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .07em;
    color: #c4b5fd;
    margin: 0 0 14px;
}
.zvv-ft-heading i { color: #a78bfa; }

/* about column */
.zvv-ft-desc { font-size: 13px; color: rgba(196,181,253,.6); line-height: 1.6; margin: 14px 0 16px; }
.zvv-ft-stats { display: flex; gap: 20px; margin-bottom: 16px; }
.zvv-ft-stats > div { display: flex; flex-direction: column; }
.zvv-ft-stats strong { font-size: 19px; font-weight: 800; color: #e2d9fa; line-height: 1.2; }
.zvv-ft-stats span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgba(196,181,253,.5); }
.zvv-ft-social { display: flex; gap: 8px; }
.zvv-ft-social a {
    width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.2);
    color: #c4b5fd; font-size: 14px; text-decoration: none;
    transition: all .15s;
}
.zvv-ft-social a:hover { background: #7c3aed; border-color: #7c3aed; color: #fff; transform: translateY(-2px); }

/* post items with thumbnails */
.zvv-ft-post {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 7px 8px; margin: 0 -8px;
    border-radius: 11px; text-decoration: none;
    transition: background .14s;
}
.zvv-ft-post:hover { background: rgba(167,139,250,.08); }
.zvv-ft-post-thumb {
    width: 56px; height: 42px; border-radius: 9px; overflow: hidden; flex-shrink: 0;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    display: flex; align-items: center; justify-content: center;
}
.zvv-ft-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.zvv-ft-post-initial { color: #fff; font-weight: 800; font-size: 16px; }
.zvv-ft-post-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.zvv-ft-post-copy strong {
    font-size: 12.5px; font-weight: 700; color: #e2d9fa; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zvv-ft-post:hover .zvv-ft-post-copy strong { color: #fff; }
.zvv-ft-post-copy small { font-size: 10.5px; color: rgba(196,181,253,.5); }
.zvv-ft-empty { font-size: 12.5px; color: rgba(196,181,253,.45); }

/* explore */
.zvv-ft-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.zvv-ft-cats a {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600; color: #c4b5fd; text-decoration: none;
    background: rgba(167,139,250,.08); border: 1px solid rgba(167,139,250,.18);
    border-radius: 14px; padding: 3px 11px; transition: all .14s;
}
.zvv-ft-cats a span { opacity: .6; font-size: 10px; }
.zvv-ft-cats a:hover { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.zvv-ft-links { flex-direction: column; align-items: flex-start; gap: 7px !important; }

/* newsletter mini form */
.zvv-ft-nl {
    display: flex; gap: 6px;
    background: rgba(167,139,250,.08);
    border: 1.5px solid rgba(167,139,250,.2);
    border-radius: 12px; padding: 4px;
    transition: border-color .15s;
}
.zvv-ft-nl:focus-within { border-color: #a78bfa; }
.zvv-ft-nl input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    color: #e2d9fa; font-size: 12.5px; padding: 7px 10px;
}
.zvv-ft-nl input::placeholder { color: rgba(196,181,253,.4); }
.zvv-ft-nl button {
    width: 34px; height: 34px; border-radius: 9px; border: none;
    background: #7c3aed; color: #fff; font-size: 13px; cursor: pointer;
    flex-shrink: 0; transition: background .15s;
}
.zvv-ft-nl button:hover { background: #6d28d9; }
.zvv-ft-nl-msg { font-size: 11.5px; margin-top: 7px; min-height: 15px; }
.zvv-ft-nl-msg.ok  { color: #6ee7b7; }
.zvv-ft-nl-msg.err { color: #fca5a5; }

/* bottom bar */
.zvv-ft-bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    border-top: 1px solid rgba(167,139,250,.12);
    padding: 16px 0 18px;
    font-size: 12px; color: rgba(196,181,253,.5);
}
.zvv-ft-bottom-links { display: flex; gap: 16px; }
.zvv-ft-bottom-links a { color: rgba(196,181,253,.6); text-decoration: none; font-weight: 600; }
.zvv-ft-bottom-links a:hover { color: #fff; }
.zvv-ft-top {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.22);
    border-radius: 18px; padding: 5px 14px;
    color: #c4b5fd; font-size: 12px; font-weight: 700; cursor: pointer;
    transition: all .15s;
}
.zvv-ft-top:hover { background: #7c3aed; border-color: #7c3aed; color: #fff; }

/* ── New post: template picker ── */
.zvv-tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}
.zvv-tpl-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 14px 10px 12px;
    background: transparent;
    border: 1.5px solid rgba(124, 58, 237, 0.15);
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
}
.zvv-tpl-card i { font-size: 22px; color: #a78bfa; transition: color .15s; }
.zvv-tpl-card strong { font-size: 12.5px; color: var(--zvv-ink, #1f2937); }
.zvv-tpl-card span { font-size: 10.5px; color: #9ca3af; line-height: 1.3; }
.zvv-tpl-card:hover { border-color: #7c3aed; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,58,237,.12); }
.zvv-tpl-card.selected { border-color: #7c3aed; background: rgba(124, 58, 237, 0.07); }
.zvv-tpl-card.selected i { color: #7c3aed; }
[data-bs-theme=dark] .zvv-tpl-card { border-color: rgba(189,147,249,.2); }
[data-bs-theme=dark] .zvv-tpl-card strong { color: #f3f4f6; }
[data-bs-theme=dark] .zvv-tpl-card.selected { background: rgba(124,58,237,.15); border-color: #bd93f9; }

/* ── Template system: fill-in section fields ── */
.zvv-tpl-fields { display: flex; flex-direction: column; gap: 16px; margin-bottom: 8px; }
.zvv-tpl-section {
    border: 1.5px solid rgba(124, 58, 237, 0.13);
    border-radius: 14px;
    padding: 14px 16px;
    background: rgba(124, 58, 237, 0.025);
}
[data-bs-theme=dark] .zvv-tpl-section { border-color: rgba(189,147,249,.2); background: rgba(124,58,237,.06); }
.zvv-tpl-section-head { display: flex; flex-direction: column; gap: 1px; margin-bottom: 9px; }
.zvv-tpl-section-head strong { font-size: 13px; color: var(--zvv-ink, #1f2937); }
[data-bs-theme=dark] .zvv-tpl-section-head strong { color: #f3f4f6; }
.zvv-tpl-section-head span { font-size: 11.5px; color: #9ca3af; }
.zvv-tpl-section .note-editor { border-radius: 10px; }

.zvv-tpl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.zvv-tpl-fact { display: flex; flex-direction: column; gap: 4px; }
.zvv-tpl-fact label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; }
.zvv-tpl-fact input, .zvv-tpl-quote { font-size: 13.5px !important; }
.zvv-tpl-text { width: 100%; resize: vertical; min-height: 96px; line-height: 1.55; font-family: inherit; }

/* ── Template image slots & gallery (editor side) ── */
.zvv-tpl-section-img { padding: 10px 16px; }
.zvv-tpl-imgdrop {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    min-height: 64px;
    border: 1.5px dashed rgba(124, 58, 237, 0.3);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all .15s;
    background: rgba(124, 58, 237, 0.02);
}
.zvv-tpl-imgdrop:hover { border-color: #7c3aed; background: rgba(124,58,237,.06); }
.zvv-tpl-imgdrop.drag-over { border-color: #7c3aed; background: rgba(124,58,237,.12); border-style: solid; }
.zvv-tpl-imgdrop-idle { font-size: 12.5px; color: #9ca3af; display: inline-flex; align-items: center; gap: 7px; }
.zvv-tpl-imgdrop-idle i { font-size: 17px; color: #a78bfa; }
.zvv-tpl-imgdrop.has-images[data-mode="single"] .zvv-tpl-imgdrop-idle { display: none; }
.zvv-tpl-lib-btn {
    background: none; border: none; padding: 0; cursor: pointer;
    color: #7c3aed; font-weight: 700; font-size: 12.5px; text-decoration: underline;
}
.zvv-tpl-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.zvv-tpl-thumb {
    position: relative; width: 86px; height: 62px;
    border-radius: 9px; overflow: hidden;
    border: 1.5px solid rgba(124,58,237,.25);
}
.zvv-tpl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.zvv-tpl-thumb-x {
    position: absolute; top: 3px; right: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    border: none; background: rgba(15,10,46,.75); color: #fff;
    font-size: 12px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.zvv-tpl-thumb-x:hover { background: #dc2626; }
[data-bs-theme=dark] .zvv-tpl-imgdrop { border-color: rgba(189,147,249,.3); }

/* ── Published post: gallery grid ── */
.zvv-post-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin: 18px 0;
}
.zvv-post-gallery img {
    width: 100%; height: 160px; object-fit: cover;
    border-radius: 12px;
    cursor: zoom-in;
    transition: transform .18s, box-shadow .18s;
}
.zvv-post-gallery img:hover { transform: scale(1.02); box-shadow: 0 8px 26px rgba(0,0,0,.18); }

/* ── Published post: section images as symmetric centered thumbnails ── */
.zvv-post-body .zvv-tpl-img {
    text-align: center;
    margin: 22px auto;
}
.zvv-post-body .zvv-tpl-img img {
    display: inline-block;
    width: min(100%, 680px);
    height: 340px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 10, 46, 0.14);
}
@media (max-width: 640px) {
    .zvv-post-body .zvv-tpl-img img { height: 220px; }
}
[data-bs-theme=dark] .zvv-post-body .zvv-tpl-img img { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }

/* ── Post image lightbox ── */
.zvv-lightbox {
    position: fixed; inset: 0;
    z-index: 2000;
    background: rgba(8, 5, 22, 0.92);
    display: flex; align-items: center; justify-content: center;
    animation: zvvLbFade .18s ease;
}
@keyframes zvvLbFade { from { opacity: 0; } to { opacity: 1; } }
.zvv-lightbox img {
    max-width: 92vw; max-height: 88vh;
    border-radius: 12px;
    box-shadow: 0 20px 70px rgba(0,0,0,.6);
    cursor: zoom-out;
}
.zvv-lightbox-close {
    position: absolute; top: 16px; right: 20px;
    width: 42px; height: 42px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.12); color: #fff;
    font-size: 26px; line-height: 1; cursor: pointer;
    transition: background .15s;
}
.zvv-lightbox-close:hover { background: rgba(255,255,255,.28); }
.zvv-lightbox-prev, .zvv-lightbox-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.12); color: #fff;
    font-size: 20px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.zvv-lightbox-prev { left: 18px; }
.zvv-lightbox-next { right: 18px; }
.zvv-lightbox-prev:hover, .zvv-lightbox-next:hover { background: rgba(124,58,237,.6); }
.zvv-lightbox-count {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.75); font-size: 13px; font-weight: 700;
    background: rgba(255,255,255,.1); border-radius: 14px; padding: 4px 14px;
}
@media (max-width: 560px) {
    .zvv-lightbox-prev { left: 8px; } .zvv-lightbox-next { right: 8px; }
}

/* ── Post gallery slider (fancy) ── */
.zvv-post-gallery.zvv-gallery-slider {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.zvv-gs-stage {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(150deg, #0f0a2e 0%, #1a0f4a 60%, #2e1065 100%);
    box-shadow: 0 24px 60px rgba(15, 10, 46, 0.35), 0 0 0 1px rgba(167, 139, 250, 0.12);
}

.zvv-gs-track {
    display: flex;
    transition: transform .55s cubic-bezier(.65,0,.35,1);
}
.zvv-gs-slide { flex: 0 0 100%; overflow: hidden; }
.zvv-gallery-slider .zvv-gs-slide img {
    width: 100%; height: 460px; object-fit: cover;
    border-radius: 0; display: block;
    transform: none !important; box-shadow: none !important;
    animation: zvvGsKen 9s ease-in-out infinite alternate;
}
@keyframes zvvGsKen {
    from { transform: scale(1) !important; }
    to   { transform: scale(1.08) !important; }
}
@media (prefers-reduced-motion: reduce) {
    .zvv-gallery-slider .zvv-gs-slide img { animation: none; }
}
@media (max-width: 640px) { .zvv-gallery-slider .zvv-gs-slide img { height: 280px; } }

/* Instagram-story-style progress segments across the top */
.zvv-gs-progress {
    position: absolute; top: 14px; left: 14px; right: 14px;
    display: flex; gap: 5px; z-index: 3;
}
.zvv-gs-seg {
    flex: 1; height: 3px; border-radius: 3px;
    background: rgba(255,255,255,0.25);
    overflow: hidden;
}
.zvv-gs-seg i {
    display: block; width: 0%; height: 100%;
    background: #fff; border-radius: 3px;
}

/* Bottom gradient so the counter always reads clearly */
.zvv-gs-stage::after {
    content: '';
    position: absolute; inset: auto 0 0 0; height: 90px;
    background: linear-gradient(to top, rgba(8,5,22,0.65), transparent);
    pointer-events: none; z-index: 1;
}

.zvv-gs-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(20, 14, 48, 0.45);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #fff; font-size: 18px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .18s, transform .18s, border-color .18s;
    z-index: 3;
}
.zvv-gs-prev { left: 14px; }
.zvv-gs-next { right: 14px; }
.zvv-gs-btn:hover { background: #7c3aed; border-color: #7c3aed; transform: translateY(-50%) scale(1.08); }

.zvv-gs-counter {
    position: absolute; bottom: 14px; left: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(10, 6, 30, 0.5);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: #fff; font-size: 12.5px; font-weight: 700;
    border-radius: 999px; padding: 6px 13px;
}
.zvv-gs-counter i { color: #c4b5fd; font-size: 13px; }

/* Thumbnail filmstrip */
.zvv-gs-thumbs {
    display: flex; gap: 8px;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: thin;
}
.zvv-gs-thumbs::-webkit-scrollbar { height: 5px; }
.zvv-gs-thumbs::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.3); border-radius: 6px; }

.zvv-gs-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 84px; height: 60px;
    border-radius: 12px;
    padding: 0;
    border: none;
    overflow: hidden;
    cursor: pointer;
    background: rgba(124, 58, 237, 0.1);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.zvv-gs-thumb img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.zvv-gs-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(8, 5, 22, 0.5);
    transition: background .2s ease;
}
.zvv-gs-thumb:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); }
.zvv-gs-thumb:hover::after { background: rgba(8, 5, 22, 0.2); }
.zvv-gs-thumb.active {
    transform: translateY(-3px);
    box-shadow: 0 0 0 2px #7c3aed, 0 8px 20px rgba(124, 58, 237, 0.4);
}
.zvv-gs-thumb.active::after { background: rgba(8, 5, 22, 0); }
@media (max-width: 640px) { .zvv-gs-thumb { width: 62px; height: 46px; border-radius: 10px; } }

/* ══════════════════════ Stories feature ══════════════════════ */

@keyframes zvvRingSpin { to { transform: rotate(360deg); } }

/* ── Add Story box (dashboard) ── */
.zvv-story-box {
    display: flex; align-items: center; gap: 14px;
    width: 100%;
    margin: 18px 0 4px;
    padding: 16px 20px;
    background: var(--zvv-panel, #fff);
    border: 1.5px dashed rgba(124, 58, 237, 0.35);
    border-radius: 18px;
    cursor: pointer;
    text-align: left;
    transition: border-color .18s, transform .18s;
}
.zvv-story-box:hover { border-color: #7c3aed; transform: translateY(-1px); }
[data-bs-theme="dark"] .zvv-story-box { background: var(--zvv-panel, #1a1330); }

.zvv-story-avatar-ring {
    position: relative;
    width: 58px; height: 58px;
    border-radius: 50%;
    flex-shrink: 0;
}
.zvv-story-avatar-ring.active::before {
    content: '';
    position: absolute; inset: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #f59e0b, #db2777, #7c3aed, #4f46e5, #f59e0b);
    animation: zvvRingSpin 5s linear infinite;
}
.zvv-story-avatar-ring .zvv-story-avatar-img {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 3px solid var(--zvv-panel, #fff);
    background: linear-gradient(135deg,#7c3aed,#4f46e5);
    color: #fff; font-weight: 800; font-size: 20px;
    overflow: hidden;
}
.zvv-story-avatar-ring .zvv-story-avatar-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.zvv-story-plus {
    position: absolute; bottom: -2px; right: -2px; z-index: 2;
    width: 22px; height: 22px; border-radius: 50%;
    background: #7c3aed; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    border: 2.5px solid var(--zvv-panel, #fff);
}
.zvv-story-box-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zvv-story-box-copy strong { font-size: 15px; color: var(--zvv-ink, #1a1a2e); }
.zvv-story-box-copy small { font-size: 12.5px; color: #8b8a99; }
.zvv-story-box-icon { font-size: 20px; color: #a78bfa; flex-shrink: 0; }

/* ── Create Story modal ── */
.zvv-story-type-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.zvv-story-type-tab {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1.5px solid var(--zvv-line, #e9e6ff);
    background: transparent;
    color: var(--zvv-ink, #1a1a2e);
    font-size: 13.5px; font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.zvv-story-type-tab.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.zvv-story-type-tab:hover:not(.active) { border-color: #7c3aed; }
.zvv-story-media-panel { margin-bottom: 4px; }

/* ── Story ring on profile hero avatar ── */
.zvv-story-ring-btn { border: none; background: none; padding: 0; cursor: pointer; display: inline-flex; }
.zvv-story-ring { position: relative; display: inline-flex; padding: 6px; border-radius: 50%; }
.zvv-story-ring::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #f59e0b, #db2777, #7c3aed, #4f46e5, #f59e0b);
    animation: zvvRingSpin 5s linear infinite;
}
.zvv-story-ring .zvv-author-avatar { position: relative; z-index: 1; }

/* ── Full-screen story viewer ── */
.zvv-story-viewer {
    position: fixed; inset: 0; z-index: 3000;
    background: #000;
    display: flex; flex-direction: column;
    animation: zvvLbFade .18s ease;
}
.zvv-story-progress {
    position: absolute; top: 14px; left: 14px; right: 14px;
    display: flex; gap: 5px; z-index: 3;
}
.zvv-story-seg { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.25); overflow: hidden; }
.zvv-story-seg i { display: block; width: 0%; height: 100%; background: #fff; border-radius: 3px; }

.zvv-story-viewer-head {
    position: absolute; top: 30px; left: 14px; right: 14px;
    display: flex; align-items: center; justify-content: space-between;
    z-index: 3;
}
.zvv-story-viewer-user { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 14px; font-weight: 700; }
.zvv-story-viewer-avatar {
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#7c3aed,#4f46e5);
    font-size: 13px; font-weight: 800; color: #fff;
}
.zvv-story-viewer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.zvv-story-viewer-close {
    width: 38px; height: 38px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.12); color: #fff;
    font-size: 17px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.zvv-story-viewer-close:hover { background: rgba(255,255,255,.28); }
.zvv-story-viewer-actions { display: flex; align-items: center; gap: 8px; }

.zvv-story-stage { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.zvv-story-stage img, .zvv-story-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }

.zvv-story-nav-zone { position: absolute; top: 0; bottom: 0; width: 33%; border: none; background: transparent; cursor: pointer; z-index: 2; }
.zvv-story-nav-prev { left: 0; }
.zvv-story-nav-next { right: 0; width: 67%; }

.zvv-story-shared-banner {
    position: absolute; top: 78px; left: 20px; right: 20px; z-index: 3;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    max-width: 320px; margin: 0 auto;
    color: #fff; font-size: 12.5px; text-decoration: none;
    background: rgba(10,6,30,0.45);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-radius: 20px; padding: 7px 14px;
}
.zvv-story-shared-banner i { color: #a78bfa; }
.zvv-story-shared-banner strong { font-weight: 700; }
.zvv-story-shared-banner:hover { color: #fff; text-decoration: underline; }

.zvv-story-bottom {
    position: absolute; bottom: 22px; left: 20px; right: 20px; z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}

.zvv-story-caption {
    color: #fff; font-size: 15px; text-align: center;
    background: rgba(10,6,30,0.45);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-radius: 14px; padding: 12px 18px;
    max-width: 480px; margin: 0 auto;
}

.zvv-story-engage-bar { display: flex; align-items: center; gap: 10px; }
.zvv-story-engage-btn {
    display: inline-flex; align-items: center; gap: 7px;
    border: none; border-radius: 20px; cursor: pointer;
    background: rgba(255,255,255,.12); color: #fff;
    font-size: 13.5px; font-weight: 700; padding: 9px 16px;
    transition: background .15s;
}
.zvv-story-engage-btn:hover { background: rgba(255,255,255,.24); }
.zvv-story-engage-btn i { font-size: 16px; }
.zvv-story-engage-btn.liked { color: #ff4d6d; }
.zvv-story-engage-btn.liked i { color: #ff4d6d; }

.zvv-story-comments-panel {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    height: 56vh; max-height: 480px;
    background: #150f28;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,.5);
    display: flex; flex-direction: column;
    animation: zvvLbFade .16s ease;
}
.zvv-story-comments-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; color: #fff; font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    flex-shrink: 0;
}
.zvv-story-comments-list { flex: 1; overflow-y: auto; padding: 12px 18px; }
.zvv-story-comments-empty { color: rgba(255,255,255,.55); font-size: 13.5px; text-align: center; margin-top: 20px; }
.zvv-story-comment-item { display: flex; gap: 10px; margin-bottom: 16px; }
.zvv-story-comment-avatar {
    width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#7c3aed,#4f46e5);
    font-size: 12px; font-weight: 800; color: #fff;
}
.zvv-story-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.zvv-story-comment-body { min-width: 0; }
.zvv-story-comment-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.zvv-story-comment-meta strong { color: #fff; font-size: 13.5px; }
.zvv-story-comment-meta span { color: rgba(255,255,255,.45); font-size: 11.5px; }
.zvv-story-comment-body p { margin: 0; color: rgba(255,255,255,.85); font-size: 13.5px; word-break: break-word; }
.zvv-story-comment-form {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.1); flex-shrink: 0;
}
.zvv-story-comment-input {
    flex: 1; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
    color: #fff; border-radius: 20px; padding: 10px 16px; font-size: 13.5px; outline: none;
}
.zvv-story-comment-input::placeholder { color: rgba(255,255,255,.45); }
.zvv-story-comment-input:focus { border-color: #7c3aed; }
.zvv-story-comment-send {
    width: 38px; height: 38px; border-radius: 50%; border: none; flex-shrink: 0;
    background: #7c3aed; color: #fff; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s;
}
.zvv-story-comment-send:hover { background: #6d28d9; }
.zvv-story-comments-login { padding: 16px 18px; color: rgba(255,255,255,.65); font-size: 13.5px; text-align: center; }
.zvv-story-comments-login a { color: #a78bfa; font-weight: 700; }

.zvv-story-text-card {
    width: min(92vw, 480px); height: min(80vh, 640px);
    border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.zvv-story-text-card p {
    color: #fff; font-size: 28px; font-weight: 700;
    text-align: center; line-height: 1.4;
    font-family: 'Sora', sans-serif;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.zvv-story-unmute {
    position: absolute; bottom: 32px; right: 20px; z-index: 3;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(10,6,30,0.5);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: #fff; font-size: 16px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 560px) {
    .zvv-story-text-card p { font-size: 22px; }
}

/* ── Story slide: included posts ── */
.zvv-story-post-card-wrap {
    position: relative; z-index: 3;
    width: min(92vw, 480px); max-height: 80vh;
    overflow-y: auto;
    border-radius: 24px;
    padding: 28px 20px;
    display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.zvv-story-post-card-heading {
    margin: 0 0 4px;
    color: #fff; font-size: 15px; font-weight: 800;
    text-align: center;
    font-family: 'Sora', sans-serif;
}
.zvv-story-post-card {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.14);
    border-radius: 14px;
    padding: 10px;
    text-decoration: none;
    transition: background .15s;
}
.zvv-story-post-card:hover { background: rgba(255,255,255,0.24); }
.zvv-story-post-card img {
    width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
}
.zvv-story-post-card-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zvv-story-post-card-info strong {
    color: #fff; font-size: 14px; font-weight: 700; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zvv-story-post-card-info span {
    color: rgba(255,255,255,.75); font-size: 12px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Story composer (queue builder) ── */
.zvv-story-composer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.zvv-story-action-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1.5px solid rgba(124, 58, 237, 0.3);
    background: transparent;
    color: #7c3aed;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: all .18s;
}
.zvv-story-action-btn:hover { background: rgba(124, 58, 237, 0.08); border-color: #7c3aed; }

.zvv-story-composer-error {
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #dc2626;
    font-size: 13px; font-weight: 600;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

.zvv-story-queue-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center;
    padding: 36px 20px;
    border: 1.5px dashed rgba(124, 58, 237, 0.25);
    border-radius: 16px;
    color: #8b8a99;
}
.zvv-story-queue-empty i { font-size: 26px; color: #a78bfa; }
.zvv-story-queue-empty p { margin: 0; font-size: 13.5px; max-width: 320px; }

.zvv-story-dragover .zvv-story-queue-empty { border-color: #7c3aed; background: rgba(124, 58, 237, 0.06); }

.zvv-story-queue {
    display: flex; flex-wrap: wrap; gap: 14px;
    max-height: 46vh; overflow-y: auto;
    padding: 2px;
}
.zvv-story-queue-item {
    width: 128px;
    display: flex; flex-direction: column; gap: 6px;
}
.zvv-story-queue-thumb {
    position: relative;
    width: 128px; height: 128px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(124, 58, 237, 0.08);
    cursor: grab;
}
.zvv-story-queue-thumb img,
.zvv-story-queue-thumb video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.zvv-story-queue-thumb-text {
    display: flex; align-items: center; justify-content: center;
    padding: 8px;
}
.zvv-story-queue-text-input {
    width: 100%; height: 100%;
    background: transparent; border: none; resize: none;
    color: #fff; font-size: 12.5px; font-weight: 600;
    text-align: center;
    font-family: 'Sora', sans-serif;
    outline: none;
}
.zvv-story-queue-text-input::placeholder { color: rgba(255,255,255,0.75); }
.zvv-story-queue-video-badge {
    position: absolute; bottom: 6px; left: 6px;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(10,6,30,0.6); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
}
.zvv-story-queue-edit,
.zvv-story-queue-remove {
    position: absolute; top: 6px;
    width: 24px; height: 24px; border-radius: 50%;
    border: none; background: rgba(10,6,30,0.55); color: #fff;
    font-size: 11px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.zvv-story-queue-edit { left: 6px; }
.zvv-story-queue-remove { right: 6px; }
.zvv-story-queue-edit:hover { background: #7c3aed; }
.zvv-story-queue-remove:hover { background: #dc2626; }
.zvv-story-queue-drag {
    position: absolute; bottom: 6px; right: 6px;
    width: 22px; height: 22px; border-radius: 7px;
    background: rgba(10,6,30,0.5); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; cursor: grab;
}
.zvv-story-queue-caption {
    width: 100%;
    border: 1.5px solid var(--zvv-line, #e9e6ff);
    border-radius: 9px;
    padding: 6px 9px;
    font-size: 12px;
    background: var(--zvv-panel, #fff);
    color: var(--zvv-ink, #1a1a2e);
}
.zvv-story-queue-item.sortable-ghost { opacity: 0.35; }
.zvv-story-queue-item.sortable-chosen .zvv-story-queue-thumb { box-shadow: 0 0 0 2px #7c3aed; }

/* ── Story queue: included-posts thumbnail ── */
.zvv-story-queue-thumb-posts {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    padding: 10px;
    background: linear-gradient(135deg,#7c3aed,#4f46e5);
}
.zvv-story-queue-post-row {
    background: rgba(255,255,255,0.16);
    border-radius: 7px;
    padding: 5px 8px;
    color: #fff;
    font-size: 11px; font-weight: 700;
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Include Posts picker modal ── */
.zvv-story-post-pick-list {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 46vh; overflow-y: auto;
}
.zvv-story-post-pick-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border: 1.5px solid var(--zvv-line, #e9e6ff);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.zvv-story-post-pick-row:hover { border-color: #7c3aed; background: rgba(124, 58, 237, 0.06); }
.zvv-story-post-pick-row input[type="checkbox"] { flex-shrink: 0; width: 17px; height: 17px; accent-color: #7c3aed; }
.zvv-story-post-pick-row img {
    width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex-shrink: 0;
}
.zvv-story-post-pick-noimg {
    width: 44px; height: 44px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(124, 58, 237, 0.1); color: #7c3aed;
}
.zvv-story-post-pick-title {
    font-size: 13.5px; font-weight: 600;
    color: var(--zvv-ink, #1a1a2e);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Story image editor ── */
#createStoryModal.zvv-modal-under-editor {
    pointer-events: none;
}

#createStoryModal.zvv-modal-under-editor .modal-dialog {
    pointer-events: none;
}

#storyImageEditorModal {
    z-index: 1070;
}

/* Note: the stacked backdrop's real z-index is set inline via JS (see
   markStackedBackdrop() in dashboard.php) — #zvvMediaLibModal already carries
   its own much higher z-index (see "Modal positioning" above), and a plain
   class-based rule here can't reliably out-specificity that ID selector. */

.zvv-img-editor-stage {
    position: relative;
    margin: 0 auto 20px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    touch-action: none;
}
.zvv-img-editor-stage img {
    position: absolute; top: 50%; left: 50%;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
}
.zvv-img-editor-crop {
    position: absolute;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2000px rgba(0,0,0,0.5);
    cursor: move;
    touch-action: none;
}
.zvv-img-editor-handle {
    position: absolute;
    width: 14px; height: 14px;
    background: #fff;
    border: 2px solid #7c3aed;
    border-radius: 50%;
    touch-action: none;
}
.zvv-img-editor-handle[data-handle="nw"] { top: -8px; left: -8px; cursor: nwse-resize; }
.zvv-img-editor-handle[data-handle="ne"] { top: -8px; right: -8px; cursor: nesw-resize; }
.zvv-img-editor-handle[data-handle="sw"] { bottom: -8px; left: -8px; cursor: nesw-resize; }
.zvv-img-editor-handle[data-handle="se"] { bottom: -8px; right: -8px; cursor: nwse-resize; }

.zvv-img-editor-tools { display: flex; flex-direction: column; gap: 14px; }
.zvv-img-editor-rotate { display: flex; gap: 10px; justify-content: center; }
.zvv-img-editor-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.zvv-img-filter-swatch {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--zvv-line, #e9e6ff);
    background: transparent;
    color: var(--zvv-ink, #1a1a2e);
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
.zvv-img-filter-swatch.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.zvv-img-filter-swatch:hover:not(.active) { border-color: #7c3aed; }

/* ── Media Center page ── */
.zvv-media-upload {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 26px 20px;
    border: 2px dashed rgba(124, 58, 237, 0.3);
    border-radius: 16px;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
    background: rgba(124, 58, 237, 0.02);
}
.zvv-media-upload:hover, .zvv-media-upload.drag-over { border-color: #7c3aed; background: rgba(124,58,237,.07); }
.zvv-media-upload i { font-size: 30px; color: #a78bfa; }
.zvv-media-upload strong { font-size: 14px; color: var(--zvv-ink, #1f2937); }
.zvv-media-upload span { font-size: 12px; color: #9ca3af; }
[data-bs-theme=dark] .zvv-media-upload { border-color: rgba(189,147,249,.3); }
[data-bs-theme=dark] .zvv-media-upload strong { color: #f3f4f6; }
.zvv-media-upload-status { font-size: 12.5px; min-height: 18px; margin-top: 8px; }
.zvv-media-upload-status.ok { color: #059669; }
.zvv-media-upload-status.err { color: #dc2626; }

.zvv-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    margin-top: 20px;
}
.zvv-media-card {
    background: #fff;
    border: 1.5px solid rgba(124, 58, 237, 0.1);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .15s, opacity .25s;
}
.zvv-media-card:hover { box-shadow: 0 8px 26px rgba(124,58,237,.12); }
[data-bs-theme=dark] .zvv-media-card { background: rgba(30,27,75,.35); border-color: rgba(124,58,237,.22); }
.zvv-media-thumb { position: relative; height: 130px; background: #16112e; }
.zvv-media-thumb img, .zvv-media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.zvv-dash-body .zvv-media-card .zvv-media-thumb {
    align-items: center;
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(45deg, rgba(148,163,184,0.10) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148,163,184,0.10) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(148,163,184,0.10) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(148,163,184,0.10) 75%),
        #f8fafc;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    display: flex;
    height: auto;
    justify-content: center;
    padding: 8px;
}
.zvv-dash-body .zvv-media-card .zvv-media-thumb img {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(15,23,42,0.08);
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}
.zvv-dash-body .zvv-media-card .zvv-media-thumb video {
    border-radius: 8px;
    object-fit: contain;
}
.zvv-admin-body .zvv-media-item {
    background: #fff;
    border: 1px solid rgba(124,58,237,0.12);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    overflow: hidden;
}
.zvv-admin-body .zvv-media-item .zvv-media-thumb {
    align-items: center;
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(45deg, rgba(148,163,184,0.10) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148,163,184,0.10) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(148,163,184,0.10) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(148,163,184,0.10) 75%),
        #f8fafc;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    display: flex;
    height: auto;
    justify-content: center;
    padding: 8px;
}
.zvv-admin-body .zvv-media-item .zvv-media-thumb img {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(15,23,42,0.08);
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}
.zvv-admin-body .zvv-media-item .zvv-media-thumb-video {
    background: #1e1f2e;
}
.zvv-media-videobadge {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 30px; background: rgba(10,6,30,.35); pointer-events: none;
}
.zvv-media-meta { padding: 9px 11px 4px; display: flex; flex-direction: column; gap: 1px; }
.zvv-media-meta strong { font-size: 12px; color: var(--zvv-ink, #1f2937); }
[data-bs-theme=dark] .zvv-media-meta strong { color: #f3f4f6; }
.zvv-media-meta small { font-size: 10.5px; color: #9ca3af; }
.zvv-media-actions { display: flex; gap: 6px; padding: 8px 11px 11px; }
.zvv-media-btn {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid rgba(124, 58, 237, 0.18); background: transparent;
    color: #7c3aed; font-size: 13px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all .13s;
}
.zvv-media-btn:hover { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.zvv-media-btn-del { color: #dc2626; border-color: rgba(220,38,38,.3); margin-left: auto; }
.zvv-media-btn-del:hover { background: #dc2626; border-color: #dc2626; }

/* ══════════════════════════════════════════════════════════════
   SHARED DASHBOARD WIDGETS — stat cards, filter tabs, empty state
   (used by Friends, Media Center, and future dashboard pages)
══════════════════════════════════════════════════════════════ */
.zvv-fr-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.zvv-fr-stat {
    display: flex; align-items: center; gap: 14px;
    background: #fff;
    border: 1.5px solid rgba(124, 58, 237, 0.1);
    border-radius: 16px;
    padding: 16px 18px;
    transition: border-color .15s, box-shadow .15s;
}
.zvv-fr-stat:hover { border-color: rgba(124,58,237,.3); box-shadow: 0 6px 22px rgba(124,58,237,.08); }
[data-bs-theme=dark] .zvv-fr-stat { background: rgba(30,27,75,.35); border-color: rgba(124,58,237,.22); }
.zvv-fr-stat-icon {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    background: rgba(124, 58, 237, 0.1); color: #7c3aed;
}
[data-bs-theme=dark] .zvv-fr-stat-icon { background: rgba(189,147,249,.12); color: #bd93f9; }
.zvv-fr-stat-copy { display: flex; flex-direction: column; min-width: 0; }
.zvv-fr-stat-val { font-size: 22px; font-weight: 800; color: #7c3aed; line-height: 1.15; }
[data-bs-theme=dark] .zvv-fr-stat-val { color: #bd93f9; }
.zvv-fr-stat-lbl {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #9ca3af; margin-top: 2px; white-space: nowrap;
}

.zvv-fr-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.zvv-fr-tab {
    padding: 7px 18px; border-radius: 22px;
    border: 1.5px solid #e5e7eb; background: transparent;
    font-size: 13px; font-weight: 700; color: #6b7280; text-decoration: none;
    display: inline-flex; align-items: center; gap: 7px; transition: all .15s;
}
.zvv-fr-tab:hover { border-color: #7c3aed; color: #7c3aed; }
.zvv-fr-tab.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
[data-bs-theme=dark] .zvv-fr-tab { border-color: rgba(124,58,237,.3); color: #9ca3af; }
[data-bs-theme=dark] .zvv-fr-tab:hover { color: #bd93f9; }
[data-bs-theme=dark] .zvv-fr-tab.active { color: #fff; }

.zvv-fr-empty { text-align: center; padding: 60px 20px; color: #9ca3af; }
.zvv-fr-empty i { font-size: 44px; color: #ddd6fe; display: block; margin-bottom: 12px; }
.zvv-fr-empty strong { color: #4b5563; font-size: 16px; }
[data-bs-theme=dark] .zvv-fr-empty strong { color: #d1d5db; }
.zvv-fr-tab-badge {
    background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 800;
    border-radius: 10px; padding: 1px 7px; line-height: 1.5;
}
.zvv-fr-tab.active .zvv-fr-tab-badge { background: rgba(255,255,255,.25); }

/* ── Country links on posts (hero, cards, single, search) ── */
a.zvv-country-link {
    color: inherit;
    text-decoration: none;
    transition: color .13s;
}
a.zvv-country-link:hover { color: #7c3aed; text-decoration: underline; }
[data-bs-theme=dark] a.zvv-country-link:hover { color: #bd93f9; }

/* ── Template preview modal ── */
.zvv-tpl-card { position: relative; }
.zvv-tpl-preview-btn {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; color: #a78bfa;
    background: rgba(124, 58, 237, 0.08);
    opacity: 0; transition: all .13s; cursor: pointer;
}
.zvv-tpl-card:hover .zvv-tpl-preview-btn { opacity: 1; }
.zvv-tpl-preview-btn:hover { background: #7c3aed; color: #fff; }

.zvv-tplpv-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(8, 5, 22, 0.75);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: zvvLbFade .15s ease;
}
.zvv-tplpv-modal {
    width: min(560px, 100%);
    max-height: 86vh;
    background: #fff;
    border-radius: 18px;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.4);
}
[data-bs-theme=dark] .zvv-tplpv-modal { background: #1e1f2e; color: #f3f4f6; }
.zvv-tplpv-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(124,58,237,.12);
}
.zvv-tplpv-head strong { font-size: 14.5px; }
.zvv-tplpv-close {
    border: none; background: transparent; font-size: 22px; line-height: 1;
    color: #9ca3af; cursor: pointer;
}
.zvv-tplpv-close:hover { color: #7c3aed; }
.zvv-tplpv-body { padding: 18px 22px; overflow-y: auto; }

.zvv-tplpv-h { font-family: 'Sora', sans-serif; font-weight: 800; color: #7c3aed; margin: 16px 0 6px; }
.zvv-tplpv-h2 { font-size: 16px; }
.zvv-tplpv-h3 { font-size: 13.5px; margin-left: 10px; }
[data-bs-theme=dark] .zvv-tplpv-h { color: #bd93f9; }
.zvv-tplpv-text {
    display: flex; flex-direction: column; gap: 1px;
    border: 1.5px dashed rgba(124,58,237,.22);
    border-radius: 10px; padding: 9px 12px; margin-bottom: 8px;
}
.zvv-tplpv-text strong { font-size: 12.5px; }
.zvv-tplpv-text span { font-size: 11.5px; color: #9ca3af; }
.zvv-tplpv-img {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    border: 1.5px dashed rgba(124,58,237,.18); border-radius: 10px;
    padding: 8px; margin-bottom: 8px;
    font-size: 11px; color: #b0a8c9;
}
.zvv-tplpv-facts {
    border: 1.5px dashed rgba(124,58,237,.22); border-radius: 10px;
    padding: 9px 12px; margin: 8px 0; font-size: 12.5px;
}
.zvv-tplpv-facts ul { margin: 5px 0 0 18px; padding: 0; color: #9ca3af; font-size: 12px; }
.zvv-tplpv-quote {
    border-left: 3px solid #a78bfa;
    background: rgba(124,58,237,.06);
    border-radius: 0 10px 10px 0;
    padding: 8px 12px; margin: 8px 0;
    font-size: 12.5px;
}
.zvv-tplpv-quote em { color: #9ca3af; }
.zvv-tplpv-gallery {
    display: flex; gap: 6px; align-items: center;
    border: 1.5px dashed rgba(124,58,237,.18); border-radius: 10px; padding: 10px;
}
.zvv-tplpv-gallery span {
    width: 52px; height: 38px; border-radius: 7px;
    background: rgba(124,58,237,.12);
}
.zvv-tplpv-gallery i { margin-left: 6px; color: #b0a8c9; }
.zvv-tplpv-foot {
    padding: 13px 20px;
    border-top: 1px solid rgba(124,58,237,.12);
    display: flex; justify-content: flex-end;
}
.zvv-tplpv-use {
    display: inline-flex; align-items: center; gap: 7px;
    background: #7c3aed; color: #fff; border: none; border-radius: 12px;
    padding: 9px 20px; font-size: 13.5px; font-weight: 700; cursor: pointer;
    transition: background .15s;
}
.zvv-tplpv-use:hover { background: #6d28d9; }

/* ── Full post preview overlay ── */
.zvv-preview-full-btn {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid rgba(124, 58, 237, 0.3);
    background: rgba(124, 58, 237, 0.06);
    color: #7c3aed; font-size: 13.5px; font-weight: 700;
    cursor: pointer; transition: all .15s;
}
.zvv-preview-full-btn:hover { background: #7c3aed; border-color: #7c3aed; color: #fff; }
[data-bs-theme=dark] .zvv-preview-full-btn { color: #bd93f9; border-color: rgba(189,147,249,.35); }
[data-bs-theme=dark] .zvv-preview-full-btn:hover { background: #7c3aed; color: #fff; }

.zvv-postpv-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(8, 5, 22, 0.8);
    animation: zvvLbFade .15s ease;
}
.zvv-postpv-shell { height: 100%; overflow-y: auto; }
.zvv-postpv-banner {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff; font-size: 13px;
    padding: 11px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.zvv-postpv-banner .zvv-postpv-close {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.16); border: none; border-radius: 16px;
    color: #fff; font-size: 12.5px; font-weight: 700;
    padding: 6px 14px; cursor: pointer; transition: background .15s;
}
.zvv-postpv-banner .zvv-postpv-close:hover { background: rgba(255,255,255,.3); }

.zvv-postpv-page {
    max-width: 780px;
    margin: 28px auto 60px;
    background: var(--zvv-panel, #fff);
    border-radius: 20px;
    padding: 34px clamp(18px, 5vw, 48px) 42px;
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
[data-bs-theme=dark] .zvv-postpv-page { background: #16112e; }
.zvv-postpv-hero { margin: -10px 0 22px; border-radius: 14px; overflow: hidden; }
.zvv-postpv-hero img { width: 100%; max-height: 340px; object-fit: cover; display: block; }
.zvv-postpv-cat {
    display: inline-block; font-size: 11.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; color: #7c3aed;
    background: rgba(124,58,237,.1); border-radius: 14px; padding: 4px 13px;
    margin-bottom: 12px;
}
.zvv-postpv-title {
    font-family: 'Sora', sans-serif; font-weight: 800;
    font-size: clamp(24px, 4vw, 34px); line-height: 1.25;
    color: var(--zvv-ink, #0f0a2e); margin: 0 0 12px;
}
[data-bs-theme=dark] .zvv-postpv-title { color: #f8f8f2; }
.zvv-postpv-meta {
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: 12.5px; color: #9ca3af;
    padding-bottom: 18px; margin-bottom: 22px;
    border-bottom: 1px solid rgba(124,58,237,.12);
}
.zvv-postpv-body { font-size: 1.02rem; line-height: 1.75; }
.zvv-postpv-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 26px; }
.zvv-postpv-tag {
    font-size: 11.5px; font-weight: 600; color: #7c3aed;
    background: rgba(124,58,237,.08); border-radius: 14px; padding: 4px 12px;
}

/* ── Editors Pick: rich post options in the dropdowns ── */
.zvv-s2-post { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zvv-s2-post-thumb {
    width: 52px; height: 38px; border-radius: 8px; flex-shrink: 0;
    object-fit: cover;
}
.zvv-s2-post-noimg {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; font-size: 15px;
}
.zvv-s2-post-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zvv-s2-post-copy strong {
    font-size: 13px; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zvv-s2-post-copy small {
    font-size: 11px; color: #9ca3af; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zvv-s2-post-drop .select2-results__option--highlighted[aria-selected] .zvv-s2-post-copy small { color: rgba(255,255,255,.75); }
.zvv-s2-post-drop .select2-results__option { padding: 7px 12px; }

/* compact selection inside the closed select */
.zvv-s2-post-sel .zvv-s2-post-thumb { width: 26px; height: 20px; border-radius: 5px; }
.zvv-s2-post-sel { line-height: normal; }
.zvv-adv-filters .select2-selection__rendered .zvv-s2-post-sel,
.select2-selection__rendered .zvv-s2-post-sel { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; }

/* ══════════════════════════════════════════════════════════════
   REAL ESTATE HOME  (zvv-re-*)
   Landing page at index.php — search console hero, featured
   listings, and the latest journal entries.
   ══════════════════════════════════════════════════════════════ */

.zvv-re-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
    background:
        radial-gradient(circle at 12% 15%, rgba(124, 58, 237, 0.14), transparent 30rem),
        radial-gradient(circle at 88% 10%, rgba(219, 39, 119, 0.10), transparent 26rem),
        linear-gradient(180deg, var(--zvv-card-dark), #1b1c28);
    color: #f8f8f2;
}

/* Background footage. The hero's gradient stays behind it as the fallback that
   shows while the file loads, and whenever it cannot play. */
.zvv-re-hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Scrim — holds contrast for the headline and the search console on top of moving footage */
.zvv-re-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 42%, rgba(27, 28, 40, 0.35), rgba(27, 28, 40, 0.68) 70%),
        linear-gradient(180deg, rgba(40, 42, 54, 0.70), rgba(27, 28, 40, 0.58) 45%, rgba(27, 28, 40, 0.88));
    pointer-events: none;
}

/* Blueprint grid — the drawing every building starts as */
.zvv-re-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image:
        linear-gradient(rgba(139, 233, 253, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 233, 253, 0.07) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 78%);
    pointer-events: none;
}

.zvv-re-hero-inner {
    position: relative;
    z-index: 3;
    max-width: 1220px;   /* wide enough to keep the search row on one line */
    text-align: center;
}

.zvv-re-hero .zvv-eyebrow {
    justify-content: center;
    margin-inline: auto;
}

.zvv-re-hero-heading {
    margin: 1.25rem 0 0;
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: clamp(2.1rem, 5.2vw, 3.9rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.zvv-re-hero-sub {
    margin: 1.1rem auto 0;
    max-width: 40rem;
    color: rgba(248, 248, 242, 0.72);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.65;
}

.zvv-re-hero-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.4rem;
    margin-top: 1.6rem;
}

.zvv-re-hero-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(248, 248, 242, 0.72);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.zvv-re-hero-links a:hover {
    color: var(--drac-cyan);
    border-bottom-color: currentColor;
}

/* ── Sections ── */
.zvv-re-section {
    padding: clamp(2.75rem, 5vw, 4.25rem) 12px;
}

.zvv-re-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.zvv-re-section-head h2 {
    margin: 0;
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    letter-spacing: -0.02em;
    color: var(--zvv-ink);
}

.zvv-re-section-head p {
    margin: 0.35rem 0 0;
    color: var(--zvv-muted);
    font-size: 0.96rem;
}

.zvv-re-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--drac-purple);
    font-weight: 600;
    font-size: 0.94rem;
    text-decoration: none;
}

.zvv-re-section-link:hover {
    color: var(--drac-pink);
}

.zvv-re-section-link i {
    transition: transform 0.18s ease;
}

.zvv-re-section-link:hover i {
    transform: translateX(3px);
}

/* ── Listing cards ── */
.zvv-re-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 1.4rem;
}

.zvv-re-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--zvv-line);
    border-radius: 18px;
    background: var(--zvv-panel);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.zvv-re-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 22px 45px -28px rgba(40, 42, 54, 0.75);
}

.zvv-re-card-art {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--zvv-bg);
}

.zvv-re-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.zvv-re-card:hover .zvv-re-card-art img {
    transform: scale(1.04);
}

/* Bottom-left: the seed artwork carries its own wordmark along the top edge. */
.zvv-re-card-status {
    position: absolute;
    bottom: 0.85rem;
    left: 0.85rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--drac-purple);
    color: #fff;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.zvv-re-card-status.rent {
    background: var(--drac-cyan);
    color: #10121c;
}

.zvv-re-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.15rem 1.25rem 1.3rem;
}

.zvv-re-card-price {
    margin: 0;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    color: var(--zvv-ink);
}

.zvv-re-card-price small {
    color: var(--zvv-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.zvv-re-card-title {
    margin: 0.4rem 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

.zvv-re-card-title a {
    color: var(--zvv-ink);
    text-decoration: none;
}

.zvv-re-card-title a:hover {
    color: var(--drac-purple);
}

.zvv-re-card-place {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.45rem 0 0;
    color: var(--zvv-muted);
    font-size: 0.9rem;
}

.zvv-re-card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin: 1.05rem 0 0;
    padding: 0.85rem 0 0;
    border-top: 1px solid var(--zvv-line);
    list-style: none;
}

.zvv-re-card-specs li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--zvv-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.zvv-re-card-specs i {
    color: var(--drac-purple);
}

/* ── Journal strip ── */
.zvv-re-journal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.4rem;
}

.zvv-re-post {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--zvv-line);
    border-radius: 18px;
    background: var(--zvv-panel);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.zvv-re-post:hover {
    transform: translateY(-3px);
    border-color: rgba(219, 39, 119, 0.35);
}

.zvv-re-post-art {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(219, 39, 119, 0.12));
    color: var(--drac-purple);
    font-family: "Sora", sans-serif;
    font-size: 2rem;
    font-weight: 800;
    text-decoration: none;
}

.zvv-re-post-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zvv-re-post-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.15rem 1.25rem 1.25rem;
}

.zvv-re-post-cat {
    align-self: flex-start;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.12);
    color: var(--drac-purple);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}

.zvv-re-post-title {
    margin: 0.65rem 0 0;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
}

.zvv-re-post-title a {
    color: var(--zvv-ink);
    text-decoration: none;
}

.zvv-re-post-title a:hover {
    color: var(--drac-pink);
}

.zvv-re-post-excerpt {
    margin: 0.5rem 0 0;
    color: var(--zvv-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zvv-re-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--zvv-muted);
    font-size: 0.84rem;
}

.zvv-re-post-meta a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--zvv-muted);
    font-weight: 600;
    text-decoration: none;
}

.zvv-re-post-meta a:hover {
    color: var(--drac-purple);
}

.zvv-re-post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── Empty journal ── */
.zvv-re-empty {
    padding: 3rem 1.5rem;
    border: 1px dashed var(--zvv-line);
    border-radius: 18px;
    background: var(--zvv-panel);
    text-align: center;
}

.zvv-re-empty i {
    font-size: 1.9rem;
    color: var(--drac-purple);
}

.zvv-re-empty h3 {
    margin: 0.75rem 0 0.35rem;
    font-family: "Sora", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--zvv-ink);
}

.zvv-re-empty p {
    margin: 0 0 1.25rem;
    color: var(--zvv-muted);
}

@media (prefers-reduced-motion: reduce) {
    /* Fall back to the hero's static gradient rather than looping footage */
    .zvv-re-hero-video {
        display: none;
    }

    .zvv-re-card,
    .zvv-re-card-art img,
    .zvv-re-post,
    .zvv-ps-submit,
    .zvv-re-section-link i {
        transition: none;
    }

    .zvv-re-card:hover,
    .zvv-re-post:hover,
    .zvv-ps-submit:hover {
        transform: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   PROPERTY SEARCH CONSOLE  (zvv-ps-*)
   Shared by the home hero and the results page. On the hero it
   sits on video footage (.zvv-ps-on-dark); on the results page it
   sits on the normal page canvas.
   ══════════════════════════════════════════════════════════════ */

.zvv-ps-wrap {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    text-align: left;
}

.zvv-ps {
    padding: clamp(1.1rem, 2vw, 1.5rem);
    border: 1px solid var(--zvv-line);
    border-radius: 20px;
    background: var(--zvv-panel);
    box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.6);
}

/* On the hero the panel floats over footage, so it needs its own glass */
.zvv-ps-on-dark {
    border-color: rgba(139, 233, 253, 0.16);
    background: rgba(30, 31, 46, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #f8f8f2;
}

.zvv-ps-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.zvv-ps-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--zvv-ink);
}

.zvv-ps-sub {
    margin: 0.3rem 0 0;
    color: var(--zvv-muted);
    font-size: 0.88rem;
}

.zvv-ps-on-dark .zvv-ps-title {
    color: #f8f8f2;
}

.zvv-ps-on-dark .zvv-ps-sub {
    color: rgba(248, 248, 242, 0.62);
}

.zvv-ps-osm {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(124, 58, 237, 0.35);
    border-radius: 999px;
    color: var(--drac-purple);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* ── Rows and fields ── */
.zvv-ps-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem;
}

.zvv-ps-row-secondary {
    align-items: center;
    justify-content: space-between;
    margin-top: 1.1rem;
}

.zvv-ps-row-advanced {
    margin-top: 1rem;
}

.zvv-ps-field {
    flex: 1 1 11rem;
    min-width: 0;
}

.zvv-ps-field-deal,
.zvv-ps-field-view {
    flex: 0 0 auto;
}

.zvv-ps-field-city {
    position: relative;   /* anchors the suggestion list */
}

.zvv-ps-row-advanced .zvv-ps-field {
    flex: 1 1 12rem;
}

.zvv-ps-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--zvv-muted);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.zvv-ps-control {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 52px;
    padding: 0 0.85rem;
    border: 1px solid var(--zvv-line);
    border-radius: 12px;
    background: var(--zvv-bg);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.zvv-ps-on-dark .zvv-ps-control {
    border-color: rgba(139, 233, 253, 0.14);
    background: rgba(40, 42, 54, 0.7);
}

.zvv-ps-control:focus-within {
    border-color: var(--drac-purple);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
}

.zvv-ps-icon,
.zvv-ps-flag {
    flex: 0 0 auto;
    color: var(--drac-purple);
    font-size: 1rem;
    line-height: 1;
}

.zvv-ps-control input,
.zvv-ps-control select {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--zvv-ink);
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    outline: none;
    appearance: none;
    cursor: pointer;
    /* room for the badge and caret sitting on top */
    padding-right: 2.4rem;
    text-overflow: ellipsis;
}

.zvv-ps-control input {
    cursor: text;
    font-weight: 500;
}

.zvv-ps-on-dark .zvv-ps-control input,
.zvv-ps-on-dark .zvv-ps-control select {
    color: #f8f8f2;
}

.zvv-ps-control select option {
    color: var(--zvv-ink);
    background: var(--zvv-panel);
}

.zvv-ps-control input::placeholder {
    color: var(--zvv-muted);
    font-weight: 500;
}

/* Code badge inside a select — APT, 1M+, ALL */
.zvv-ps-badge {
    position: absolute;
    right: 2rem;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    background: rgba(124, 58, 237, 0.14);
    color: var(--drac-purple);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    pointer-events: none;
}

.zvv-ps-caret {
    position: absolute;
    right: 0.75rem;
    color: var(--zvv-muted);
    font-size: 0.75rem;
    pointer-events: none;
}

/* ── Segmented toggles (Buy/Rent, List/Map) ── */
.zvv-ps-toggle {
    display: flex;
    gap: 0.25rem;
    height: 52px;
    padding: 0.3rem;
    border: 1px solid var(--zvv-line);
    border-radius: 12px;
    background: var(--zvv-bg);
}

.zvv-ps-on-dark .zvv-ps-toggle {
    border-color: rgba(139, 233, 253, 0.14);
    background: rgba(40, 42, 54, 0.7);
}

.zvv-ps-toggle-opt {
    position: relative;
    display: flex;
    cursor: pointer;
}

.zvv-ps-toggle-opt input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.zvv-ps-toggle-opt span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 1.2rem;
    border-radius: 9px;
    color: var(--zvv-muted);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
}

.zvv-ps-toggle-opt:hover span {
    color: var(--zvv-ink);
}

.zvv-ps-on-dark .zvv-ps-toggle-opt:hover span {
    color: #f8f8f2;
}

.zvv-ps-toggle-opt input:checked + span {
    background: linear-gradient(135deg, var(--drac-purple), #6d4aff);
    color: #fff;
}

.zvv-ps-toggle-opt input:focus-visible + span {
    outline: 2px solid var(--drac-cyan);
    outline-offset: 2px;
}

/* ── Submit ── */
.zvv-ps-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    height: 52px;
    padding: 0 1.75rem;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--drac-purple), var(--drac-pink));
    color: #fff;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zvv-ps-submit:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -14px rgba(124, 58, 237, 0.8);
}

/* ── OSM city suggestions ── */
.zvv-ps-suggestions {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    max-height: 17rem;
    margin: 0;
    padding: 0.35rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--zvv-line);
    border-radius: 12px;
    background: var(--zvv-panel);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.5);
}

.zvv-ps-suggestion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--zvv-ink);
}

.zvv-ps-suggestion i {
    color: var(--drac-purple);
    font-size: 0.85rem;
}

.zvv-ps-suggestion:hover,
.zvv-ps-suggestion.active {
    background: rgba(124, 58, 237, 0.12);
}

.zvv-ps-suggestion-city {
    font-weight: 600;
}

.zvv-ps-suggestion-region {
    margin-left: auto;
    color: var(--zvv-muted);
    font-size: 0.78rem;
    text-align: right;
}

.zvv-ps-suggestion-empty {
    padding: 0.75rem 0.65rem;
    color: var(--zvv-muted);
    font-size: 0.88rem;
    text-align: center;
}

.zvv-ps-spinner {
    position: absolute;
    right: 0.85rem;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(124, 58, 237, 0.25);
    border-top-color: var(--drac-purple);
    border-radius: 50%;
    animation: zvv-ps-spin 0.7s linear infinite;
}

@keyframes zvv-ps-spin {
    to { transform: rotate(360deg); }
}

/* ── Saved searches ── */
.zvv-ps-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.zvv-ps-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--zvv-line);
    border-radius: 999px;
    background: var(--zvv-bg);
    color: var(--zvv-ink);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.zvv-ps-on-dark .zvv-ps-chip {
    border-color: rgba(139, 233, 253, 0.14);
    background: rgba(40, 42, 54, 0.7);
    color: rgba(248, 248, 242, 0.82);
}

.zvv-ps-chip:hover {
    border-color: var(--drac-purple);
    color: var(--drac-purple);
}

.zvv-ps-chip i {
    color: var(--zvv-muted);
}

.zvv-ps-chip:hover i {
    color: var(--drac-purple);
}

/* ── Advanced search ── */
.zvv-ps-advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--zvv-line);
    border-radius: 12px;
    background: var(--zvv-bg);
    color: var(--zvv-ink);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.zvv-ps-on-dark .zvv-ps-advanced-toggle {
    border-color: rgba(139, 233, 253, 0.14);
    background: rgba(40, 42, 54, 0.7);
    color: #f8f8f2;
}

.zvv-ps-advanced-toggle:hover {
    border-color: var(--drac-purple);
    color: var(--drac-purple);
}

.zvv-ps-advanced-caret {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.zvv-ps-advanced-toggle[aria-expanded="true"] .zvv-ps-advanced-caret {
    transform: rotate(180deg);
}

.zvv-ps-advanced[hidden] {
    display: none;
}

/* ══════════════════════════════════════════════════════════════
   PROPERTY RESULTS  (zvv-re-results-*, zvv-re-map)
   ══════════════════════════════════════════════════════════════ */

.zvv-re-results-head {
    margin: 2rem 0 1.5rem;
}

.zvv-re-results-title {
    margin: 0;
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--zvv-ink);
}

.zvv-re-results-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.zvv-re-results-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.12);
    color: var(--drac-purple);
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: none;
}

.zvv-re-results-chip:hover {
    background: rgba(124, 58, 237, 0.2);
    color: var(--drac-purple);
}

.zvv-re-results-chip i {
    font-size: 0.75rem;
    opacity: 0.75;
}

.zvv-re-results-clear {
    color: var(--zvv-muted);
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.zvv-re-results-clear:hover {
    color: var(--drac-pink);
}

.zvv-re-map {
    height: clamp(24rem, 60vh, 36rem);
    border: 1px solid var(--zvv-line);
    border-radius: 18px;
    overflow: hidden;
    background: var(--zvv-panel);
}

/* Mapbox popup and markers, in the site's vocabulary */
.zvv-re-map .mapboxgl-popup-content {
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: var(--zvv-panel);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}

.zvv-re-map .mapboxgl-popup-tip {
    border-top-color: var(--zvv-panel);
    border-bottom-color: var(--zvv-panel);
}

.zvv-map-popup-art {
    width: calc(100% + 1.8rem);
    height: 120px;
    margin: -0.75rem -0.9rem 0.6rem;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}

.zvv-map-price {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--zvv-ink);
}

.zvv-map-title {
    font-weight: 600;
    color: var(--zvv-ink);
}

.zvv-map-meta {
    color: var(--zvv-muted);
    font-size: 0.82rem;
}

/* Map marker: glyph pin over a price chip */
.zvv-map-pin {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Hover preview — the photo, without committing to a click */
.zvv-map-pin-card {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    z-index: 3;
    display: block;
    width: 190px;
    overflow: hidden;
    border: 1px solid var(--zvv-line);
    border-radius: 12px;
    background: var(--zvv-panel);
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.75);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    pointer-events: none;   /* the pin underneath stays the click target */
}

.zvv-map-pin:hover .zvv-map-pin-card,
.zvv-map-pin:focus-visible .zvv-map-pin-card {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* An open popup already shows the photo — don't stack the two */
.zvv-map-pin.active .zvv-map-pin-card {
    opacity: 0;
    visibility: hidden;
}

.zvv-map-pin-card img {
    display: block;
    width: 100%;
    height: 104px;
    object-fit: cover;
}

.zvv-map-pin-card-body {
    display: block;
    padding: 0.5rem 0.6rem 0.6rem;
    text-align: left;
}

.zvv-map-pin-card-price {
    display: block;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--zvv-ink);
}

.zvv-map-pin-card-title {
    display: block;
    margin-top: 0.1rem;
    color: var(--zvv-muted);
    font-size: 0.76rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zvv-map-pin-head {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    /* circle with a tail: a rounded square rotated 45deg reads as a map pin */
    border-radius: 50% 50% 50% 4px;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, var(--drac-purple), #6d4aff);
    box-shadow: 0 8px 20px -6px rgba(20, 12, 45, 0.85);
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.zvv-map-pin-head i {
    transform: rotate(45deg);   /* keep the glyph upright inside the rotated pin */
    color: #fff;
    font-size: 1rem;
    line-height: 1;
}

.zvv-map-pin-price {
    /* Out of flow, so the pin's tail stays the marker's anchor point */
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--zvv-line);
    border-radius: 999px;
    background: var(--zvv-panel);
    color: var(--zvv-ink);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.8);
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.zvv-map-pin:hover .zvv-map-pin-head,
.zvv-map-pin:focus-visible .zvv-map-pin-head,
.zvv-map-pin.active .zvv-map-pin-head {
    transform: rotate(-45deg) scale(1.12);
    background: linear-gradient(135deg, var(--drac-pink), var(--drac-purple));
    box-shadow: 0 12px 26px -6px rgba(219, 39, 119, 0.6);
}

.zvv-map-pin:hover .zvv-map-pin-price,
.zvv-map-pin.active .zvv-map-pin-price {
    border-color: transparent;
    background: linear-gradient(135deg, var(--drac-purple), #6d4aff);
    color: #fff;
}

.zvv-map-pin:focus-visible .zvv-map-pin-head {
    outline: 2px solid var(--drac-cyan);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .zvv-map-pin-head,
    .zvv-map-pin-price,
    .zvv-map-pin-card {
        transition: none;
    }
}

.zvv-re-placeholder-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0 0;
    padding: 0.85rem 1rem;
    border: 1px dashed var(--zvv-line);
    border-radius: 12px;
    color: var(--zvv-muted);
    font-size: 0.85rem;
}

.zvv-re-placeholder-note code {
    color: var(--drac-purple);
}

@media (max-width: 900px) {
    .zvv-ps-row-secondary {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 720px) {
    .zvv-ps-field,
    .zvv-ps-field-deal,
    .zvv-ps-field-view,
    .zvv-ps-row-advanced .zvv-ps-field {
        flex: 1 1 100%;
    }

    .zvv-ps-toggle,
    .zvv-ps-submit {
        width: 100%;
    }

    .zvv-ps-toggle-opt {
        flex: 1;
    }

    .zvv-ps-toggle-opt span {
        width: 100%;
        padding-inline: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zvv-ps-submit,
    .zvv-ps-advanced-caret,
    .zvv-ps-toggle-opt span {
        transition: none;
    }

    .zvv-ps-spinner {
        animation: none;
    }
}

/* Desktop: deal, country, city, type, price and Search share one line */
@media (min-width: 992px) {
    .zvv-ps-row-primary {
        flex-wrap: nowrap;
    }

    .zvv-ps-row-primary .zvv-ps-field {
        flex: 1 1 0;
    }

    .zvv-ps-row-primary .zvv-ps-field-city {
        flex: 1.3 1 0;
    }
}

/* ── Map controls: options panel + street view (zvv-map-*) ── */
.zvv-re-map {
    position: relative;   /* anchors the custom controls */
}

.zvv-map-controls {
    position: absolute;
    z-index: 5;
    top: 0.85rem;
    left: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.zvv-map-options-btn,
.zvv-map-streetview {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--zvv-line);
    border-radius: 10px;
    background: var(--zvv-panel);
    color: var(--zvv-ink);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.zvv-map-options-btn:hover,
.zvv-map-streetview:hover {
    border-color: var(--drac-purple);
    color: var(--drac-purple);
}

.zvv-map-options-btn i,
.zvv-map-streetview i {
    color: var(--drac-purple);
}

.zvv-map-options-panel {
    display: grid;
    gap: 0.9rem;
    width: 15rem;
    padding: 0.9rem;
    border: 1px solid var(--zvv-line);
    border-radius: 12px;
    background: var(--zvv-panel);
    box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.6);
}

.zvv-map-options-panel[hidden] {
    display: none;
}

.zvv-map-options-label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--zvv-muted);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.zvv-map-style-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}

.zvv-map-style {
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    background: var(--zvv-bg);
    color: var(--zvv-ink);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.zvv-map-style:hover {
    border-color: var(--drac-purple);
}

.zvv-map-style.active {
    border-color: transparent;
    background: linear-gradient(135deg, var(--drac-purple), #6d4aff);
    color: #fff;
}

.zvv-map-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--zvv-ink);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.zvv-map-switch input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--drac-purple);
    cursor: pointer;
}

.zvv-map-options-hint {
    margin: 0.4rem 0 0;
    color: var(--zvv-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

/* ── Street view pane (zvv-map-sv-*) ──
   The map box is a grid. Closed, it is a single row and the map has it all; open,
   it splits into panorama over map, and grows a little so neither half is cramped. */
.zvv-re-map {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    transition: height 0.25s ease;
}

.zvv-re-map.sv-open {
    height: clamp(32rem, 82vh, 46rem);
    grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr);
}

/* min-height:0 — grid items refuse to shrink below content height without it,
   which would push the map out of the box instead of splitting it. */
.zvv-map-canvas,
.zvv-map-sv {
    min-height: 0;
}

.zvv-map-sv {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--zvv-line);
    background: var(--zvv-bg);
}

.zvv-map-sv[hidden] {
    display: none;
}

.zvv-map-sv-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--zvv-line);
    background: var(--zvv-panel);
}

.zvv-map-sv-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--zvv-ink);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zvv-map-sv-out {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.35rem;
    color: var(--zvv-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

.zvv-map-sv-out:hover {
    color: var(--drac-purple);
}

.zvv-map-sv-close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    border: 1px solid var(--zvv-line);
    border-radius: 8px;
    background: var(--zvv-bg);
    color: var(--zvv-ink);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.zvv-map-sv-close:hover {
    border-color: var(--drac-pink);
    color: var(--drac-pink);
}

.zvv-map-sv-frame {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: 0;
}

.zvv-map-popup-sv {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--drac-purple);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.zvv-map-popup-sv:hover {
    color: var(--drac-pink);
    text-decoration: underline;
}

@media (max-width: 560px) {
    .zvv-map-options-panel {
        width: 12.5rem;
    }

    /* Two stacked halves of a phone-height box are too small to read, so the
       panorama takes the larger share and the map keeps a usable strip. */
    .zvv-re-map.sv-open {
        height: clamp(30rem, 86vh, 40rem);
        grid-template-rows: minmax(0, 1.6fr) minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .zvv-re-map {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   HOME PAGE SECTIONS
   Agencies, agents, services, sliders, promos, destinations,
   projects, review ring, investments, partners, join.
   ══════════════════════════════════════════════════════════════ */

/* ── Sliders (featured properties, journal) ── */
.zvv-slider-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.zvv-slider-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--zvv-line);
    border-radius: 10px;
    background: var(--zvv-panel);
    color: var(--zvv-ink);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.zvv-slider-btn:hover:not(:disabled) {
    border-color: var(--drac-purple);
    color: var(--drac-purple);
}

.zvv-slider-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.zvv-slider {
    display: grid;
    grid-auto-flow: column;
    /* A fixed track width is what makes the row overflow and scroll. A minmax()
       with a 0 floor lets the columns collapse so the whole set fits instead. */
    grid-auto-columns: min(19rem, 78vw);
    gap: 1.4rem;
    padding-bottom: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.zvv-slider::-webkit-scrollbar {
    display: none;
}

.zvv-slider:focus-visible {
    outline: 2px solid var(--drac-purple);
    outline-offset: 4px;
    border-radius: 18px;
}

.zvv-slide {
    scroll-snap-align: start;
}

/* ── Top 10 agencies ── */
.zvv-agency-list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: agency;
}

.zvv-agency {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--zvv-line);
    border-radius: 14px;
    background: var(--zvv-panel);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.zvv-agency:hover {
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateX(3px);
}

.zvv-agency-rank {
    flex: 0 0 auto;
    width: 2rem;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--zvv-muted);
    text-align: center;
}

/* The top three carry the brand colour; the rest stay quiet */
.zvv-agency:nth-child(-n+3) .zvv-agency-rank {
    color: var(--drac-purple);
}

.zvv-agency-mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(219, 39, 119, 0.14));
    color: var(--drac-purple);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: 0.92rem;
}

.zvv-agency-body {
    flex: 1 1 auto;
    min-width: 0;
}

.zvv-agency-name {
    display: block;
    color: var(--zvv-ink);
    font-size: 1rem;
    font-weight: 700;
}

.zvv-agency-place {
    display: block;
    margin-top: 0.15rem;
    color: var(--zvv-muted);
    font-size: 0.85rem;
}

.zvv-agency-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    color: var(--zvv-muted);
    font-size: 0.85rem;
}

.zvv-agency-stats strong {
    color: var(--zvv-ink);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
}

.zvv-agency-rating i {
    color: var(--drac-yellow);
}

.zvv-agency-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--zvv-line);
    border-radius: 999px;
    color: var(--zvv-ink);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.zvv-agency-cta:hover {
    border-color: var(--drac-purple);
    color: var(--drac-purple);
}

/* ── Featured agents ── */
.zvv-agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 1.2rem;
}

/* Six agents: two rows of three, rather than five and a lone straggler */
@media (min-width: 1000px) {
    .zvv-agent-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.zvv-agent {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1.2rem 1.2rem;
    border: 1px solid var(--zvv-line);
    border-radius: 18px;
    background: var(--zvv-panel);
    text-align: center;
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.zvv-agent:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.4);
}

.zvv-agent-photo {
    width: 84px;
    height: 84px;
    border: 3px solid rgba(124, 58, 237, 0.35);
    border-radius: 50%;
    object-fit: cover;
}

.zvv-agent-name {
    margin: 0.85rem 0 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--zvv-ink);
}

.zvv-agent-title {
    margin: 0.2rem 0 0;
    color: var(--drac-purple);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
}

.zvv-agent-agency {
    margin: 0.5rem 0 0;
    color: var(--zvv-muted);
    font-size: 0.82rem;
}

.zvv-agent-stats {
    display: flex;
    gap: 1rem;
    margin: 0.9rem 0 1rem;
    color: var(--zvv-muted);
    font-size: 0.82rem;
}

.zvv-agent-stats strong {
    color: var(--zvv-ink);
}

.zvv-agent-stats i {
    color: var(--drac-yellow);
}

.zvv-agent-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    justify-content: center;
    padding: 0.55rem 1rem;
    border: 1px solid var(--zvv-line);
    border-radius: 10px;
    color: var(--zvv-ink);
    font-weight: 600;
    font-size: 0.86rem;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.zvv-agent-cta:hover {
    border-color: var(--drac-purple);
    color: var(--drac-purple);
}

/* ── Services ── */
.zvv-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.2rem;
}

.zvv-service {
    padding: 1.5rem;
    border: 1px solid var(--zvv-line);
    border-radius: 18px;
    background: var(--zvv-panel);
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.zvv-service:hover {
    transform: translateY(-3px);
    border-color: rgba(124, 58, 237, 0.4);
}

.zvv-service-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(219, 39, 119, 0.14));
    color: var(--drac-purple);
    font-size: 1.2rem;
}

.zvv-service h3 {
    margin: 1rem 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--zvv-ink);
}

.zvv-service p {
    margin: 0;
    color: var(--zvv-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ── Promo blocks (list your property, affiliate) ── */
.zvv-promo {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    overflow: hidden;
    padding: clamp(1.75rem, 4vw, 3rem);
    border: 1px solid var(--zvv-line);
    border-radius: 22px;
    background:
        radial-gradient(circle at 12% 20%, rgba(124, 58, 237, 0.18), transparent 22rem),
        radial-gradient(circle at 90% 80%, rgba(219, 39, 119, 0.14), transparent 20rem),
        linear-gradient(135deg, var(--zvv-card-dark), #1b1c28);
    color: #f8f8f2;
}

.zvv-promo-tag {
    display: inline-flex;
    padding: 0.3rem 0.75rem;
    border: 1px solid rgba(139, 233, 253, 0.3);
    border-radius: 999px;
    color: var(--drac-cyan);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.zvv-promo-copy h2 {
    margin: 1rem 0 0;
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.45rem, 2.8vw, 2.1rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.zvv-promo-copy p {
    margin: 0.85rem 0 0;
    max-width: 34rem;
    color: rgba(248, 248, 242, 0.72);
    line-height: 1.65;
}

.zvv-promo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.zvv-promo-ghost {
    display: inline-flex;
    align-items: center;
    padding: 0 1.25rem;
    height: 52px;
    border: 1px solid rgba(248, 248, 242, 0.28);
    border-radius: 12px;
    color: #f8f8f2;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.zvv-promo-ghost:hover {
    border-color: var(--drac-cyan);
    color: var(--drac-cyan);
}

.zvv-promo-points {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zvv-promo-points li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(139, 233, 253, 0.16);
    border-radius: 12px;
    background: rgba(40, 42, 54, 0.6);
    font-size: 0.92rem;
    font-weight: 600;
}

.zvv-promo-points i {
    color: var(--drac-green);
}

.zvv-promo-figures {
    display: grid;
    gap: 0.75rem;
}

.zvv-promo-figures div {
    padding: 0.9rem 1rem;
    border: 1px solid rgba(139, 233, 253, 0.16);
    border-radius: 12px;
    background: rgba(40, 42, 54, 0.6);
}

.zvv-promo-figures strong {
    display: block;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--drac-cyan);
}

.zvv-promo-figures span {
    color: rgba(248, 248, 242, 0.62);
    font-size: 0.82rem;
}

/* ── Popular destinations ── */
.zvv-dest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 1.2rem;
}

.zvv-dest {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 18px;
    text-decoration: none;
}

.zvv-dest img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.zvv-dest:hover img {
    transform: scale(1.06);
}

.zvv-dest-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(27, 28, 40, 0.1), rgba(27, 28, 40, 0.9));
}

.zvv-dest-body {
    position: absolute;
    inset: auto 0 0 0;
    display: grid;
    gap: 0.15rem;
    padding: 1.1rem;
    color: #f8f8f2;
}

.zvv-dest-body strong {
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.zvv-dest-blurb {
    color: rgba(248, 248, 242, 0.75);
    font-size: 0.84rem;
}

.zvv-dest-count {
    margin-top: 0.35rem;
    color: var(--drac-cyan);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
}

/* ── Private projects ── */
.zvv-project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1.4rem;
}

.zvv-project {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--zvv-line);
    border-radius: 18px;
    background: var(--zvv-panel);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.zvv-project:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.4);
}

.zvv-project-art {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.zvv-project-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zvv-project-stage {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--drac-cyan);
    color: #10121c;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
}

.zvv-project-body {
    padding: 1.2rem 1.25rem 1.35rem;
}

.zvv-project-body h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--zvv-ink);
}

.zvv-project-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 1rem 0 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid var(--zvv-line);
}

.zvv-project-figures dt,
.zvv-invest-figures dt {
    color: var(--zvv-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.zvv-project-figures dd,
.zvv-invest-figures dd {
    margin: 0.2rem 0 0;
    color: var(--zvv-ink);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
}

.zvv-project-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.zvv-project-bar {
    flex: 1;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--zvv-bg);
}

.zvv-project-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--drac-purple), var(--drac-pink));
}

.zvv-project-progress-label {
    flex: 0 0 auto;
    color: var(--zvv-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

/* ── Customer reviews: faces orbiting the quote ── */
.zvv-reviews {
    position: relative;
    overflow: hidden;
    margin: clamp(2rem, 5vw, 3.5rem) 0;
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background:
        radial-gradient(circle at 50% 40%, rgba(124, 58, 237, 0.16), transparent 32rem),
        linear-gradient(180deg, var(--zvv-card-dark), #1b1c28);
    color: #f8f8f2;
}

.zvv-reviews-head h2 {
    color: #f8f8f2;
}

.zvv-reviews-head p {
    color: rgba(248, 248, 242, 0.62);
}

.zvv-ring {
    /* --r is the orbit radius the faces sit on. It must be an absolute length:
       a percentage in translate() would resolve against the face, not the ring. */
    --r: clamp(115px, 33vw, 15.4rem);
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 40rem);
    aspect-ratio: 1;
    margin: 1.5rem auto 0;
}

/* The orbit ring itself */
.zvv-ring::before {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(139, 233, 253, 0.16);
    border-radius: 50%;
}

/* --spin turns the whole orbit so the chosen face lands at the top. Faces cancel
   it out below, so the portraits ride around the circle without tipping over. */
.zvv-ring-orbit {
    position: absolute;
    inset: 0;
    transform: rotate(var(--spin, 0deg));
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.zvv-ring-face {
    /* Sit each face on the ring: swing out to the radius, then un-swing the face
       itself so the portrait and its name stay upright. */
    --angle: calc(360deg / var(--count) * var(--i));
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform:
        translate(-50%, -50%)
        rotate(var(--angle))
        translateY(calc(-1 * var(--r)))
        /* undo both the face's own angle and the orbit's spin */
        rotate(calc(-1 * var(--angle) - var(--spin, 0deg)));
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.zvv-ring-face img {
    display: block;
    width: clamp(64px, 11vw, 88px);
    height: clamp(64px, 11vw, 88px);
    border: 2px solid rgba(139, 233, 253, 0.35);
    border-radius: 50%;
    object-fit: cover;
    background: var(--zvv-card-dark);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.zvv-ring-face-name {
    display: block;
    margin-top: 0.4rem;
    color: rgba(248, 248, 242, 0.6);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    transition: color 0.18s ease;
}

.zvv-ring-face:hover img {
    transform: scale(1.06);
    border-color: var(--drac-cyan);
}

.zvv-ring-face.active img {
    border-color: var(--drac-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.28);
}

.zvv-ring-face.active .zvv-ring-face-name {
    color: var(--drac-purple);
}

.zvv-ring-face:focus-visible img {
    outline: 2px solid var(--drac-cyan);
    outline-offset: 3px;
}

.zvv-ring-core {
    display: grid;
    place-items: center;
    width: 54%;
    aspect-ratio: 1;
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid rgba(139, 233, 253, 0.18);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 30%, rgba(124, 58, 237, 0.22), transparent 70%),
        rgba(21, 22, 34, 0.92);
    text-align: center;
    transition: opacity 0.16s ease;
}

.zvv-ring-core.swapping {
    opacity: 0;
}

.zvv-ring-quote-mark {
    font-size: 1.6rem;
    color: var(--drac-purple);
}

.zvv-ring-quote {
    margin: 0.4rem 0 0;
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(0.98rem, 1.7vw, 1.3rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.zvv-ring-body {
    margin: 0.6rem 0 0;
    max-width: 22rem;
    color: rgba(248, 248, 242, 0.7);
    font-size: clamp(0.8rem, 1.2vw, 0.94rem);
    line-height: 1.55;
}

.zvv-ring-name {
    margin: 0.9rem 0 0;
    font-weight: 700;
}

.zvv-ring-role {
    margin: 0.1rem 0 0;
    color: rgba(248, 248, 242, 0.6);
    font-size: 0.85rem;
}

/* ── International investments ── */
.zvv-invest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.2rem;
}

.zvv-invest {
    padding: 1.4rem;
    border: 1px solid var(--zvv-line);
    border-radius: 18px;
    background: var(--zvv-panel);
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.zvv-invest:hover {
    transform: translateY(-3px);
    border-color: rgba(8, 145, 178, 0.45);
}

.zvv-invest-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(8, 145, 178, 0.14);
    color: var(--drac-cyan);
    font-size: 1.15rem;
}

.zvv-invest h3 {
    margin: 0.9rem 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--zvv-ink);
}

.zvv-invest-markets {
    margin: 0;
    color: var(--zvv-muted);
    font-size: 0.85rem;
}

.zvv-invest-figures {
    display: flex;
    gap: 1.25rem;
    margin: 1rem 0 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid var(--zvv-line);
}

/* ── Partners marquee ── */
.zvv-partners {
    padding: clamp(2rem, 4vw, 3rem) 0;
    border-top: 1px solid var(--zvv-line);
    border-bottom: 1px solid var(--zvv-line);
}

.zvv-partners-label {
    margin: 0 0 1.5rem;
    color: var(--zvv-muted);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
}

.zvv-marquee {
    overflow: hidden;
    /* Fade both ends so logos enter and leave instead of being cut off */
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.zvv-marquee-track {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    width: max-content;
    animation: zvv-marquee 38s linear infinite;
}

.zvv-marquee:hover .zvv-marquee-track {
    animation-play-state: paused;
}

/* Logos are inline SVG drawn with currentColor, so colour (not just opacity)
   carries the rest state and the hover. */
.zvv-marquee-item {
    display: flex;
    align-items: center;
    color: var(--zvv-muted);
    opacity: 0.75;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.zvv-marquee-item:hover {
    color: var(--drac-purple);
    opacity: 1;
}

.zvv-marquee-item svg,
.zvv-marquee-item img {
    display: block;
    height: 44px;
    width: auto;
}

@media (prefers-reduced-motion: reduce) {
    .zvv-marquee-item { transition: none; }
}

/* The track holds two copies of the list, so -50% lands on a seamless loop */
@keyframes zvv-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Join ZVV ── */
.zvv-join {
    padding: clamp(2rem, 5vw, 3.5rem);
    border: 1px solid var(--zvv-line);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.22), transparent 26rem),
        linear-gradient(135deg, var(--zvv-card-dark), #1b1c28);
    color: #f8f8f2;
    text-align: center;
}

.zvv-join .zvv-eyebrow {
    justify-content: center;
    margin-inline: auto;
}

.zvv-join h2 {
    margin: 1rem 0 0;
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.zvv-join p {
    margin: 0.85rem auto 0;
    max-width: 32rem;
    color: rgba(248, 248, 242, 0.72);
    line-height: 1.65;
}

.zvv-join .zvv-promo-actions {
    justify-content: center;
}

@media (max-width: 900px) {
    .zvv-promo {
        grid-template-columns: 1fr;
    }

    .zvv-agency {
        flex-wrap: wrap;
    }

    .zvv-agency-stats {
        width: 100%;
        padding-left: 3rem;
    }
}

@media (max-width: 620px) {
    .zvv-ring {
        --r: 36vw;
    }

    .zvv-ring-face img {
        width: 52px;
        height: 52px;
    }

    .zvv-ring-face-name {
        font-size: 0.7rem;
    }

    .zvv-ring-core {
        width: 62%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zvv-marquee-track {
        animation: none;
    }

    .zvv-ring-orbit,
    .zvv-ring-face {
        transition: none;   /* the ring still turns, it just does not sweep */
    }

    .zvv-agency,
    .zvv-agent,
    .zvv-service,
    .zvv-project,
    .zvv-invest,
    .zvv-dest img,
    .zvv-ring-face img,
    .zvv-ring-core {
        transition: none;
    }

    .zvv-agency:hover,
    .zvv-agent:hover,
    .zvv-service:hover,
    .zvv-project:hover,
    .zvv-invest:hover {
        transform: none;
    }
}

/* ── Dark theme: reclaim the new link-buttons ──
   A site-wide rule paints every anchor purple in dark mode:
     [data-bs-theme="dark"] a:not(.btn):not([class*="zvv-btn"]):not([class*="zvv-admin"])
   Its three :not() clauses outrank any plain class selector, so a solid-fill
   button ends up with purple text on a purple fill. !important is the honest fix
   here — the alternative is a specificity arms race against a sledgehammer. */
[data-bs-theme="dark"] a.zvv-ps-submit,
[data-bs-theme="dark"] a.zvv-ps-submit:hover {
    color: #fff !important;
}

[data-bs-theme="dark"] a.zvv-promo-ghost {
    color: #f8f8f2 !important;
}

[data-bs-theme="dark"] a.zvv-promo-ghost:hover {
    color: var(--drac-cyan) !important;
}

[data-bs-theme="dark"] a.zvv-agency-cta,
[data-bs-theme="dark"] a.zvv-agent-cta,
[data-bs-theme="dark"] a.zvv-ps-chip {
    color: var(--zvv-ink) !important;
}

[data-bs-theme="dark"] a.zvv-agency-cta:hover,
[data-bs-theme="dark"] a.zvv-agent-cta:hover,
[data-bs-theme="dark"] a.zvv-ps-chip:hover {
    color: var(--drac-purple) !important;
}

[data-bs-theme="dark"] a.zvv-dest,
[data-bs-theme="dark"] a.zvv-dest:hover {
    color: #f8f8f2 !important;
}

/* ── Image credits (CC BY / BY-SA attribution) ── */
.zvv-credits-section {
    padding: 0 12px 1.5rem;
}

.zvv-credits {
    padding: 0.75rem 1rem;
    border: 1px solid var(--zvv-line);
    border-radius: 12px;
    background: var(--zvv-panel);
    color: var(--zvv-muted);
    font-size: 0.82rem;
}

.zvv-credits summary {
    cursor: pointer;
    font-weight: 600;
}

.zvv-credits ul {
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.3rem;
}

.zvv-credits strong {
    color: var(--zvv-ink);
}

/* ══════════════════════════════════════════════════════════════
   PROPERTY DETAIL, ENTITY PAGES, SUBMISSION FORM
   ══════════════════════════════════════════════════════════════ */

.zvv-prop-crumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    color: var(--zvv-muted);
    font-size: 0.85rem;
}

.zvv-prop-crumbs a {
    color: var(--zvv-muted);
    text-decoration: none;
}

.zvv-prop-crumbs a:hover {
    color: var(--drac-purple);
}

.zvv-prop-crumbs i {
    font-size: 0.65rem;
}

.zvv-prop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: start;
    gap: 2rem;
}

.zvv-prop-art {
    position: relative;
    margin: 0 0 1.5rem;
    overflow: hidden;
    border-radius: 18px;
    aspect-ratio: 16 / 9;
}

.zvv-prop-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zvv-prop-art figcaption {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
}

.zvv-prop-title {
    margin: 0;
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--zvv-ink);
}

.zvv-prop-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 1.25rem 0 0;
    padding: 1rem 0;
    border-top: 1px solid var(--zvv-line);
    border-bottom: 1px solid var(--zvv-line);
    list-style: none;
}

.zvv-prop-facts li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--zvv-muted);
    font-size: 0.9rem;
}

.zvv-prop-facts strong {
    color: var(--zvv-ink);
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
}

.zvv-prop-facts i {
    color: var(--drac-purple);
}

.zvv-prop-block {
    margin-top: 2rem;
}

.zvv-prop-block h2 {
    margin: 0 0 0.75rem;
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--zvv-ink);
}

.zvv-prop-block p {
    color: var(--zvv-muted);
    line-height: 1.7;
}

.zvv-prop-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zvv-prop-amenities li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--zvv-line);
    border-radius: 999px;
    color: var(--zvv-ink);
    font-size: 0.85rem;
    font-weight: 600;
}

.zvv-prop-amenities i {
    color: var(--drac-green);
}

.zvv-prop-map {
    height: 22rem;
}

/* Sticky price rail */
.zvv-prop-rail {
    position: sticky;
    top: 6rem;
}

.zvv-prop-card {
    display: grid;
    gap: 0.75rem;
    padding: 1.4rem;
    border: 1px solid var(--zvv-line);
    border-radius: 18px;
    background: var(--zvv-panel);
}

.zvv-prop-price {
    margin: 0;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--zvv-ink);
}

.zvv-prop-price-sub {
    margin: -0.5rem 0 0.25rem;
    color: var(--zvv-muted);
    font-size: 0.85rem;
}

.zvv-prop-meta {
    display: grid;
    gap: 0.6rem;
    margin: 0.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--zvv-line);
}

.zvv-prop-meta div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.zvv-prop-meta dt {
    color: var(--zvv-muted);
    font-size: 0.84rem;
    font-weight: 500;
}

.zvv-prop-meta dd {
    margin: 0;
    color: var(--zvv-ink);
    font-size: 0.84rem;
    font-weight: 600;
}

/* Status banners (pending / rejected) */
.zvv-prop-status-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid;
    border-radius: 12px;
    font-size: 0.92rem;
}

.zvv-prop-status-banner.pending {
    border-color: rgba(202, 138, 4, 0.4);
    background: rgba(202, 138, 4, 0.1);
    color: var(--drac-yellow);
}

.zvv-prop-status-banner.rejected {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.1);
    color: var(--drac-red);
}

.zvv-prop-status-banner a {
    color: inherit;
    font-weight: 700;
}

/* Status badge on the owner's cards */
.zvv-prop-badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: #10121c;
}

.zvv-prop-badge.pending   { background: var(--drac-yellow); }
.zvv-prop-badge.published { background: var(--drac-green); }
.zvv-prop-badge.rejected  { background: var(--drac-red); color: #fff; }

.zvv-prop-noart {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--zvv-muted);
    font-size: 2rem;
}

.zvv-prop-note {
    margin: 0.5rem 0 0;
    color: var(--drac-red);
    font-size: 0.82rem;
}

/* Entity headers (agency, agent) */
.zvv-entity-head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--zvv-line);
}

.zvv-entity-head h1 {
    margin: 0;
    font-family: "Sora", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    color: var(--zvv-ink);
}

.zvv-entity-head > a {
    margin-left: auto;
}

.zvv-entity-mark {
    width: 68px;
    height: 68px;
    font-size: 1.3rem;
}

.zvv-entity-photo {
    width: 88px;
    height: 88px;
}

/* Submission form */
.zvv-prop-form {
    display: grid;
    gap: 0.5rem;
}

.zvv-prop-textarea {
    width: 100%;
    padding: 0.85rem;
    border: 1px solid var(--zvv-line);
    border-radius: 12px;
    background: var(--zvv-bg);
    color: var(--zvv-ink);
    font: inherit;
    resize: vertical;
}

.zvv-prop-textarea:focus {
    border-color: var(--drac-purple);
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
}

.zvv-prop-file {
    width: 100%;
    padding: 0.75rem;
    border: 1px dashed var(--zvv-line);
    border-radius: 12px;
    background: var(--zvv-bg);
    color: var(--zvv-ink);
}

.zvv-prop-amenity-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.zvv-prop-amenity-picker .zvv-ps-chip {
    cursor: pointer;
}

.zvv-prop-amenity-picker input {
    margin-right: 0.4rem;
    accent-color: var(--drac-purple);
}

.zvv-re-results-chip.active {
    background: linear-gradient(135deg, var(--drac-purple), #6d4aff);
    color: #fff;
}

/* Admin: property queue */
.zvv-admin-prop {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.zvv-admin-prop-thumb {
    width: 64px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
}

.zvv-admin-prop-thumb-empty {
    display: grid;
    place-items: center;
    background: rgba(124, 58, 237, 0.12);
    color: var(--drac-purple);
}

.zvv-admin-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
}

.zvv-admin-btn-ok    { border-color: rgba(22, 163, 74, 0.45); color: #16a34a; }
.zvv-admin-btn-warn  { border-color: rgba(202, 138, 4, 0.45); color: #ca8a04; }
.zvv-admin-btn-danger{ border-color: rgba(220, 38, 38, 0.45); color: #dc2626; }

@media (max-width: 900px) {
    .zvv-prop-grid {
        grid-template-columns: 1fr;
    }

    .zvv-prop-rail {
        position: static;
    }

    .zvv-entity-head {
        flex-wrap: wrap;
    }

    .zvv-entity-head > a {
        margin-left: 0;
    }
}

.zvv-map-popup-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.zvv-map-popup-open {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--drac-purple);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

.zvv-map-popup-open:hover {
    color: var(--drac-pink);
    text-decoration: underline;
}

/* ── Agency / agent names are links now ──
   The site-wide dark-mode rule repaints every anchor purple, so these state
   their colour again (see the note above the other overrides). */
.zvv-agency-name a,
.zvv-agent-name a {
    color: var(--zvv-ink);
    text-decoration: none;
}

.zvv-agency-name a:hover,
.zvv-agent-name a:hover {
    color: var(--drac-purple);
}

.zvv-agent-agency a {
    color: var(--zvv-muted);
    text-decoration: none;
}

.zvv-agent-agency a:hover {
    color: var(--drac-purple);
    text-decoration: underline;
}

/* The rank mark is a link — keep it looking like the tile it was */
a.zvv-agency-mark {
    text-decoration: none;
    transition: transform 0.15s ease;
}

a.zvv-agency-mark:hover {
    transform: scale(1.05);
    color: var(--drac-purple);
}

[data-bs-theme="dark"] .zvv-agency-name a,
[data-bs-theme="dark"] .zvv-agent-name a,
[data-bs-theme="dark"] a.zvv-agency-mark {
    color: var(--zvv-ink) !important;
}

[data-bs-theme="dark"] .zvv-agency-name a:hover,
[data-bs-theme="dark"] .zvv-agent-name a:hover,
[data-bs-theme="dark"] a.zvv-agency-mark:hover {
    color: var(--drac-purple) !important;
}

[data-bs-theme="dark"] .zvv-agent-agency a {
    color: var(--zvv-muted) !important;
}

[data-bs-theme="dark"] .zvv-agent-agency a:hover {
    color: var(--drac-purple) !important;
}

@media (prefers-reduced-motion: reduce) {
    a.zvv-agency-mark { transition: none; }
    a.zvv-agency-mark:hover { transform: none; }
}