/**
 * Listo Lo Dije — Light Confessions Theme
 *
 * Distinct visual identity: warm whites, soft shadows,
 * rounded cards, DM Sans + Inter typography, blue accents.
 */

:root {
    /* =======================================================================
     * PRIMARY — blue for CTAs (familiar, coherent with gender colors)
     * ======================================================================= */
    --vr-primary: #0063cf;
    --vr-primary-hover: #0052ab;
    --vr-primary-light: rgba(0, 99, 207, 0.08);
    --vr-primary-container: #e0f2fe;
    --vr-primary-dim: #0052ab;
    --vr-ripple-color: rgba(0, 99, 207, 0.25);

    /* =======================================================================
     * BACKGROUNDS — warm light con mejor contraste
     * ======================================================================= */
    --vr-background: #f2f0ee;
    --vr-surface: #ffffff;
    --vr-surface-hover: #f5f3f2;
    --vr-surface-container: #e8e6e4;
    --vr-surface-container-high: #dfddd9;
    --vr-surface-container-highest: #d5d3cf;
    --vr-surface-bright: #ffffff;

    /* =======================================================================
     * TEXT — mejor contraste y legibilidad
     * ======================================================================= */
    --vr-text: #1a1a1c;
    --vr-text-secondary: #484850;
    --vr-text-muted: #6b6b73;

    /* =======================================================================
     * BORDERS — más definidos
     * ======================================================================= */
    --vr-border: #dcd9d6;
    --vr-border-subtle: rgba(0, 0, 0, 0.08);
    --vr-outline: #c2bfbc;

    /* =======================================================================
     * FEEDBACK
     * ======================================================================= */
    --vr-success: #27ae60;
    --vr-error: #e74c3c;
    --vr-error-dim: #c0392b;
    --vr-warning: #f39c12;

    /* =======================================================================
     * SECONDARY
     * ======================================================================= */
    --vr-secondary: #5b9bd5;
    --vr-secondary-dim: #4a89c2;
    --vr-tertiary: #6c5ce7;

    /* =======================================================================
     * SHADOWS — más pronunciadas para mejor separación visual
     * ======================================================================= */
    --vr-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --vr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --vr-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);
    --vr-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
    --vr-shadow-glow: 0 4px 20px rgba(0, 99, 207, 0.12);
    --vr-shadow-glow-strong: 0 8px 32px rgba(0, 99, 207, 0.2);

    /* =======================================================================
     * TYPOGRAPHY — override parent fonts
     * ======================================================================= */
    --vr-font-headline: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --vr-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --vr-font-family: var(--vr-font-body);

    /* =======================================================================
     * BORDER RADIUS — softer, more rounded
     * ======================================================================= */
    --vr-radius-sm: 6px;
    --vr-radius-md: 12px;
    --vr-radius-lg: 16px;
    --vr-radius-xl: 20px;
    --vr-radius-full: 20px;

    /* =======================================================================
     * COMPONENT OVERRIDES — reacciones más visibles
     * ======================================================================= */
    --vr-reaction-bg: #f5f5f7;
    --vr-reaction-border: #e5e5ea;
    --vr-reaction-text: #4a4a52;
    --vr-reaction-icon-color: var(--vr-primary);
    --vr-reaction-count-color: #5a5a62;
    --vr-reaction-count-active-color: var(--vr-primary);
    --vr-reaction-bg-hover: #eef6ff;
    --vr-reaction-bg-active: var(--vr-primary-container);

    --vr-card-category-color: var(--vr-primary);
    --vr-card-text-hover-color: var(--vr-primary);
    --vr-card-featured-label-color: var(--vr-primary);

    --vr-nav-active-color: var(--vr-primary);
    --vr-fab-bg: var(--vr-primary);
    --vr-fab-color: #ffffff;

    --vr-badge-bg: var(--vr-primary);
    --vr-badge-color: #ffffff;

    --vr-focus-ring-color: var(--vr-primary);
    --vr-link-color: var(--vr-primary);
    --vr-link-hover-color: var(--vr-primary-hover);
}

/* =========================================================================
 * HEADER — blue header con iconos blancos
 * ========================================================================= */
.vr-header {
    background: var(--vr-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.vr-header__brand-text,
.vr-header__title {
    color: #ffffff;
}

.vr-header__menu,
.vr-header__action {
    color: #ffffff;
}

.vr-header__menu:hover,
.vr-header__action:hover {
    background: rgba(255, 255, 255, 0.15);
}

.vr-header__avatar {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

.vr-header__avatar:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

/* =========================================================================
 * BOTTOM NAV — light con mejor separación
 * ========================================================================= */
.vr-bottom-nav {
    background: #ffffff;
    border-top: 1px solid var(--vr-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
}

.vr-bottom-nav__label {
    color: var(--vr-text-secondary);
    font-weight: 500;
}

.vr-bottom-nav__icon {
    color: var(--vr-text-secondary);
}

.vr-bottom-nav__item.is-active .vr-bottom-nav__icon {
    color: var(--vr-primary);
}

.vr-bottom-nav__item.is-active .vr-bottom-nav__label {
    color: var(--vr-primary);
}

/* =========================================================================
 * CARDS — Listo Lo Dije Edition con barra de género
 * ========================================================================= */
.vr-card {
    background: #ffffff;
    border: none;
    border-radius: var(--vr-radius-lg);
    box-shadow: var(--vr-shadow-sm);
    transition: box-shadow var(--vr-transition-fast);
    overflow: hidden;
}

.vr-card:hover {
    box-shadow: var(--vr-shadow-md);
}

/* =======================================================================
 * GENDER BAR — Barra superior con color de género
 * ======================================================================= */
.vr-card__gender-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
}

.vr-card__gender-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vr-card__gender-icon {
    display: flex;
    align-items: center;
    opacity: 0.9;
}

.vr-card__age {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Colores de género - Suaves y elegantes */
.vr-card--male .vr-card__gender-bar {
    background: linear-gradient(135deg, #e8f4fc 0%, #dbeef9 100%);
    color: #2980b9;
}

.vr-card--female .vr-card__gender-bar {
    background: linear-gradient(135deg, #fce8ec 0%, #f9dbe3 100%);
    color: #c0392b;
}

.vr-card--neutral .vr-card__gender-bar {
    background: linear-gradient(135deg, #f0f0f2 0%, #e8e8ec 100%);
    color: var(--vr-text-secondary);
}

.vr-card__gender-bar .vr-card__time-meta {
    color: inherit;
    opacity: 0.7;
}

/* =======================================================================
 * CARD CONTENT — Contenido principal
 * ======================================================================= */
.vr-card__content {
    padding: 0;
}

.vr-card__body {
    padding: 20px 20px 16px;
    position: relative;
}

/* Comilla decorativa grande */
.vr-card__quote-mark {
    /*position: absolute;
    top: 8px;
    left: 14px;
    font-size: 48px;
    font-family: Georgia, serif;
    color: var(--vr-primary);
    opacity: 0.15;
    line-height: 1;
    pointer-events: none;*/

    display: none;
}

/* Ocultar las comillas del texto — la decorativa de fondo ya las reemplaza */
.vr-card--lld .vr-card__text::before,
.vr-card--lld .vr-card__text::after {
    content: none !important;
}

/* Quitar comillas que vienen en el texto renderizado */
.vr-card--lld .vr-card__text {
    quotes: none;
}

/* Todos los textos con el mismo tamaño en ListoLoDije — !important para ganarle al parent */
.vr-card__text,
.vr-card--short .vr-card__text,
.vr-card--lld .vr-card__text {
    color: var(--vr-text);
    font-weight: 450 !important;
    line-height: 1.65 !important;
    font-size: 17px !important;
    margin: 0;
    padding-left: 4px;
}

.vr-card__category {
    color: var(--vr-primary);
    background: var(--vr-primary-light);
    border-radius: var(--vr-radius-pill);
    padding: 2px 10px;
    font-size: var(--vr-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    border: none;
}

.vr-card__meta {
    color: var(--vr-text-secondary);
    font-weight: 450;
}

.vr-card__meta-separator {
    color: var(--vr-border);
}

/* Featured card */
.vr-card.is-featured {
    border: 2px solid var(--vr-primary-container);
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    box-shadow: var(--vr-shadow-glow);
}

.vr-card.is-featured .vr-card__featured-label {
    color: var(--vr-primary);
    font-weight: 700;
}

.vr-card.is-featured .vr-card__gender-bar {
    background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 100%);
}

/* Quitar el radial gradient decorativo del featured — queda muy cargado */
.vr-card--featured::before,
.vr-card--featured::after {
    display: none !important;
}

/* Featured badge — color según género de la card */
.vr-card__featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 8px;
}

.vr-card__featured-badge svg {
    flex-shrink: 0;
}

/* Hombre — celeste */
.vr-card--male .vr-card__featured-badge {
    background: rgba(41, 128, 185, 0.15);
    color: #2471a3;
}

/* Mujer — rosa */
.vr-card--female .vr-card__featured-badge {
    background: rgba(192, 57, 43, 0.12);
    color: #a93226;
}

/* Neutral — gris */
.vr-card--neutral .vr-card__featured-badge {
    background: rgba(0, 0, 0, 0.07);
    color: var(--vr-text-secondary);
}

/* Right side of gender bar */
.vr-card__bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vr-card__gender-bar .vr-card__more {
    padding: 4px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    transition: all var(--vr-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vr-card__gender-bar .vr-card__more:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}

/* Tiempo + categoría en línea — hereda el color de la barra de género */
.vr-card__time-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: inherit;
}

.vr-card__time-meta .vr-card__meta-dot,
.vr-card__time-meta .vr-card__category-tag {
    font-size: 12px;
    font-weight: 500;
    color: inherit;
}

.vr-card__meta-dot {
    font-size: 14px;
    line-height: 1;
}

/* Category tag — inline, sin fondo ni borde */
.vr-card__category-tag {
    background: none;
    padding: 0;
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
}

/* Dropdown positioning fix */
.vr-card__bar-right {
    position: relative;
}

.vr-card__bar-right .vr-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
}

/* Footer spacing */
.vr-card--lld .vr-card__footer {
    padding: 0 20px 16px;
}

.vr-card--lld .vr-card__reactions {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--vr-border);
    margin-bottom: 2px;
    margin-top: 4px;
}

.vr-card--lld .vr-card__footer-actions {
    padding-top: 0;
}

/* =========================================================================
 * REACTIONS — grises por defecto, azul solo al activar
 * ========================================================================= */
.vr-reaction {
    background: var(--vr-reaction-bg);
    border: 1px solid var(--vr-reaction-border);
    border-radius: var(--vr-radius-pill);
    transition: all var(--vr-transition-fast);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Icono, label y count — todos grises en estado inactivo */
.vr-reaction .vr-reaction__icon,
.vr-reaction .vr-reaction__icon svg {
    color: #9a9aa8;
    fill: #9a9aa8;
}

.vr-reaction .vr-reaction__label {
    color: #6b6b78;
    font-weight: 500;
}

.vr-reaction .vr-reaction__count {
    color: #9a9aa8;
    font-weight: 600;
}

/* Hover — levemente azul */
.vr-reaction:hover {
    background: var(--vr-reaction-bg-hover);
    border-color: rgba(0, 99, 207, 0.25);
    transform: translateY(-1px);
}

.vr-reaction:hover .vr-reaction__icon,
.vr-reaction:hover .vr-reaction__icon svg {
    color: var(--vr-primary);
    fill: var(--vr-primary);
}

.vr-reaction:hover .vr-reaction__label,
.vr-reaction:hover .vr-reaction__count {
    color: var(--vr-primary);
}

/* Activo — azul completo */
.vr-reaction.is-active {
    background: var(--vr-primary-container);
    border-color: var(--vr-primary);
    box-shadow: 0 2px 8px rgba(0, 99, 207, 0.15);
}

.vr-reaction.is-active .vr-reaction__icon,
.vr-reaction.is-active .vr-reaction__icon svg {
    color: var(--vr-primary);
    fill: var(--vr-primary);
}

.vr-reaction.is-active .vr-reaction__label,
.vr-reaction.is-active .vr-reaction__count {
    color: var(--vr-primary);
    font-weight: 600;
}

/* =========================================================================
 * CARD ACTIONS — más claros y sutiles
 * ========================================================================= */
.vr-card__action {
    color: var(--vr-text-muted) !important;
    opacity: 0.75;
    transition: opacity var(--vr-transition-fast), color var(--vr-transition-fast);
}

.vr-card__action:hover {
    color: var(--vr-primary) !important;
    opacity: 1;
}

.vr-card__action.is-active {
    color: var(--vr-primary) !important;
    opacity: 1;
}

/* =========================================================================
 * FILTER BAR — blanca para distinguirse del fondo
 * ========================================================================= */
.vr-filter-bar {
    background: #ffffff;
    border-bottom: 1px solid var(--vr-border);
}

.vr-filter-bar__topic {
    background: #ffffff;
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-md);
    box-shadow: var(--vr-shadow-sm);
}

.vr-filter-bar__topic:hover {
    border-color: var(--vr-primary);
}

/* =========================================================================
 * REFINE PANEL
 * ========================================================================= */
.vr-refine-panel {
    background: #ffffff;
    border-bottom: 1px solid var(--vr-border);
    box-shadow: var(--vr-shadow-md);
}

/* =========================================================================
 * PUBLISH FORM — clean white
 * ========================================================================= */
.vr-publish-form {
    background: #ffffff;
}

.vr-publish-form textarea,
.vr-publish-form input[type="text"],
.vr-publish-form input[type="number"],
.vr-publish-form select {
    background: var(--vr-background) !important;
    border: none;
    border-radius: var(--vr-radius-md);
    color: var(--vr-text);
}

.vr-publish-form textarea:focus,
.vr-publish-form input[type="text"]:focus,
.vr-publish-form input[type="number"]:focus,
.vr-publish-form select:focus {
    border: none;
    box-shadow: 0 0 0 2px var(--vr-primary);
}

/* Inputs de filtros (edad, etc.) — sin borde oscuro, fondo sutil */
.vr-refine-age__field input {
    background: var(--vr-surface-container);
    border: none;
    box-shadow: none;
    color: var(--vr-text);
}

.vr-refine-age__field input:focus {
    border: none;
    box-shadow: 0 0 0 2px var(--vr-primary);
}

/* =========================================================================
 * CTA / PROMO BUTTONS — blue
 * ========================================================================= */
.vr-random-promo__btn,
.vr-cta-btn {
    background: var(--vr-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--vr-radius-pill);
    font-weight: 700;
}

.vr-random-promo__btn:hover,
.vr-cta-btn:hover {
    background: var(--vr-primary-hover);
}

/* =========================================================================
 * DRAWER — white overlay
 * ========================================================================= */
.vr-drawer__panel {
    background: #ffffff;
    color: var(--vr-text);
    box-shadow: var(--vr-shadow-xl);
}

.vr-drawer__header {
    border-bottom: 1px solid var(--vr-border);
}

/* =========================================================================
 * SEARCH — light input
 * ========================================================================= */
.vr-search__input {
    background: var(--vr-background);
    border: 1px solid var(--vr-border);
    color: var(--vr-text);
    border-radius: var(--vr-radius-md);
}

.vr-search__input:focus {
    border-color: var(--vr-primary);
    box-shadow: 0 0 0 3px rgba(0, 99, 207, 0.1);
}

/* =========================================================================
 * TOPICS / TRENDING — light cards
 * ========================================================================= */
.vr-topics-rant {
    background: #ffffff;
    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-lg);
    box-shadow: var(--vr-shadow-sm);
}

/* =========================================================================
 * TOAST — light toast
 * ========================================================================= */
.vr-toast {
    background: #ffffff;
    color: var(--vr-text);
    border: 1px solid var(--vr-border);
    box-shadow: var(--vr-shadow-lg);
    border-radius: var(--vr-radius-lg);
}

/* =========================================================================
 * SCROLLBAR — subtle light
 * ========================================================================= */
::-webkit-scrollbar-thumb {
    background: var(--vr-surface-container-high);
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: var(--vr-background);
}

/* =========================================================================
 * REGISTER/LOGIN PROMO — warm subtle CTA card
 * ========================================================================= */
.vr-register-promo {
    background: linear-gradient(135deg, #fff5f4 0%, #ffffff 100%);
    border: 1px solid var(--vr-primary-container);
    border-radius: var(--vr-radius-lg);
}

/* =========================================================================
 * SKELETON LOADER — light shimmer
 * ========================================================================= */
.vr-skeleton {
    background: var(--vr-surface-container);
}

.vr-skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
}

/* =========================================================================
 * MEJORAS ADICIONALES DE UX
 * ========================================================================= */

/* Card actions (comentarios, compartir, guardar) más visibles */
.vr-card__actions {
    color: var(--vr-text-secondary);
}

.vr-card__actions-btn {
    color: var(--vr-text-secondary);
    transition: color var(--vr-transition-fast), transform var(--vr-transition-fast);
}

.vr-card__actions-btn:hover {
    color: var(--vr-primary);
    transform: scale(1.1);
}

/* Empty state más visible */
.vr-empty-state {
    color: var(--vr-text-secondary);
}

.vr-empty-state__text {
    color: var(--vr-text-muted);
    font-weight: 450;
}

/* Filter topic button más definido */
.vr-filter-bar__topic-text {
    color: var(--vr-text);
    font-weight: 500;
}

/* Menú de opciones (tres puntos) más visible */
.vr-card__menu-btn {
    color: var(--vr-text-muted);
    background: var(--vr-surface-container);
    border-radius: 50%;
    transition: all var(--vr-transition-fast);
}

.vr-card__menu-btn:hover {
    color: var(--vr-text);
    background: var(--vr-surface-container-high);
}

/* Bookmark icon */
.vr-card__bookmark {
    color: var(--vr-text-muted);
    transition: color var(--vr-transition-fast);
}

.vr-card__bookmark:hover,
.vr-card__bookmark.is-saved {
    color: var(--vr-primary);
}

/* FAB con mejor sombra */
.vr-fab {
    box-shadow: 0 4px 16px rgba(0, 99, 207, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1);
}

.vr-fab:hover {
    box-shadow: 0 6px 24px rgba(0, 99, 207, 0.45), 0 4px 10px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px) scale(1.05);
}

/* Links en el feed */
.vr-link-back,
.vr-load-more {
    color: var(--vr-text-secondary);
    font-weight: 500;
}

.vr-link-back:hover,
.vr-load-more:hover {
    color: var(--vr-primary);
}

/* =========================================================================
 * DETAIL SHEET — Listo Lo Dije Edition con barra de género
 * ========================================================================= */
.vr-detail--lld {
    padding: 0;
    margin: -16px -16px 0 -16px;
    width: calc(100% + 32px);
}

.vr-detail__gender-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 1.5rem;
    border-radius: var(--vr-radius-lg);
    margin-left: 20px;
    margin-right: 20px;
}

.vr-detail__gender-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vr-detail__gender-icon {
    display: flex;
    align-items: center;
}

.vr-detail__age {
    font-weight: 700;
}

.vr-detail__time {
    opacity: 0.7;
    font-weight: 500;
}

/* Gender colors */
.vr-detail--lld.vr-detail--male .vr-detail__gender-bar {
    background: linear-gradient(135deg, #e8f4fc 0%, #dbeef9 100%);
    color: #2980b9;
}

.vr-detail--lld.vr-detail--female .vr-detail__gender-bar {
    background: linear-gradient(135deg, #fce8ec 0%, #f9dbe3 100%);
    color: #c0392b;
}

.vr-detail--lld.vr-detail--neutral .vr-detail__gender-bar {
    background: linear-gradient(135deg, #f0f0f2 0%, #e8e8ec 100%);
    color: var(--vr-text-secondary);
}

/* Body with quote mark */
.vr-detail__body {
    position: relative;
    padding: 14px 20px 0px;
}

.vr-detail__quote-mark {
  display: none;
}

.vr-detail--lld .vr-detail__text {
    font-size: 18px;
    line-height: 1.7;
    padding-left: 8px;
}

.vr-detail--lld .vr-detail__reactions {
    padding: 0 20px 16px;
    border-bottom: 1px solid var(--vr-border);
    margin-bottom: 0;
}

.vr-detail--lld .vr-detail__footer {
    padding: 16px 24px;
}

/* Fix sheet content padding for LLD detail */
.vr-sheet--detail .vr-sheet__content {
    padding-top: 0;
}

.vr-detail--lld + .vr-comments {
    padding: 0 4px;
}

.vr-card__footer-actions {
    border-top: none !important;
}

/* Shadow badge positioning in LLD card */
.vr-card--lld .vr-card__shadow-badge {
    margin: 12px 20px 0;
}



.vr-reaction {
  
    padding: 8px 10px !important;

    }

    .vr-bottom-nav__item.is-active {
    color: var(--vr-nav-active-color);
    transform: none !important;
}

/* El sheet de denuncia debe renderizarse encima del sheet de detalle */
.vr-sheet--report {
    z-index: calc(var(--vr-z-modal) + 20);
}

/* Badges del perfil — todos en azul primario, ignorar --badge-color individual */
.vr-profile__badge-icon,
.vr-profile__badge-icon svg {
    color: var(--vr-primary) !important;
    stroke: var(--vr-primary) !important;
}

.vr-topic-item.is-active {
    background-color: var(--vr-background) !important;
}

/* =========================================================================
 * RANDOM SHEET — Listo Lo Dije Edition con barra de género
 * ========================================================================= */
.vr-random--lld {
    padding: 0;
}

.vr-random--lld .vr-random__body {
    padding: 0;
}

.vr-random__gender-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--vr-radius-lg);
    margin: 0 4px 16px;
}

.vr-random__gender-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vr-random__gender-icon {
    display: flex;
    align-items: center;
}

.vr-random__age {
    font-weight: 700;
}

.vr-random__time-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: inherit;
    opacity: 0.7;
}

.vr-random__meta-dot {
    font-size: 14px;
    line-height: 1;
}

.vr-random__category-tag {
    font-size: 12px;
    font-weight: 500;
}

/* Gender colors for random */
.vr-random--male .vr-random__gender-bar {
    background: linear-gradient(135deg, #e8f4fc 0%, #dbeef9 100%);
    color: #2980b9;
}

.vr-random--female .vr-random__gender-bar {
    background: linear-gradient(135deg, #fce8ec 0%, #f9dbe3 100%);
    color: #c0392b;
}

.vr-random--neutral .vr-random__gender-bar {
    background: linear-gradient(135deg, #f0f0f2 0%, #e8e8ec 100%);
    color: var(--vr-text-secondary);
}

/* Text styling */
.vr-random--lld .vr-random__text {
    font-size: 18px;
    line-height: 1.7;
    padding: 0 20px 20px;
}

/* Reactions and footer */
.vr-random--lld .vr-random__reactions {
    padding: 0 20px 16px;
    border-bottom: 1px solid var(--vr-border);
}

.vr-random--lld .vr-random__footer {
    padding: 12px 20px;
    border-top: none;
}



.vr-profile__level-badge {
    padding: 0 !important;
}

.vr-refine-pill {
    border: none !important;
}

.vr-random__next-bar {
    padding-left: 3rem!important;
    padding-right: 3rem!important;
}


.vr-drawer__login-promo {
    display: none;
}

.vr-drawer__login-promo:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(255, 141, 140, 0.08) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255, 141, 140, 0.06) 0%, transparent 35%);
    pointer-events: none;
}

.vr-drawer__login-promo {
    background: rgba(0, 0, 0, .2);
    border-radius: 6px !important;
}



.vr-publish-form__gender-option input:checked + .vr-publish-form__gender-pill {
    background: var(--vr-primary);
    color: var(--vr-background) !important;
}