/* VIP WIDGET STYLES */
.vip-widget { position: fixed; bottom: 90px; right: 20px; width: 300px; height: 420px; min-height: 380px; z-index: 9999; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border: 1px solid #ddd; resize: both; min-width: 280px; transition: opacity 0.3s; }
.vip-header { background: #111; color: #fff; cursor: move; user-select: none; }
.btn-vip-ctrl { background: transparent; border: none; color: #666; font-size: 12px; }
.btn-vip-ctrl:hover { color: #fff; }
.vip-item { cursor: pointer; transition: transform 0.1s ease, background 0.2s; position: relative; background: #fff; user-select: none; }
.vip-item:hover { background: #f0f7ff; border-color: #4f46e5 !important; }
.vip-item.dragging { opacity: 0.5; transform: scale(0.98); background: #e0e7ff; border: 2px dashed #4f46e5 !important; }
.vip-item.active-playing { background: #e0f2fe; border-color: #0284c7 !important; font-weight: bold; }
.drag-indicator { display: flex; align-items: center; justify-content: center; width: 20px; height: 100%; color: #aaa; }
.vip-thumb { width: 60px; height: 40px; background: #000; position: relative; overflow: hidden; }
.vip-thumb video { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.vip-thumb-audio { width: 60px; height: 40px; background: linear-gradient(45deg, #4f46e5, #9333ea); display: flex; align-items: center; justify-content: center; }
.btn-vip-toggle { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background: #111; color: #fff; border: 3px solid #4f46e5; z-index: 10000; font-size: 24px; }
.pulse-badge { position: absolute; top: 0; right: 0; border-radius: 50%; padding: 4px 7px; }
.resizer { width: 15px; height: 15px; position: absolute; right: 0; bottom: 0; cursor: nwse-resize; }
.vip-scroll::-webkit-scrollbar { width: 4px; }
.vip-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
.bg-soft-primary { background-color: rgba(79, 70, 229, 0.1); }
.bg-soft-info { background-color: rgba(6, 182, 212, 0.1); }

/* PLAYER CONTROLS STYLES */
.vip-player-controls { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.btn-player-action { background: transparent; border: none; color: #9ca3af; transition: color 0.2s, transform 0.1s; cursor: pointer; font-size: 14px; outline: none; }
.btn-player-action:hover { color: #ffffff; }
.btn-player-action:active { transform: scale(0.9); }
.action-main-btn { color: #ffffff; background: #4f46e5; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.action-main-btn:hover { background: #6366f1; transform: scale(1.05); }
.btn-autoplay-toggle.active { color: #10b981 !important; text-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }

/* FEED STYLES */
.pylaas-media-wrapper { position: relative; background: #000; min-height: 200px; }
.media-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(0,0,0,0.2); }
.play-btn-blur { width: 60px; height: 60px; background: rgba(255,255,255,0.3); backdrop-filter: blur(5px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; border: 1px solid #fff; }
.remix-card { width: 100%; height: 150px; background: linear-gradient(45deg, #1e293b, #4f46e5); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.extra-small { font-size: 0.75rem; }
.scroll-gizle::-webkit-scrollbar { display: none; }
.highlight-post { animation: flash-border 2s; border: 2px solid #4f46e5 !important; }
@keyframes flash-border { 0% { box-shadow: 0 0 15px rgba(79, 70, 229, 0.5); } 100% { box-shadow: none; } }