:root {
    --color-primary: #2046A6;
    --color-primary-light: #73BFF2;
    --color-accent: #F16161;
    --color-success: #57B977;
    --color-background: #F4F4F4;
    --color-surface: #ffffff;
    --color-border: #e0e0e0;
    --color-text: #212121;
    --color-muted: #666666;
    --font-family: 'Inter', 'Segoe UI', sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    --line-height-base: 1.6;
}

html {
  font-size: 14px;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-logo {
    width: 180px;
    height: auto;
}

.navbar, footer {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

.navbar-brand {
    color: var(--color-primary) !important;
}

a.nav-link:hover {
    color: var(--color-accent) !important;
}

.custom-brand-color {
    color: var(--color-primary);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.text-primary-emphasis {
    color: var(--color-primary);
}

.btn-gradient {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: white;
    border: none;
}

    .btn-gradient:hover {
        opacity: 0.95;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

input.form-control::placeholder {
    color: var(--color-muted);
    opacity: 0.8;
}

.vote-now-cta {
    background: linear-gradient(135deg, #00C9A7, #007CF0);
    color: white;
    padding: 0.8rem 1.4rem;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    border: none;
    transition: all 0.25s ease-in-out;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

    .vote-now-cta:hover,
    .vote-now-cta:focus {
        transform: scale(1.06);
        box-shadow: 0 0 0 4px rgba(0, 201, 167, 0.3);
    }

.results-cta {
    background: linear-gradient(135deg, var(--color-success), var(--color-primary));
    color: white;
    border: none;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
    padding: 0.75rem 1.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .results-cta:hover,
    .results-cta:focus {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

.loading-dots .dot {
    animation: jump 1s infinite;
    font-size: 1.25rem;
    line-height: 1;
    display: inline-block;
}

    .loading-dots .dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .loading-dots .dot:nth-child(3) {
        animation-delay: 0.4s;
    }

@keyframes jump {
    0%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-0.4em);
    }
}

/* Testing poll card */

.poll-card {
    background: var(--color-surface);
    transition: transform .18s ease, box-shadow .18s ease;
}

    .poll-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 36px rgba(0,0,0,.08);
    }

/* Tag look */
.tag-badge {
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

/* Clamp description to 3 lines */
.clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CTA */
.vote-now-cta {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #fff;
    letter-spacing: .3px;
    min-width: 180px;
    max-width: 220px;
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    border: 0;
}

    .vote-now-cta:hover {
        filter: brightness(1.05);
    }

/* Share buttons */
.share-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    border: 0;
}

    .share-btn:hover {
        transform: translateY(-2px) scale(1.05);
        filter: brightness(1.05);
    }

.copy-tooltip {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(128, 128, 128, 0.15); /* soft grey with transparency */
    backdrop-filter: blur(6px); /* smooth blur effect */
    color: #000;
    padding: 6px 16px;
    border-radius: 24px;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    z-index: 1000;
}

    .copy-tooltip.show {
        opacity: 1;
        transform: translateX(-50%) translateY(-6px);
    }

/* Lift + polish */
.candidate-card {
    transition: transform .18s ease, box-shadow .18s ease;
}

    .candidate-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0,0,0,.08);
    }


/* Clamp description to 3 lines */
.clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Party chip (soft frosted) */
.party-chip {
    top: .75rem;
    left: .75rem;
    background: rgba(128,128,128,.12);
    backdrop-filter: blur(6px);
    color: #000;
    font-weight: 600;
    border: 1px solid rgba(0,0,0,.06);
}

/* Voted ribbon */
.vote-ribbon {
    --r: 10px;
    position: relative;
    padding: 0;
    margin: 0;
}

    .vote-ribbon span {
        display: inline-block;
        background: linear-gradient(135deg,#22c55e,#16a34a);
        color: #fff;
        font-weight: 700;
        padding: .35rem .6rem;
        border-bottom-left-radius: .6rem
    }

/* Percent badge (glass + accent border) */
.percent-badge {
    background: rgba(0,0,0,.75) !important;
    color: #fff !important;
    border: 0
}

/* CTA */
.vote-now-cta {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #fff;
    letter-spacing: .2px;
    padding: .6rem 1rem;
    border: 0;
}

    .vote-now-cta:hover {
        filter: brightness(1.05);
    }

/* Subtle success alert (Bootstrap 5 friendly palette) */
.alert-success-subtle {
    background: #e9f7ef;
    border: 1px solid #d4efdf;
}

/* Premium CTA button */
.cta-vote {
    --btn-bg: linear-gradient(90deg,var(--color-primary),var(--color-accent));
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .8rem 1.1rem;
    border-radius: 999px;
    color: #fff;
    border: none;
    font-weight: 800;
    letter-spacing: .2px;
}

.cta-vote--premium {
    background: var(--btn-bg);
    box-shadow: 0 8px 18px rgba(32,70,166,.18);
}

.cta-vote:disabled {
    opacity: .7
}

.cta-icon {
    font-size: 1.1rem
}

.cta-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    display: none
}

.vote-form.is-loading .cta-label {
    opacity: .7
}

.vote-form.is-loading .cta-spinner {
    display: inline-block
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.welcome-box {
    background: linear-gradient(135deg, rgba(32,70,166,0.08), rgba(32,70,166,0.18));
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--color-text);
    font-family: var(--font-family);
}

    .welcome-box .lead {
        color: var(--color-muted);
        max-width: 600px;
        margin: 0 auto;
    }

.text-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glass + surfaces */
.v-card-glass {
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.v-card-surface {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    padding: 1rem 1rem 0.5rem;
}

/* Buttons */
.v-btn-gradient {
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: .6rem 1rem;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

    .v-btn-gradient:hover {
        filter: brightness(1.02);
    }

.v-btn-accent {
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: .6rem 1rem;
    background: var(--color-accent);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

    .v-btn-accent:hover {
        filter: brightness(1.02);
    }

.v-btn-ghost-primary {
    background: rgba(32,70,166,.06);
    color: var(--color-primary);
    border: 1px solid rgba(32,70,166,.18)
}

.v-btn-ghost-secondary {
    background: rgba(0,0,0,.06);
    color: var(--color-text);
    border: 1px solid rgba(0,0,0,.08)
}


.v-btn-ghost-danger {
    color: #c0392b;
    background: rgba(192,57,43,0.06);
    border: 1px solid rgba(192,57,43,0.18);
    border-radius: 999px;
}

    .v-btn-ghost-danger:hover {
        background: rgba(192,57,43,0.12);
    }

/* Table */
.v-table thead th {
    background: linear-gradient(90deg, rgba(32,70,166,0.06), rgba(255,0,0,0.04));
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
    color: var(--color-text);
}

.v-table tbody tr {
    transition: transform .08s ease, background-color .2s ease;
}

    .v-table tbody tr:hover {
        background: rgba(32,70,166,0.04);
        transform: translateY(-1px);
    }

.v-table td, .v-table th {
    padding: .9rem 1rem;
}

.v-th {
    color: var(--color-text);
    text-decoration: none;
}

    .v-th:hover {
        text-decoration: underline;
    }

/* Chips */
.v-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    white-space: nowrap;
}

/* Active poll */
.v-chip-success {
    background: linear-gradient(135deg, #e0f7fa, #b2ebf2); /* pastel aqua */
    color: #006064;
}

.v-chip-pastel-success {
    background: rgba(40,167,69,.1);
    color: #1f8b4a;
    border: 1px solid rgba(40,167,69,.2);
}

/* Upcoming poll */
.v-chip-warning {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2); /* pastel orange */
    color: #e65100;
}

.v-chip-pastel-warning {
    background: #FFF6DB;
    color: #9A6B00;
    border: 1px solid #F3E3A2
}

.v-chip-ghost {
    background: rgba(0,0,0,.05);
    color: var(--color-text);
    border: 1px solid rgba(0,0,0,.08)
}


/* Finished poll */
.v-chip-secondary {
    background: linear-gradient(135deg, #fce4ec, #f8bbd0); /* pastel pink */
    color: #8e2b50;
}

/* Icon inside chip */
.v-chip i {
    color: inherit;
    font-size: 0.9em;
}

/* Meta text */
.v-meta {
    font-weight: 600;
    color: var(--color-text);
}

.v-sub {
    font-size: .8rem;
    color: var(--color-muted);
}

/* Responsive niceties */
@media (max-width: 992px) {
    .v-card-glass {
        border-radius: 1rem;
    }

    .v-table td, .v-table th {
        padding: .8rem .75rem;
    }
}

/* Inputs to match VoTico glass/soft style */
.v-input {
    background: rgba(255,255,255,.9);
    border: 1px solid var(--color-border);
    border-radius: .8rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.04);
}

    .v-input:focus {
        border-color: rgba(32,70,166,.35);
        box-shadow: 0 8px 22px rgba(32,70,166,.10);
    }

.v-input-pill {
    border-radius: 999px;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Tag chips */
.v-tag {
    --bg: var(--tag-bg, #6c757d);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    background: var(--bg);
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

    .v-tag i {
        opacity: .95;
    }

.v-tag-remove {
    color: #fff;
    padding: .1rem .25rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.12);
}

    .v-tag-remove:hover {
        background: rgba(255,255,255,.2);
    }

/* Loading dots (you already had this behavior; just style) */
.loading-dots .dot {
    font-weight: 900;
    animation: v-bounce 1s infinite;
    display: inline-block;
    margin-left: .1rem;
}

    .loading-dots .dot:nth-child(2) {
        animation-delay: .15s;
    }

    .loading-dots .dot:nth-child(3) {
        animation-delay: .3s;
    }

@keyframes v-bounce {
    0%,80%,100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-3px);
    }
}

/* Make form surface breathe on mobile */
@media (max-width: 576px) {
    .v-card-surface {
        padding: 1rem;
    }
}

/* Avatars */
.v-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    display: inline-block;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    border: 1px solid var(--color-border);
}

.v-avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(32,70,166,.10), rgba(255,0,0,.08));
    color: var(--color-text);
    opacity: .7;
    font-size: 1.25rem;
}

/* Neutral chip for Party */
.v-chip-neutral {
    color: var(--color-text);
    background: rgba(0,0,0,.04);
    border: 1px solid var(--color-border);
}

/* Truncate long descriptions nicely */
.v-ellipsis {
    max-width: 520px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 992px) {
    .v-ellipsis {
        max-width: 260px;
    }
}

/* Big avatar with subtle gradient ring */
.v-avatar-lg {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    box-shadow: 0 8px 22px rgba(0,0,0,.10);
    border: 1px solid var(--color-border);
    background: #fff;
}

.v-avatar-ring {
    position: relative;
    outline: 6px solid transparent;
    background-clip: padding-box;
}

    .v-avatar-ring::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: radial-gradient(120px 120px at 30% 30%, rgba(32,70,166,.25), rgba(255,0,0,.20) 60%, transparent 61%);
        z-index: -1;
        filter: blur(.5px);
    }

/* Upload hint */
.v-upload-hint {
    color: var(--color-muted);
}

/* Compact, consistent progress style */
.v-progress {
    background: rgba(0,0,0,.06);
    border-radius: 999px;
}

    .v-progress .progress-bar {
        background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    }

/* Share buttons */
.share-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    border: 0;
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

    .share-btn:hover {
        filter: brightness(1.05);
    }

/* Fix clamped paragraphs */
.clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Minor micro-interaction for copied state */
.copy-btn.copied {
    transform: scale(1.06);
}

/* Level Icon - More depth + soft glow */
.v-level-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.45);
    border: 2px solid white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .v-level-icon:hover {
        transform: scale(1.05);
        box-shadow: 0 0 24px rgba(40, 167, 69, 0.55);
    }

/* Progress Bar - Glowing Premium */
.v-progress {
    background: rgba(0,0,0,0.06);
    border-radius: 999px;
}

    .v-progress .progress-bar {
        background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
        box-shadow: 0 0 8px rgba(116, 214, 128, 0.6);
    }

/* ---------- HERO: real premium look ---------- */
.v-hero-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 1px solid rgba(255,255,255,0.55);
    background: radial-gradient(rgba(255,255,255,0.7) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(135deg, #f7f9ff, #fff7fb);
    box-shadow: 0 20px 50px rgba(15, 20, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: v-fade-in .6s ease-out;
}

    /* Pastel blobs (top-left / bottom-right) */
    .v-hero-card::before,
    .v-hero-card::after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        filter: blur(60px);
        opacity: .35;
        pointer-events: none;
    }

    .v-hero-card::before {
        top: -140px;
        left: -120px;
        background: radial-gradient(circle at 30% 30%, var(--color-primary), transparent 60%);
    }

    .v-hero-card::after {
        bottom: -160px;
        right: -120px;
        background: radial-gradient(circle at 70% 70%, var(--color-accent), transparent 60%);
    }

/* Optional: gradient title pop (add class to the H1) */
.v-hero-title {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Level icon with aura ---------- */
.v-level-icon {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .v-level-icon::after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, rgba(46,204,113,.35), transparent 60%);
        filter: blur(6px);
        z-index: -1;
    }

    .v-level-icon:hover {
        transform: scale(1.04);
        box-shadow: 0 10px 28px rgba(0,0,0,.16);
    }

/* ---------- Progress with moving sheen ---------- */
.v-progress {
    background: rgba(0,0,0,.06);
    border-radius: 999px;
}

    .v-progress .progress-bar {
        position: relative;
        background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
        box-shadow: 0 0 10px rgba(0,0,0,.08);
        overflow: hidden;
    }

        .v-progress .progress-bar::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(110deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 42%, rgba(255,255,255,.18) 70%, rgba(255,255,255,0) 100%);
            background-size: 200% 100%;
            mix-blend-mode: screen;
            animation: v-sheen 2.8s linear infinite;
        }

/* ---------- Badges glass pod ---------- */
.v-badge-showcase {
    position: relative;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 14px 30px rgba(15, 20, 40, 0.08);
    backdrop-filter: blur(12px);
}

.v-badge-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.10);
    transition: transform .18s ease, box-shadow .18s ease;
}

    .v-badge-icon:hover {
        transform: translateY(-2px) scale(1.06);
        box-shadow: 0 10px 22px rgba(0,0,0,.16);
    }

/* ---------- Animations ---------- */
@keyframes v-fade-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes v-sheen {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Premium card surface */
.v-card-premium {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.94));
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 18px 40px rgba(15,20,40,.10), inset 0 1px 0 rgba(255,255,255,.7);
    transition: transform .18s ease, box-shadow .18s ease;
}

    .v-card-premium::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(32,70,166,.10), rgba(255,0,0,.08));
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        padding: 1px; /* gradient border */
        box-sizing: border-box;
        pointer-events: none;
        opacity: .7;
    }

    .v-card-premium:hover {
        transform: translateY(-2px);
        box-shadow: 0 24px 50px rgba(15,20,40,.14), inset 0 1px 0 rgba(255,255,255,.8);
    }

/* Header title icon */
.text-primary .fa-square-poll-vertical {
    opacity: .9;
}

/* Tag chip: smaller and airy */
.v-tag {
    --bg: var(--tag-bg, #6c757d);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .6rem;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    font-size: .82rem;
    background: var(--bg);
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

/* Progress sheen (reuse from hero) */
.v-progress .progress-bar {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    position: relative;
    overflow: hidden;
}

    .v-progress .progress-bar::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,.18) 70%, rgba(255,255,255,0) 100%);
        background-size: 200% 100%;
        animation: v-sheen 2.8s linear infinite;
    }

@keyframes v-sheen {
    0% {
        background-position: -200% 0
    }

    100% {
        background-position: 200% 0
    }
}

/* CTA: pop + press */
.v-btn-gradient {
    box-shadow: 0 10px 24px rgba(32,70,166,.18);
    transform: translateY(0);
    transition: transform .12s ease, box-shadow .12s ease;
}

    .v-btn-gradient:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(32,70,166,.22);
    }

    .v-btn-gradient:active {
        transform: translateY(0);
        box-shadow: 0 8px 20px rgba(32,70,166,.18);
    }

/* Share buttons unified spacing */
.share-btn {
    width: 40px;
    height: 40px;
}

/* Horizontal snap scroller — no spacer columns */
.v-scroll-snap {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 320px);
    gap: 1rem;
    padding: .25rem 0 .75rem; /* no left/right padding -> no big gutter */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 0; /* snap right at the first card */
}

    .v-scroll-snap > * {
        scroll-snap-align: start;
    }

/* Optional: nice edge fades without shifting layout */
.v-scroll-wrap {
    position: relative;
}

    .v-scroll-wrap::before,
    .v-scroll-wrap::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 24px;
        pointer-events: none;
    }

    .v-scroll-wrap::before {
        left: 0;
        background: linear-gradient(90deg, var(--color-background), rgba(255,255,255,0));
    }

    .v-scroll-wrap::after {
        right: 0;
        background: linear-gradient(-90deg, var(--color-background), rgba(255,255,255,0));
    }

/* Archive card (stays same height; CTA bottom-centered) */
.v-card-archive {
    min-height: 240px;
    padding: 1rem;
    border-radius: 1rem;
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.96));
    border: 1px solid rgba(255,255,255,.65);
    box-shadow: 0 16px 36px rgba(15,20,40,.10), inset 0 1px 0 rgba(255,255,255,.75);
    transition: transform .18s ease, box-shadow .18s ease;
    display: flex; /* keep column layout */
    flex-direction: column;
}

    .v-card-archive::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(32,70,166,.10), rgba(255,0,0,.08));
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        padding: 1px;
        box-sizing: border-box;
        pointer-events: none;
        opacity: .7;
    }

    .v-card-archive:hover {
        transform: translateY(-2px);
        box-shadow: 0 24px 48px rgba(15,20,40,.14), inset 0 1px 0 rgba(255,255,255,.82);
    }

/* ========== Podium (premium) ========== */
/* Base layout */
.podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 1rem;
}

.podium-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.podium-avatar {
    width: 84px;
    height: 84px;
    border-radius: 9999px;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    margin-bottom: 1.5rem;
}

.podium-user .name {
    font-weight: 700;
    line-height: 1.2;
}

.podium-user .votes {
    font-size: .9rem;
    color: #6c757d;
}

/* Column block heights for desktop */
.podium-step .block {
    width: 100%;
    max-width: 220px;
    border-radius: 14px;
    margin-top: .5rem;
}

.step-1 .block {
    height: 140px;
}

.step-2 .block {
    height: 110px;
}

.step-3 .block {
    height: 100px;
}

/* medal/crown positioning */
.crown, .medal {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 1.25rem;
}

.step-1 .crown {
    top: -16px;
    right: -8px;
    font-size: 1.5rem;
}

/* --- Small screens --- */
@media (max-width: 576px) {
    .podium {
        grid-template-columns: 1fr; /* stack vertically */
        align-items: stretch;
    }
        /* order: 1st place first, then 2nd, then 3rd */
        .podium .step-1 {
            order: 1;
        }

        .podium .step-2 {
            order: 2;
        }

        .podium .step-3 {
            order: 3;
        }

    .podium-avatar {
        width: 56px;
        height: 56px; /* smaller avatar */
        border-width: 2px;
    }

    .podium-user .name {
        font-size: 1rem;
    }

    .podium-user .votes {
        font-size: .85rem;
    }

    .podium-step {
        flex-direction: row; /* row layout on phones */
        justify-content: space-between;
        gap: .75rem;
        padding: .5rem .75rem;
        background: #fff;
        border: 1px solid var(--color-border, #ececec);
        border-radius: 12px;
    }

        .podium-step .block {
            max-width: none;
            height: 56px; /* slim block */
            border-radius: 10px;
            order: 3; /* move block to the right */
            margin-top: 0;
            flex: 0 0 40%;
        }

    .podium-user {
        flex: 1 1 auto;
        text-align: left;
    }

    .crown, .medal {
        position: static;
        margin-left: .25rem;
    }
    /* inline icons */
    .step-1 .crown {
        font-size: 1.25rem;
    }
}

/* --- Medium screens (tablets) --- */
@media (min-width: 577px) and (max-width: 992px) {
    .podium {
        grid-template-columns: 1fr 1fr;
    }

        .podium .step-1 {
            order: 1;
            grid-column: 1 / -1;
        }
        /* first place full width on top */
        .podium .step-2 {
            order: 2;
        }

        .podium .step-3 {
            order: 3;
        }

    .step-1 .block {
        height: 120px;
        margin-inline: auto;
    }
}

/* The “block” (front face) + “cap” (top) build the podium */
.block {
    position: relative;
    width: 200px;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 14px 32px rgba(15,20,40,.12), inset 0 1px 0 rgba(255,255,255,.8);
    overflow: hidden;
}

.cap {
    height: 18px;
    border-radius: 10px 10px 0 0;
}

.face {
    position: relative;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,.05);
    background: linear-gradient(180deg, #ffffff, #f6f7fb);
}

.rank {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: .5px;
    -webkit-text-stroke: 0.5px rgba(0,0,0,.07);
    color: rgba(0,0,0,.35);
}

/* Reflection under each step */
.reflection {
    position: absolute;
    bottom: -34px;
    left: 0;
    right: 0;
    height: 34px;
    transform: scaleY(-1);
    background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
    filter: blur(2px);
    opacity: .6;
    pointer-events: none;
}

/* Heights per place */
.step-1 .face {
    height: 130px;
}
/* tallest */
.step-2 .face {
    height: 100px;
}

.step-3 .face {
    height: 86px;
}

.step-1 .block {
    width: 220px;
}

.step-2 .block, .step-3 .block {
    width: 200px;
}

/* Gold/Silver/Bronze caps + subtle tinted face */
.cap-gold {
    background: linear-gradient(180deg, #ffd44d, #f4b21a);
}

.cap-silver {
    background: linear-gradient(180deg, #dfe3ea, #bfc7d3);
}

.cap-bronze {
    background: linear-gradient(180deg, #e9b07a, #c88647);
}

.face-gold {
    background: linear-gradient(180deg, #ffffff, #fff5da);
}

.face-silver {
    background: linear-gradient(180deg, #ffffff, #f2f5fb);
}

.face-bronze {
    background: linear-gradient(180deg, #ffffff, #ffefe4);
}

/* Crown/medals */
.crown {
    position: absolute;
    top: -34px;
    font-size: 1.6rem;
    color: #f4b21a;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.15));
}

.medal {
    position: absolute;
    top: -28px;
    font-size: 1.2rem;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.15));
}

.medal-silver {
    color: #aeb6c7;
}

.medal-bronze {
    color: #c27a3a;
}

/* Hover glow (subtle) */
.podium-step:hover .block {
    box-shadow: 0 18px 40px rgba(15,20,40,.16), inset 0 1px 0 rgba(255,255,255,.85);
    transform: translateY(-1px);
    transition: all .18s ease;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .podium {
        gap: 1rem;
    }

    .podium-step {
        min-width: 160px;
    }

    .step-1 .block {
        width: 190px;
    }

    .step-2 .block, .step-3 .block {
        width: 170px;
    }

    .podium-avatar {
        width: 74px;
        height: 74px;
    }

    .rank {
        font-size: 1.8rem;
    }
}

/* ==== Vótico premium coat for podium ==== */

/* panel breathing + subtle gradient wash */
.v-card-archive {
    background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.65) 45%, rgba(255,255,255,.55) 100%), linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.25));
    box-shadow: 0 18px 35px rgba(15,20,40,.10), inset 0 1px 0 rgba(255,255,255,.6);
    border: 1px solid rgba(255,255,255,.35);
}

/* each step looks like a glass tile */
.podium-step {
    position: relative;
    padding: 14px 14px 18px;
    border-radius: 20px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 28px rgba(15,20,40,.10), inset 0 1px 0 rgba(255,255,255,.7);
}

    /* thin gradient hairline around the tile */
    .podium-step::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 20px;
        padding: 1px;
        background: linear-gradient(135deg, rgba(0,0,0,.06), rgba(255,255,255,.35));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

/* avatar: bigger, lifted, with soft ring */
.podium-avatar {
    width: clamp(72px, 16vw, 96px);
    height: clamp(72px, 16vw, 96px);
    border-radius: 999px;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 8px 24px rgba(15,20,40,.16);
    transform: translateY(18%);
}

/* names/votes typography */
.podium-user .name {
    font-weight: 800;
    letter-spacing: .2px;
}

.podium-user .votes {
    color: var(--color-muted);
}

/* pedestals: softer, with gloss + inner bevel */
.block {
    border-radius: 16px 16px 0 0;
    box-shadow: 0 12px 28px rgba(15,20,40,.10), inset 0 1px 0 rgba(255,255,255,.7);
    overflow: hidden;
}

.face {
    position: relative;
    border: 1px solid rgba(0,0,0,.04);
    background: linear-gradient(180deg, #ffffff, #f7f8fc);
}

    .face::after { /* glossy sweep */
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 50%;
        background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
        pointer-events: none;
    }

/* metals a bit richer */
.face-gold {
    background: linear-gradient(180deg, #fff7dc, #ffd86f);
}

.face-silver {
    background: linear-gradient(180deg, #f9fbff, #dfe6f2);
}

.face-bronze {
    background: linear-gradient(180deg, #ffe9d9, #eab187);
}

.rank {
    color: rgba(0,0,0,.28);
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* crown & medals – comfy spacing + micro-anim */
.crown {
    top: -10px;
    right: 8px;
    color: #ffce31;
    font-size: clamp(22px, 4vw, 30px);
    animation: crownFloat 3s ease-in-out infinite;
}

@keyframes crownFloat {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.medal {
    color: rgba(0,0,0,.22);
    bottom: 8px;
    right: 8px;
    top: auto;
}

/* hover lift (desktop only) */
@media (hover:hover) and (pointer:fine) {
    .podium-step:hover {
        transform: translateY(-2px);
        transition: transform .18s ease;
    }
}
/* layout polish */
.podium {
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .podium {
        gap: 1.4rem;
    }
}

/* Medal colors — ensure these win over the generic .medal color */
.podium-step .medal {
    color: rgba(0,0,0,.22);
}
/* default */
.podium-step .medal-silver {
    color: #aeb6c7;
}
/* silver */
.podium-step .medal-bronze {
    color: #cd7f32;
}
/* bronze (#CD7F32) */

@media (max-width: 430px) {
    .step-1 .face {
        height: 38px;
    }
    .step-2 .face {
        height: 38px;
    }
    .step-3 .face {
        height: 38px;
    }
}

/* Chart containers prevent resize loops */
.chart-380 {
    height: 380px;
}

.chart-420 {
    height: 420px;
}

@media (max-width: 576px) {
    .chart-420 {
        height: 360px;
    }

    .chart-380 {
        height: 340px;
    }
}

/* nicer toolbar affordance */
.chart-toolbar .btn.v-btn-ghost {
    cursor: pointer;
}

.v-analytics-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.88));
    border: 1px solid var(--color-border);
    box-shadow: 0 12px 26px rgba(16,24,40,0.08);
}

.chart-toolbar .btn.v-btn-ghost {
    padding: .35rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.06);
    background: rgba(0,0,0,.03);
    color: var(--color-text);
}

    .chart-toolbar .btn.v-btn-ghost:hover {
        background: rgba(0,0,0,.06);
    }

.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    font-size: .85rem;
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.06);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.v-summary-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.92));
    border: 1px solid var(--color-border);
}

.v-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.06);
    font-weight: 600;
    font-size: .9rem;
    color: var(--color-text);
}

    .v-stat-chip i {
        opacity: .85;
    }

.v-badge-trophy {
    background: #FFF6DB;
    color: #9A6B00;
    border: 1px solid #F3E3A2;
}

/* Small frosted boxes */
.v-box.glass {
    background: rgba(255,255,255,.7);
    border: 1px solid var(--color-border);
}

.vote-action-footer {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
}

    .vote-action-footer.stacked {
        position: static;
        margin-top: .5rem;
        padding: 0;
    }

    .vote-action-footer .btn {
        min-height: 44px;
    }

.card-body {
    padding-bottom: 5rem !important; /* space so text doesn't overlap footer */
}

/* Base glass alert */
.v-alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 14px 44px 14px 14px;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background: radial-gradient(600px 250px at 0% -30%, rgba(91,141,239,.12), transparent), radial-gradient(600px 250px at 120% -30%, rgba(139,231,197,.12), transparent), rgba(255,255,255,.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(16,24,40,.10);
    overflow: hidden;
    animation: vAlertIn .25s ease-out both;
}

    /* Left accent bar */
    .v-alert::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 6px;
        border-radius: 16px 0 0 16px;
        background: linear-gradient(180deg, #28a745, #8be7c5);
        opacity: .9;
    }

/* Success variant tweaks */
.v-alert-success .v-alert-icon {
    color: #1f8b4a;
    background: rgba(40,167,69,.12);
    box-shadow: inset 0 0 0 1px rgba(40,167,69,.22);
}

/* Icon pill */
.v-alert-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: 1.05rem;
}

/* Text area */
.v-alert-title {
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--color-text);
    margin-bottom: 2px;
}

.v-alert-text {
    color: var(--color-muted);
    line-height: 1.25rem;
}

/* Close button position + subtle style */
.v-alert-close {
    position: absolute;
    top: 8px;
    right: 8px;
    filter: none;
    opacity: .6;
}

    .v-alert-close:hover {
        opacity: 1;
    }

/* Entrance */
@keyframes vAlertIn {
    from {
        transform: translateY(-6px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Section header container */
.v-section-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 14px 20px;
    background: radial-gradient(400px 200px at 0% -30%, rgba(91,141,239,.10), transparent), radial-gradient(400px 200px at 120% -30%, rgba(139,231,197,.10), transparent), rgba(255,255,255,.65);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* Icon bubble */
.v-section-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: 1.1rem;
    color: var(--color-primary);
    background: rgba(91,141,239,.12);
    box-shadow: inset 0 0 0 1px rgba(91,141,239,.2);
}

/* Title text */
.v-section-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-primary);
    letter-spacing: .2px;
}

/* Empty state */
.v-empty-state {
    display: grid;
    place-items: center;
    gap: .25rem;
}

.v-empty-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--color-primary);
    background: rgba(91,141,239,.12);
    box-shadow: inset 0 0 0 1px rgba(91,141,239,.2);
    font-size: 1.25rem;
    margin: 0 auto .5rem;
}

.v-empty-title {
    font-weight: 800;
    color: var(--color-text);
}

.v-empty-text {
    color: var(--color-muted);
}

/* Premium glass footer */
.v-footer {
    background: radial-gradient(900px 320px at 0% -40%, rgba(45,86,179,.10), transparent), radial-gradient(900px 320px at 110% -10%, rgba(237,93,110,.08), transparent), rgba(255,255,255,.85);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 24px rgba(16,24,40,.06);
    font-family: var(--font-family);
    padding: 16px 0;
}

/* Brand text */
.v-footer-brand {
    color: var(--color-text);
    letter-spacing: .2px;
}

/* Links */
.v-footer-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 10px;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
    display: inline-flex;
    align-items: center;
}

    .v-footer-link:hover {
        background: rgba(45,86,179,.08);
        box-shadow: inset 0 0 0 1px rgba(45,86,179,.18);
        color: var(--color-primary);
    }

    .v-footer-link i {
        opacity: .95;
    }

/* Compact on small screens */
@media (max-width: 576px) {
    .v-footer {
        padding: 14px 0;
    }
}

.v-logo {
    height: 55px;
    transition: height 0.3s ease;
}

@media (max-width: 768px) {
    .v-logo {
        height: 42px;
    }
}

/* Premium header spacing */
.v-navbar {
    /* soft glassy background already works; just height/spacing tweaks */
    padding-top: .6rem; 
    padding-bottom: .6rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
}

    /* Keep a comfortable row height so the bar feels taller */
    .v-navbar .container {
        min-height: 65px; /* sweet spot for desktop */
        align-items: center;
    }

    /* Brand logo sizing (balanced with taller header) */
    .v-navbar .navbar-brand img {
        height: 60px; 
        max-height: 56px;
    }

@media (min-width: 992px) {
    .v-navbar .navbar-nav .nav-link {
        padding: .6rem .9rem;
        font-size: 1.05rem;
    }
}

.v-nav-active-underline::after {
    height: 3px; /* a bit thicker to match taller header */
    border-radius: 999px;
}

.v-navbar .btn-logout {
    font-size: 1rem;
    padding: .45rem .85rem; 
    line-height: 1.5;
    border: none;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    color: #fff;
    box-shadow: 0 3px 12px rgba(0,0,0,.12);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

    .v-navbar .btn-logout:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,.18);
        opacity: .95;
    }

@media (max-width: 991.98px) {
    .v-navbar .navbar-brand img {
        height: 55px;
    }

    .v-navbar .container {
        min-height: 64px;
    }
}

.v-snap-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 2rem);
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 1rem 1rem;
}

@media(min-width:768px) {
    .v-snap-row {
        grid-auto-columns: calc(50% - 2rem);
    }
}

@media(min-width:992px) {
    .v-snap-row {
        grid-auto-columns: calc(33.333% - 2rem);
    }
}

/* Container anchors absolute children */
.v-snap-nav {
    position: relative;
}

    /* Default: inline in the header (mobile) */
    .v-snap-nav .nav-btn {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .v-snap-nav .nav-btn i {
            pointer-events: none;
        }

@media (min-width: 768px) {
    .v-snap-nav .nav-btn {
        position: absolute;
        top: 12px;
        z-index: 2;
    }

    .v-snap-nav .prev {
        right: 64px;
    }

    .v-snap-nav .next {
        right: 16px;
    }
}

.progress.v-yn {
    display: flex;
    gap: 0;
    overflow: hidden;
}

    .progress.v-yn .progress-bar {
        display: block;
        border-radius: 0;
    }
        /* no inner pills */
        .progress.v-yn .progress-bar + .progress-bar {
            margin-left: 0;
        }
/* no gap */

.v-kpi {
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 14px 16px;
    box-shadow: 0 12px 28px rgba(15,20,40,.08), inset 0 1px 0 rgba(255,255,255,.6);
}

.v-kpi-icon {
    font-size: 1.25rem;
    opacity: .7;
}

.v-kpi-title {
    font-size: .85rem;
    color: var(--color-muted);
}

.v-kpi-value {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

canvas {
    max-width: 100%;
}

/* ===========================
   Premium Admin UI (scoped)
   =========================== */

/* === Admin sidebar scaffolding ONLY === */
/* Used only on pages that include .admin-shell (your Admin pages) */

.admin-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1rem;
}

/* Sidebar sticks under your navbar; JS sets --topbar-h from .v-navbar */
.admin-shell__sidebar {
    position: sticky;
    top: calc(var(--topbar-h, 64px) + 16px);
    height: max-content;
    z-index: 1;
}

@media (max-width: 991.98px) {
    .admin-shell {
        grid-template-columns: 1fr; /* hide the left column on mobile */
    }

    .admin-shell__sidebar {
        display: none;
    }
}

/* Optional: allow dropdowns in the command bar to overflow (used only where you add this class) */
.v-overflow-visible {
    overflow: visible !important;
}

/* Offcanvas: ID-scoped so it won't affect anything else */
#adminDrawer.offcanvas {
    width: 300px;
}
/* or remove if you prefer Bootstrap default */

/* Palette just for the admin shell & drawer (safe fallbacks to your site vars) */
.admin-shell,
#adminDrawer {
    --as-glass-1: rgba(255,255,255,.12);
    --as-glass-2: rgba(255,255,255,.08);
    --as-border: rgba(255,255,255,.22);
    --as-shadow: 0 10px 24px rgba(10, 9, 40, 0.35);
    --as-blur: 14px;
    --as-accent-1: var(--color-primary, #6f78ff);
    --as-accent-2: var(--color-accent, #ff6fb1);
}

/* ========== Desktop sidebar container ========== */
.admin-shell__sidebar .v-sidebar {
    border-radius: 18px;
    background: linear-gradient(135deg, var(--as-glass-1), var(--as-glass-2));
    border: 1px solid var(--as-border);
    box-shadow: var(--as-shadow);
    backdrop-filter: blur(var(--as-blur));
    -webkit-backdrop-filter: blur(var(--as-blur));
    padding: .75rem;
}

.admin-shell__sidebar .v-sidebar__inner {
    padding: .25rem;
}

.admin-shell__sidebar .v-sidebar__title {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .75rem;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    margin: .25rem .5rem .6rem;
}

/* ========== Sidebar nav items ========== */
.admin-shell__sidebar .v-nav {
    display: grid;
    gap: .35rem;
}

.admin-shell__sidebar .v-nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .62rem .85rem;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

    .admin-shell__sidebar .v-nav__item:hover {
        background: linear-gradient(135deg, color-mix(in oklab, var(--as-accent-1) 22%, transparent), color-mix(in oklab, var(--as-accent-2) 18%, transparent));
        box-shadow: 0 6px 16px rgba(20,20,60,.25);
    }

.admin-shell__sidebar .v-nav__icon {
    width: 1.1rem;
    text-align: center;
    opacity: .9;
}

.admin-shell__sidebar .v-nav__label {
    font-weight: 600;
}

.admin-shell__sidebar .v-nav__item.is-active {
    background: linear-gradient(135deg, color-mix(in oklab, var(--as-accent-1) 28%, transparent), color-mix(in oklab, var(--as-accent-2) 24%, transparent));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 8px 20px color-mix(in oklab, var(--as-accent-1) 30%, transparent);
}

    .admin-shell__sidebar .v-nav__item.is-active::before {
        content: "";
        position: absolute;
        inset: .4rem auto .4rem .35rem;
        width: 4px;
        border-radius: 4px;
        background: linear-gradient(180deg, var(--as-accent-1), var(--as-accent-2));
    }

/* ========== Mobile drawer (ID-scoped so nothing else is affected) ========== */
#adminDrawer.offcanvas {
    width: 300px; /* tweak or remove to use Bootstrap default */
    background: radial-gradient(120% 120% at 0% 0%, color-mix(in oklab, var(--as-accent-1) 18%, transparent), transparent 60%), linear-gradient(135deg, rgba(20,18,45,.94), rgba(20,18,45,.90));
    color: #fff;
    border-right: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#adminDrawer .offcanvas-header {
    color: #fff;
}

#adminDrawer .btn-close-white {
    filter: invert(1);
}

#adminDrawer .v-nav {
    display: grid;
    gap: .35rem;
}

#adminDrawer .v-nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .62rem .85rem;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

    #adminDrawer .v-nav__item:hover {
        background: linear-gradient(135deg, color-mix(in oklab, var(--as-accent-1) 22%, transparent), color-mix(in oklab, var(--as-accent-2) 18%, transparent));
    }

    #adminDrawer .v-nav__item.is-active {
        background: linear-gradient(135deg, color-mix(in oklab, var(--as-accent-1) 28%, transparent), color-mix(in oklab, var(--as-accent-2) 24%, transparent));
        border: 1px solid rgba(255,255,255,.18);
    }

        #adminDrawer .v-nav__item.is-active::before {
            content: "";
            position: absolute;
            inset: .4rem auto .4rem .35rem;
            width: 4px;
            border-radius: 4px;
            background: linear-gradient(180deg, var(--as-accent-1), var(--as-accent-2));
        }

.btn-youtube {
    background-color: #ff0000;
    color: #fff;
    font-weight: 600;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

    .btn-youtube:hover {
        background-color: #cc0000;
        color: #fff;
        transform: translateY(-1px);
    }

    .btn-youtube:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255,0,0,0.5);
    }

/* VoTico – Verify badge (hero-sized) */
.v-badge-verify {
    --ring: linear-gradient(135deg,#E6E7EB 0%,#D6D8DD 45%,#C9CCD3 100%); /* default gray ring */
    --core: linear-gradient(135deg,#bfc5cf 0%,#d6dbe4 100%); /* default gray core */
    --outline: rgba(255,255,255,.55);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .24rem .6rem .24rem .36rem;
    border-radius: 999px;
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.18));
    border: 1px solid var(--outline);
    box-shadow: 0 6px 20px rgba(10,10,10,.08), inset 0 0 0 1px rgba(255,255,255,.45);
    backdrop-filter: blur(10px);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .2px;
    line-height: 1;
    vertical-align: middle;
    color: #1f2937;
    mix-blend-mode: normal;
}

    .v-badge-verify .icon {
        width: 19px;
        height: 19px;
        flex: 0 0 19px;
        border-radius: 50%;
        position: relative;
        background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,.18) 70%, transparent 71%) center/100% 100% no-repeat, var(--core);
        box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.45);
    }

        .v-badge-verify .icon::before {
            content: "";
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            background: var(--ring);
            -webkit-mask: radial-gradient(farthest-side, transparent 72%, #000 73%);
            mask: radial-gradient(farthest-side, transparent 72%, #000 73%);
            filter: drop-shadow(0 0 6px rgba(0,0,0,.08));
        }

    .v-badge-verify .label {
        white-space: nowrap;
    }

    /* State: VERIFIED (green / premium) */
    .v-badge-verify.is-verified {
        --ring: linear-gradient(135deg,#F9E79F 0%,#F4D03F 35%,#F5B041 65%,#F39C12 100%); /* gold ring */
        --core: linear-gradient(135deg,#24c17c 0%,#22d6b3 50%,#3aa1ff 100%);
        box-shadow: 0 8px 24px rgba(35, 196, 140,.22), inset 0 0 0 1px rgba(255,255,255,.5);
    }

/* State: UNVERIFIED (gray, clickable) */
a.v-badge-verify {
    text-decoration: none;
    color: inherit;
}

.v-badge-verify.is-unverified {
    --ring: linear-gradient(135deg,#C9CDD4 0%,#B9BEC7 50%,#ADB3BE 100%);
    --core: linear-gradient(135deg,#f3f4f6 0%,#e5e7eb 100%);
    border-color: rgba(0,0,0,.08);
    color: #2b3440; /* darker label for readability */
    box-shadow: 0 6px 18px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.55);
}

    .v-badge-verify.is-unverified:hover {
        opacity: 1;
        transform: translateY(-0.5px);
        transition: .15s ease;
    }

/* Tiny sparkle */
.v-badge-verify::after {
    content: "";
    position: absolute;
    right: .3rem;
    top: -.12rem;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%);
    filter: blur(.4px);
    animation: vtkSparkle 2.4s ease-in-out infinite;
}

@keyframes vtkSparkle {
    0%,100% {
        transform: translateY(0) scale(1);
        opacity: .9
    }

    50% {
        transform: translateY(.6px) scale(1.05);
        opacity: .6
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .v-badge-verify {
        background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
        border-color: rgba(255,255,255,.28);
        color: #1f2937;
    }
}