/* =========================================================
   STASH DRACULA CYBERPUNK VAPORWAVE — FULL REFACTORED THEME
   ========================================================= */

/* =========================
   DESIGN TOKENS
   ========================= */
:root {
    /* Palette */
    --bg-0: #282a36;
    --bg-1: #303041;
    --bg-2: #44475a;
    --bg-3: #6272a4;

    --accent-pink: #ff79c6;
    --accent-purple: #bd93f9;
    --accent-cyan: #8be9fd;
    --accent-yellow: #f1fa8c;
    --accent-red: #ff5555;

    --text-main: #f8f8f2;

    /* Radii */
    --radius-sm: .25rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;

    /* Shadows & glows */
    --glow-cyan: 0 0 12px rgba(139,233,253,.6);
    --glow-pink: 0 0 15px rgba(255,121,198,.35);
    --shadow-card: 0 6px 22px rgba(0,0,0,.35);

    /* Gradients */
    --grad-main: linear-gradient(135deg,var(--accent-pink),var(--accent-purple));
    --grad-bg: linear-gradient(135deg,#282a36,#bd93f9);
}

/* =========================
   BASE LAYOUT
   ========================= */
body {
    font-family: Poppins, sans-serif;
    background: var(--grad-bg);
    color: var(--text-main);
    text-align:left;
}

/* Scrollbar */
body::-webkit-scrollbar { width:10px; }
body::-webkit-scrollbar-track { background: var(--bg-2); }
body::-webkit-scrollbar-thumb { background: var(--accent-pink); }
body::-webkit-scrollbar-thumb:hover { background: var(--accent-purple); }

::selection {
    background: var(--accent-cyan);
    color: var(--bg-0);
}

/* =========================
   BUTTONS
   ========================= */
.btn {
    border-radius: var(--radius-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.btn-primary {
    background: var(--grad-main);
    border: none;
    font-weight:600;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-pink);
}

.input-group-text {
    background: var(--bg-3);
    border:1px solid var(--accent-pink);
    color: var(--text-main);
}

/* =========================
   CARDS
   ========================= */
.card {
    background: var(--bg-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--accent-purple);
    box-shadow: var(--shadow-card);
    transition: transform .2s ease, box-shadow .25s ease;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--glow-cyan);
}

/* =========================
   INPUTS / FORMS
   ========================= */
.form-control {
    border-radius: var(--radius-sm);
    background: rgba(68,71,90,.6);
    border:1px solid var(--accent-pink);
    color:var(--text-main);
}

.form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(255,121,198,.25);
    background: rgba(68,71,90,.8);
}

/* =========================
   TAGS / BADGES
   ========================= */
.tag-item {
    border-radius: 15px;
    padding:.35rem .85rem;
    margin:.2rem;
    background: var(--grad-main);
    font-weight:600;
    transition: transform .2s ease;
}

.tag-item:hover {
    transform: scale(1.05);
    box-shadow: var(--glow-cyan);
}

.badge {
    border-radius:12px;
    padding:.4em .8em;
    font-weight:600;
    background: linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));
}

/* =========================
   SCENE / MEDIA CARDS
   ========================= */
.scene-card {
    margin:.3rem;
    transition: transform .2s ease, box-shadow .25s ease;
}

.scene-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--glow-pink);
}

.scene-card-preview-image,
.scene-card-preview-video {
    min-height:280px;
    object-fit:cover;
}

.scene-studio-overlay,
.scene-specs-overlay,
.scene-card__duration {
    backdrop-filter: blur(6px);
    border-radius:8px;
    font-weight:700;
    padding:.3rem .6rem;
}

.scene-studio-overlay { background: rgba(255,121,198,.9); }
.scene-specs-overlay  { background: rgba(139,233,253,.9); }
.scene-card__duration { background: rgba(0,0,0,.8); }

/* =========================
   PERFORMERS / GALLERY
   ========================= */
.performer-card:hover,
.gallery-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--glow-cyan);
}

.performer-card .gender-icon {
    display:none;
}

/* =========================
   MODALS / DROPDOWNS
   ========================= */
.modal-content {
    border-radius: var(--radius-lg);
    border:2px solid var(--accent-pink);
    background: var(--bg-1);
    box-shadow: var(--glow-pink);
}

.dropdown-menu {
    background: var(--bg-3);
    border:1px solid var(--accent-pink);
    border-radius: var(--radius-lg);
}

.dropdown-item:hover {
    background: var(--bg-2);
    color: var(--accent-pink);
}

/* =========================
   VIDEO PLAYER
   ========================= */
.vjs-control-bar {
    background: rgba(40,42,54,.95);
    backdrop-filter: blur(10px);
}

.vjs-play-progress {
    background: var(--accent-pink);
}

/* =========================
   TABLES / STATS
   ========================= */
.table thead th {
    background: var(--bg-2);
    color: var(--accent-pink);
    font-weight:700;
}

.stats-element {
    background: var(--bg-3);
    border-radius: var(--radius-md);
    padding:1rem;
    border:1px solid var(--accent-purple);
}

.stats-element:hover {
    border-color: var(--accent-pink);
    box-shadow: var(--glow-pink);
}

/* =========================
   PROGRESS BAR (optimized)
   ========================= */
.progress-bar:hover {
    background: linear-gradient(90deg,
        var(--accent-pink),
        var(--accent-purple),
        var(--accent-cyan));
}

/* =========================
   KEYBOARD SHORTCUT UI
   ========================= */
kbd {
    background: var(--bg-2);
    border:1px solid var(--accent-pink);
    border-radius:3px;
    padding:2px 6px;
    font-family:monospace;
    font-size:11px;
    box-shadow:0 2px 0 var(--accent-pink);
}

/* =========================
   FILTER PANEL / UI CLEANUP
   ========================= */
.filter-container {
    background: rgba(68,71,90,.95);
    border-radius: var(--radius-md);
    padding:1rem;
    backdrop-filter: blur(10px);
}

.donate-banner,
.upgrade-to-supporter {
    display:none;
}

/* =========================
   RESPONSIVE GRID
   ========================= */
@media (min-width:1200px){
    .scene-card { width:calc(20% - .6rem); }
}
@media (min-width:1600px){
    .scene-card { width:calc(16.666% - .6rem); }
}

/* =========================
   REDUCED MOTION SUPPORT
   ========================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
    }
}

/* =========================
   PRINT MODE
   ========================= */
@media print {
    .top-nav,
    .filter-container,
    .keyboard-shortcuts-hint {
        display:none;
    }
}