From 0a0851e120ccd6e5572a0b6db39ac52c3b777437 Mon Sep 17 00:00:00 2001
From: ghassan <ghassan@innovator.bh>
Date: Tue, 28 Jul 2026 23:35:16 +0300
Subject: [PATCH] Fix unstyled playlist cards on /videos?filter=playlists
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The base card CSS (.yt-video-card/.yt-video-thumb/.yt-video-info) lived inside
video-card's @once <style> block, so it only emitted when a video card rendered.
Playlist cards reuse those classes, so on playlist-only pages (no video cards)
they rendered completely unstyled — a mess.

Extract the shared card CSS into resources/views/components/partials/card-styles
(kept @once) and @include it from BOTH video-card and playlist-card. Now the CSS
loads whenever either card renders, and @once still dedupes it to one copy on
pages that show both (home feed verified: emitted exactly once).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/partials/card-styles.blade.php | 669 ++++++++++++++++++
 .../views/components/playlist-card.blade.php  |   5 +
 .../views/components/video-card.blade.php     | 667 +----------------
 3 files changed, 675 insertions(+), 666 deletions(-)
 create mode 100644 resources/views/components/partials/card-styles.blade.php

diff --git a/resources/views/components/partials/card-styles.blade.php b/resources/views/components/partials/card-styles.blade.php
new file mode 100644
index 0000000..50f64f0
--- /dev/null
+++ b/resources/views/components/partials/card-styles.blade.php
@@ -0,0 +1,669 @@
+{{-- Shared card styles (video-card + playlist-card). Extracted so the CSS
+     loads on pages that render playlist cards but no video cards, e.g.
+     /videos?filter=playlists. Wrapped in @once so it emits only once. --}}
+@once
+<style>
+/* Base styles for video card */
+.yt-video-card {
+    cursor: pointer;
+}
+
+.yt-video-card .yt-video-thumb {
+    position: relative;
+    aspect-ratio: 16/9;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #1a1a1a;
+}
+
+/* Skeleton shimmer while thumbnail loads */
+.yt-video-card .yt-video-thumb::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
+    background-size: 200% 100%;
+    animation: thumb-shimmer 1.4s ease infinite;
+    z-index: 0;
+    border-radius: inherit;
+}
+
+@keyframes thumb-shimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+.yt-video-card .yt-video-thumb.loaded::before {
+    animation: none;
+    opacity: 0;
+}
+
+.yt-video-card .yt-video-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transition: opacity 0.3s ease, transform 0.2s ease;
+    z-index: 1;
+}
+
+.yt-video-card .yt-video-thumb img.loaded {
+    opacity: 1;
+}
+
+.yt-video-card:hover .yt-video-thumb img.loaded {
+    transform: scale(1.03);
+}
+
+.yt-video-card .yt-video-thumb video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    background: #000;
+    z-index: 2;
+}
+
+.yt-video-card .yt-video-thumb video.active {
+    opacity: 1;
+}
+
+/* Audio preview overlay (equalizer) */
+.audio-preview-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    padding-bottom: 14px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+    z-index: 3;
+}
+
+.yt-video-thumb.audio-playing .audio-preview-overlay {
+    opacity: 1;
+}
+
+.audio-eq {
+    display: flex;
+    align-items: flex-end;
+    gap: 3px;
+    height: 24px;
+    background: rgba(0,0,0,0.55);
+    padding: 4px 8px;
+    border-radius: 20px;
+}
+
+.audio-eq span {
+    display: block;
+    width: 3px;
+    border-radius: 2px;
+    background: #e61e1e;
+    animation: eq-bar 0.8s ease-in-out infinite;
+}
+
+.audio-eq span:nth-child(1) { height: 6px;  animation-delay: 0s; }
+.audio-eq span:nth-child(2) { height: 14px; animation-delay: 0.15s; }
+.audio-eq span:nth-child(3) { height: 20px; animation-delay: 0.05s; }
+.audio-eq span:nth-child(4) { height: 12px; animation-delay: 0.2s; }
+.audio-eq span:nth-child(5) { height: 8px;  animation-delay: 0.1s; }
+
+@keyframes eq-bar {
+    0%, 100% { transform: scaleY(0.4); }
+    50%       { transform: scaleY(1); }
+}
+
+.yt-video-card .yt-video-duration {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    background: rgba(0,0,0,0.8);
+    color: white;
+    padding: 3px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    z-index: 3;
+}
+
+.yt-video-card .yt-shorts-badge {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    background: rgba(230, 30, 30, 0.9);
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    z-index: 3;
+}
+
+.yt-video-card .yt-shorts-badge i {
+    font-size: 12px;
+}
+
+.yt-video-card .yt-visibility-badge {
+    position: absolute;
+    bottom: 8px;
+    left: 8px;
+    padding: 3px 7px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    pointer-events: none;
+    z-index: 3;
+}
+
+.yt-video-card .yt-visibility-private {
+    background: rgba(220, 38, 38, 0.88);
+    color: #fff;
+}
+
+.yt-video-card .yt-visibility-unlisted {
+    background: rgba(30, 30, 30, 0.82);
+    color: #facc15;
+    border: 1px solid rgba(250, 204, 21, 0.4);
+}
+
+.yt-video-card .yt-video-info {
+    display: flex;
+    margin-top: 12px;
+    gap: 12px;
+}
+
+.yt-video-card .yt-channel-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: #555;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+
+.yt-video-card .yt-channel-icon img.loaded {
+    opacity: 1 !important;
+}
+
+.yt-video-card .yt-video-details {
+    flex: 1;
+    min-width: 0;
+}
+
+.yt-video-card .yt-video-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+    margin: 0 0 4px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 1.3;
+}
+
+.yt-video-card .yt-video-title a {
+    color: inherit;
+    text-decoration: none;
+    display: flex;
+    align-items: baseline;
+    gap: 5px;
+}
+.vc-lang-flag {
+    display: inline-block;
+    width: 16px;
+    height: 12px;
+    border-radius: 2px;
+    flex-shrink: 0;
+    vertical-align: baseline;
+    position: relative;
+    top: 1px;
+}
+
+.yt-video-card .yt-channel-icon {
+    text-decoration: none;
+    display: block;
+}
+
+.yt-video-card .yt-channel-name,
+.yt-video-card .yt-video-meta {
+    color: #aaa;
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.yt-video-card a.yt-channel-name {
+    display: block;
+    text-decoration: none;
+}
+.yt-video-card a.yt-channel-name:hover { color: #fff; }
+
+/* Type label in meta row */
+.yt-type-label {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+}
+.yt-type-music   { color: #c084fc; }
+.yt-type-match   { color: #60a5fa; }
+.yt-type-generic { color: #f87171; }
+
+/* More button — visible only on hover (touch devices always show it) */
+.yt-video-card .yt-more-btn {
+    background: transparent;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s, opacity 0.15s;
+    flex-shrink: 0;
+}
+@media (hover: hover) {
+    .yt-video-card .yt-more-btn { opacity: 0; }
+    .yt-video-card:hover .yt-more-btn,
+    .yt-video-card .yt-more-btn:focus,
+    .yt-video-card .yt-more-btn[aria-expanded="true"] { opacity: 1; }
+}
+.yt-video-card .yt-more-btn:hover {
+    background: #3f3f3f;
+}
+
+/* Dropdown menu styles - use Bootstrap defaults */
+.yt-video-card .dropdown-menu-dark {
+    background: #282828;
+    border: 1px solid #3f3f3f;
+    border-radius: 12px;
+    padding: 8px 0;
+    min-width: 200px;
+}
+
+.yt-video-card .dropdown-item {
+    color: #fff;
+    padding: 10px 16px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.yt-video-card .dropdown-item:hover {
+    background: #3f3f3f;
+    color: #fff;
+}
+
+.yt-video-card .dropdown-item.text-danger {
+    color: #ef4444 !important;
+}
+
+.yt-video-card .dropdown-item.text-danger:hover {
+    background: #3f3f3f;
+    color: #ef4444 !important;
+}
+
+.yt-video-card .dropdown-item i {
+    width: 20px;
+    text-align: center;
+}
+
+.yt-video-card .dropdown-divider {
+    border-color: #3f3f3f;
+    margin: 8px 0;
+}
+
+/* Small size styles */
+.yt-video-card-sm .yt-video-thumb {
+    border-radius: 8px;
+}
+
+.yt-video-card-sm .yt-video-info {
+    margin-top: 8px;
+    gap: 8px;
+}
+
+.yt-video-card-sm .yt-channel-icon {
+    width: 28px;
+    height: 28px;
+}
+
+.yt-video-card-sm .yt-video-title {
+    font-size: 13px;
+}
+
+.yt-video-card-sm .yt-channel-name,
+.yt-video-card-sm .yt-video-meta {
+    font-size: 12px;
+}
+
+.yt-video-card-sm .yt-more-btn {
+    width: 24px;
+    height: 24px;
+}
+
+/* Cute Edit Modal Styles */
+.cute-edit-modal {
+    max-width: 380px;
+    margin: auto;
+}
+
+.cute-edit-content {
+    background: linear-gradient(145deg, #1f1f1f 0%, #2a2a2a 100%);
+    border: 1px solid #3a3a3a;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+.cute-edit-header {
+    background: linear-gradient(135deg, #ff6b8a 0%, #ff8fa3 100%);
+    padding: 16px 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    position: relative;
+}
+
+.cute-edit-icon {
+    font-size: 20px;
+}
+
+.cute-edit-header h5 {
+    margin: 0;
+    color: white;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.btn-close-cute {
+    position: absolute;
+    right: 12px;
+    background: rgba(255,255,255,0.2);
+    border: none;
+    color: white;
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    font-size: 18px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s;
+}
+
+.btn-close-cute:hover {
+    background: rgba(255,255,255,0.3);
+}
+
+.cute-edit-body {
+    padding: 20px;
+}
+
+.cute-form-group {
+    margin-bottom: 16px;
+}
+
+.cute-form-group label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: #ccc;
+    font-size: 13px;
+    margin-bottom: 8px;
+    font-weight: 500;
+}
+
+.cute-form-group label i {
+    color: #ff6b8a;
+    font-size: 14px;
+}
+
+.cute-input, .cute-textarea {
+    width: 100%;
+    background: #151515;
+    border: 1px solid #333;
+    border-radius: 10px;
+    padding: 10px 12px;
+    color: #fff;
+    font-size: 13px;
+    transition: all 0.2s;
+}
+
+.cute-input:focus, .cute-textarea:focus {
+    outline: none;
+    border-color: #ff6b8a;
+    box-shadow: 0 0 0 3px rgba(255, 107, 138, 0.15);
+}
+
+.cute-input::placeholder, .cute-textarea::placeholder {
+    color: #555;
+}
+
+/* Type Options */
+.cute-type-options, .cute-privacy-options {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.cute-type-option, .cute-privacy-option {
+    flex: 1;
+    min-width: 80px;
+    cursor: pointer;
+}
+
+.cute-type-option input, .cute-privacy-option input {
+    display: none;
+}
+
+.cute-type-option span, .cute-privacy-option span {
+    display: block;
+    padding: 8px 10px;
+    background: #151515;
+    border: 1px solid #333;
+    border-radius: 8px;
+    font-size: 12px;
+    color: #aaa;
+    text-align: center;
+    transition: all 0.2s;
+}
+
+.cute-type-option:hover span, .cute-privacy-option:hover span {
+    border-color: #555;
+    background: #1a1a1a;
+}
+
+.cute-type-option.active span, .cute-privacy-option.active span {
+    background: rgba(255, 107, 138, 0.15);
+    border-color: #ff6b8a;
+    color: #ff6b8a;
+}
+
+/* Shorts Toggle in Edit Modal */
+.cute-shorts-toggle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    margin-top: 8px;
+}
+
+.cute-shorts-toggle input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.cute-shorts-slider {
+    position: relative;
+    width: 44px;
+    height: 24px;
+    background-color: #333;
+    border-radius: 12px;
+    transition: 0.3s;
+    margin-right: 10px;
+}
+
+.cute-shorts-slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    border-radius: 50%;
+    transition: 0.3s;
+}
+
+.cute-shorts-toggle input:checked + .cute-shorts-slider {
+    background-color: #e63030;
+}
+
+.cute-shorts-toggle input:checked + .cute-shorts-slider:before {
+    transform: translateX(20px);
+}
+
+.cute-shorts-label {
+    color: #aaa;
+    font-size: 12px;
+}
+
+/* Thumbnail Upload */
+.cute-thumbnail-upload {
+    border: 2px dashed #444;
+    border-radius: 10px;
+    padding: 16px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    background: #151515;
+}
+
+.cute-thumbnail-upload:hover {
+    border-color: #ff6b8a;
+    background: rgba(255, 107, 138, 0.05);
+}
+
+.cute-thumbnail-preview {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    color: #666;
+}
+
+.cute-thumbnail-preview i {
+    font-size: 24px;
+    color: #ff6b8a;
+}
+
+.cute-thumbnail-preview span {
+    font-size: 12px;
+}
+
+/* Status */
+.cute-status {
+    padding: 10px;
+    border-radius: 8px;
+    font-size: 13px;
+    margin-bottom: 16px;
+    display: none;
+}
+
+.cute-status.success {
+    display: block;
+    background: rgba(34, 197, 94, 0.15);
+    color: #4ade80;
+    border: 1px solid rgba(34, 197, 94, 0.3);
+}
+
+.cute-status.error {
+    display: block;
+    background: rgba(239, 68, 68, 0.15);
+    color: #f87171;
+    border: 1px solid rgba(239, 68, 68, 0.3);
+}
+
+/* Actions */
+.cute-edit-actions {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+}
+
+.cute-btn-cancel, .cute-btn-save {
+    padding: 10px 20px;
+    border-radius: 10px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: none;
+}
+
+.cute-btn-cancel {
+    background: #333;
+    color: #aaa;
+}
+
+.cute-btn-cancel:hover {
+    background: #444;
+    color: #fff;
+}
+
+.cute-btn-save {
+    background: linear-gradient(135deg, #ff6b8a 0%, #ff8fa3 100%);
+    color: white;
+    box-shadow: 0 4px 15px rgba(255, 107, 138, 0.3);
+}
+
+.cute-btn-save:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 20px rgba(255, 107, 138, 0.4);
+}
+
+.cute-btn-save:disabled {
+    background: #444;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+
+@media (max-width: 420px) {
+    .cute-edit-modal {
+        max-width: 320px;
+        margin: 10px;
+    }
+
+    .cute-type-options, .cute-privacy-options {
+        flex-direction: column;
+    }
+}
+</style>
+@endonce
diff --git a/resources/views/components/playlist-card.blade.php b/resources/views/components/playlist-card.blade.php
index c173dd8..a590be9 100644
--- a/resources/views/components/playlist-card.blade.php
+++ b/resources/views/components/playlist-card.blade.php
@@ -10,6 +10,11 @@
     $plShuffleUrl = $firstVid ? route('playlists.shuffle', $pl->id) : null;
 @endphp
 
+{{-- Playlist cards reuse .yt-video-card / .yt-video-thumb / .yt-video-info. That
+     CSS lives in this shared partial (also used by video-card) so it loads on
+     pages that show playlists but no videos, e.g. /videos?filter=playlists. --}}
+@include('components.partials.card-styles')
+
 @once
 <style>
 .pl-count-badge {
diff --git a/resources/views/components/video-card.blade.php b/resources/views/components/video-card.blade.php
index 5c6260f..78feba5 100644
--- a/resources/views/components/video-card.blade.php
+++ b/resources/views/components/video-card.blade.php
@@ -269,672 +269,7 @@ $sizeClasses = match($size) {
     </div>
 </div>
 
-@once
-<style>
-/* Base styles for video card */
-.yt-video-card {
-    cursor: pointer;
-}
-
-.yt-video-card .yt-video-thumb {
-    position: relative;
-    aspect-ratio: 16/9;
-    border-radius: 12px;
-    overflow: hidden;
-    background: #1a1a1a;
-}
-
-/* Skeleton shimmer while thumbnail loads */
-.yt-video-card .yt-video-thumb::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
-    background-size: 200% 100%;
-    animation: thumb-shimmer 1.4s ease infinite;
-    z-index: 0;
-    border-radius: inherit;
-}
-
-@keyframes thumb-shimmer {
-    0%   { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-}
-
-.yt-video-card .yt-video-thumb.loaded::before {
-    animation: none;
-    opacity: 0;
-}
-
-.yt-video-card .yt-video-thumb img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    transition: opacity 0.3s ease, transform 0.2s ease;
-    z-index: 1;
-}
-
-.yt-video-card .yt-video-thumb img.loaded {
-    opacity: 1;
-}
-
-.yt-video-card:hover .yt-video-thumb img.loaded {
-    transform: scale(1.03);
-}
-
-.yt-video-card .yt-video-thumb video {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    background: #000;
-    z-index: 2;
-}
-
-.yt-video-card .yt-video-thumb video.active {
-    opacity: 1;
-}
-
-/* Audio preview overlay (equalizer) */
-.audio-preview-overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    padding-bottom: 14px;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    pointer-events: none;
-    z-index: 3;
-}
-
-.yt-video-thumb.audio-playing .audio-preview-overlay {
-    opacity: 1;
-}
-
-.audio-eq {
-    display: flex;
-    align-items: flex-end;
-    gap: 3px;
-    height: 24px;
-    background: rgba(0,0,0,0.55);
-    padding: 4px 8px;
-    border-radius: 20px;
-}
-
-.audio-eq span {
-    display: block;
-    width: 3px;
-    border-radius: 2px;
-    background: #e61e1e;
-    animation: eq-bar 0.8s ease-in-out infinite;
-}
-
-.audio-eq span:nth-child(1) { height: 6px;  animation-delay: 0s; }
-.audio-eq span:nth-child(2) { height: 14px; animation-delay: 0.15s; }
-.audio-eq span:nth-child(3) { height: 20px; animation-delay: 0.05s; }
-.audio-eq span:nth-child(4) { height: 12px; animation-delay: 0.2s; }
-.audio-eq span:nth-child(5) { height: 8px;  animation-delay: 0.1s; }
-
-@keyframes eq-bar {
-    0%, 100% { transform: scaleY(0.4); }
-    50%       { transform: scaleY(1); }
-}
-
-.yt-video-card .yt-video-duration {
-    position: absolute;
-    bottom: 8px;
-    right: 8px;
-    background: rgba(0,0,0,0.8);
-    color: white;
-    padding: 3px 6px;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 500;
-    z-index: 3;
-}
-
-.yt-video-card .yt-shorts-badge {
-    position: absolute;
-    top: 8px;
-    left: 8px;
-    background: rgba(230, 30, 30, 0.9);
-    color: white;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 11px;
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    z-index: 3;
-}
-
-.yt-video-card .yt-shorts-badge i {
-    font-size: 12px;
-}
-
-.yt-video-card .yt-visibility-badge {
-    position: absolute;
-    bottom: 8px;
-    left: 8px;
-    padding: 3px 7px;
-    border-radius: 4px;
-    font-size: 11px;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    pointer-events: none;
-    z-index: 3;
-}
-
-.yt-video-card .yt-visibility-private {
-    background: rgba(220, 38, 38, 0.88);
-    color: #fff;
-}
-
-.yt-video-card .yt-visibility-unlisted {
-    background: rgba(30, 30, 30, 0.82);
-    color: #facc15;
-    border: 1px solid rgba(250, 204, 21, 0.4);
-}
-
-.yt-video-card .yt-video-info {
-    display: flex;
-    margin-top: 12px;
-    gap: 12px;
-}
-
-.yt-video-card .yt-channel-icon {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background: #555;
-    flex-shrink: 0;
-    overflow: hidden;
-}
-
-.yt-video-card .yt-channel-icon img.loaded {
-    opacity: 1 !important;
-}
-
-.yt-video-card .yt-video-details {
-    flex: 1;
-    min-width: 0;
-}
-
-.yt-video-card .yt-video-title {
-    font-size: 16px;
-    font-weight: 500;
-    color: #fff;
-    margin: 0 0 4px;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    line-height: 1.3;
-}
-
-.yt-video-card .yt-video-title a {
-    color: inherit;
-    text-decoration: none;
-    display: flex;
-    align-items: baseline;
-    gap: 5px;
-}
-.vc-lang-flag {
-    display: inline-block;
-    width: 16px;
-    height: 12px;
-    border-radius: 2px;
-    flex-shrink: 0;
-    vertical-align: baseline;
-    position: relative;
-    top: 1px;
-}
-
-.yt-video-card .yt-channel-icon {
-    text-decoration: none;
-    display: block;
-}
-
-.yt-video-card .yt-channel-name,
-.yt-video-card .yt-video-meta {
-    color: #aaa;
-    font-size: 14px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.yt-video-card a.yt-channel-name {
-    display: block;
-    text-decoration: none;
-}
-.yt-video-card a.yt-channel-name:hover { color: #fff; }
-
-/* Type label in meta row */
-.yt-type-label {
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.4px;
-}
-.yt-type-music   { color: #c084fc; }
-.yt-type-match   { color: #60a5fa; }
-.yt-type-generic { color: #f87171; }
-
-/* More button — visible only on hover (touch devices always show it) */
-.yt-video-card .yt-more-btn {
-    background: transparent;
-    border: none;
-    color: #fff;
-    cursor: pointer;
-    padding: 4px;
-    border-radius: 50%;
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background 0.2s, opacity 0.15s;
-    flex-shrink: 0;
-}
-@media (hover: hover) {
-    .yt-video-card .yt-more-btn { opacity: 0; }
-    .yt-video-card:hover .yt-more-btn,
-    .yt-video-card .yt-more-btn:focus,
-    .yt-video-card .yt-more-btn[aria-expanded="true"] { opacity: 1; }
-}
-.yt-video-card .yt-more-btn:hover {
-    background: #3f3f3f;
-}
-
-/* Dropdown menu styles - use Bootstrap defaults */
-.yt-video-card .dropdown-menu-dark {
-    background: #282828;
-    border: 1px solid #3f3f3f;
-    border-radius: 12px;
-    padding: 8px 0;
-    min-width: 200px;
-}
-
-.yt-video-card .dropdown-item {
-    color: #fff;
-    padding: 10px 16px;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    gap: 16px;
-}
-
-.yt-video-card .dropdown-item:hover {
-    background: #3f3f3f;
-    color: #fff;
-}
-
-.yt-video-card .dropdown-item.text-danger {
-    color: #ef4444 !important;
-}
-
-.yt-video-card .dropdown-item.text-danger:hover {
-    background: #3f3f3f;
-    color: #ef4444 !important;
-}
-
-.yt-video-card .dropdown-item i {
-    width: 20px;
-    text-align: center;
-}
-
-.yt-video-card .dropdown-divider {
-    border-color: #3f3f3f;
-    margin: 8px 0;
-}
-
-/* Small size styles */
-.yt-video-card-sm .yt-video-thumb {
-    border-radius: 8px;
-}
-
-.yt-video-card-sm .yt-video-info {
-    margin-top: 8px;
-    gap: 8px;
-}
-
-.yt-video-card-sm .yt-channel-icon {
-    width: 28px;
-    height: 28px;
-}
-
-.yt-video-card-sm .yt-video-title {
-    font-size: 13px;
-}
-
-.yt-video-card-sm .yt-channel-name,
-.yt-video-card-sm .yt-video-meta {
-    font-size: 12px;
-}
-
-.yt-video-card-sm .yt-more-btn {
-    width: 24px;
-    height: 24px;
-}
-
-/* Cute Edit Modal Styles */
-.cute-edit-modal {
-    max-width: 380px;
-    margin: auto;
-}
-
-.cute-edit-content {
-    background: linear-gradient(145deg, #1f1f1f 0%, #2a2a2a 100%);
-    border: 1px solid #3a3a3a;
-    border-radius: 20px;
-    overflow: hidden;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-}
-
-.cute-edit-header {
-    background: linear-gradient(135deg, #ff6b8a 0%, #ff8fa3 100%);
-    padding: 16px 20px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    position: relative;
-}
-
-.cute-edit-icon {
-    font-size: 20px;
-}
-
-.cute-edit-header h5 {
-    margin: 0;
-    color: white;
-    font-size: 16px;
-    font-weight: 600;
-}
-
-.btn-close-cute {
-    position: absolute;
-    right: 12px;
-    background: rgba(255,255,255,0.2);
-    border: none;
-    color: white;
-    width: 26px;
-    height: 26px;
-    border-radius: 50%;
-    font-size: 18px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background 0.2s;
-}
-
-.btn-close-cute:hover {
-    background: rgba(255,255,255,0.3);
-}
-
-.cute-edit-body {
-    padding: 20px;
-}
-
-.cute-form-group {
-    margin-bottom: 16px;
-}
-
-.cute-form-group label {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    color: #ccc;
-    font-size: 13px;
-    margin-bottom: 8px;
-    font-weight: 500;
-}
-
-.cute-form-group label i {
-    color: #ff6b8a;
-    font-size: 14px;
-}
-
-.cute-input, .cute-textarea {
-    width: 100%;
-    background: #151515;
-    border: 1px solid #333;
-    border-radius: 10px;
-    padding: 10px 12px;
-    color: #fff;
-    font-size: 13px;
-    transition: all 0.2s;
-}
-
-.cute-input:focus, .cute-textarea:focus {
-    outline: none;
-    border-color: #ff6b8a;
-    box-shadow: 0 0 0 3px rgba(255, 107, 138, 0.15);
-}
-
-.cute-input::placeholder, .cute-textarea::placeholder {
-    color: #555;
-}
-
-/* Type Options */
-.cute-type-options, .cute-privacy-options {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-}
-
-.cute-type-option, .cute-privacy-option {
-    flex: 1;
-    min-width: 80px;
-    cursor: pointer;
-}
-
-.cute-type-option input, .cute-privacy-option input {
-    display: none;
-}
-
-.cute-type-option span, .cute-privacy-option span {
-    display: block;
-    padding: 8px 10px;
-    background: #151515;
-    border: 1px solid #333;
-    border-radius: 8px;
-    font-size: 12px;
-    color: #aaa;
-    text-align: center;
-    transition: all 0.2s;
-}
-
-.cute-type-option:hover span, .cute-privacy-option:hover span {
-    border-color: #555;
-    background: #1a1a1a;
-}
-
-.cute-type-option.active span, .cute-privacy-option.active span {
-    background: rgba(255, 107, 138, 0.15);
-    border-color: #ff6b8a;
-    color: #ff6b8a;
-}
-
-/* Shorts Toggle in Edit Modal */
-.cute-shorts-toggle {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    margin-top: 8px;
-}
-
-.cute-shorts-toggle input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.cute-shorts-slider {
-    position: relative;
-    width: 44px;
-    height: 24px;
-    background-color: #333;
-    border-radius: 12px;
-    transition: 0.3s;
-    margin-right: 10px;
-}
-
-.cute-shorts-slider:before {
-    position: absolute;
-    content: "";
-    height: 18px;
-    width: 18px;
-    left: 3px;
-    bottom: 3px;
-    background-color: white;
-    border-radius: 50%;
-    transition: 0.3s;
-}
-
-.cute-shorts-toggle input:checked + .cute-shorts-slider {
-    background-color: #e63030;
-}
-
-.cute-shorts-toggle input:checked + .cute-shorts-slider:before {
-    transform: translateX(20px);
-}
-
-.cute-shorts-label {
-    color: #aaa;
-    font-size: 12px;
-}
-
-/* Thumbnail Upload */
-.cute-thumbnail-upload {
-    border: 2px dashed #444;
-    border-radius: 10px;
-    padding: 16px;
-    text-align: center;
-    cursor: pointer;
-    transition: all 0.2s;
-    background: #151515;
-}
-
-.cute-thumbnail-upload:hover {
-    border-color: #ff6b8a;
-    background: rgba(255, 107, 138, 0.05);
-}
-
-.cute-thumbnail-preview {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    color: #666;
-}
-
-.cute-thumbnail-preview i {
-    font-size: 24px;
-    color: #ff6b8a;
-}
-
-.cute-thumbnail-preview span {
-    font-size: 12px;
-}
-
-/* Status */
-.cute-status {
-    padding: 10px;
-    border-radius: 8px;
-    font-size: 13px;
-    margin-bottom: 16px;
-    display: none;
-}
-
-.cute-status.success {
-    display: block;
-    background: rgba(34, 197, 94, 0.15);
-    color: #4ade80;
-    border: 1px solid rgba(34, 197, 94, 0.3);
-}
-
-.cute-status.error {
-    display: block;
-    background: rgba(239, 68, 68, 0.15);
-    color: #f87171;
-    border: 1px solid rgba(239, 68, 68, 0.3);
-}
-
-/* Actions */
-.cute-edit-actions {
-    display: flex;
-    gap: 10px;
-    justify-content: flex-end;
-}
-
-.cute-btn-cancel, .cute-btn-save {
-    padding: 10px 20px;
-    border-radius: 10px;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s;
-    border: none;
-}
-
-.cute-btn-cancel {
-    background: #333;
-    color: #aaa;
-}
-
-.cute-btn-cancel:hover {
-    background: #444;
-    color: #fff;
-}
-
-.cute-btn-save {
-    background: linear-gradient(135deg, #ff6b8a 0%, #ff8fa3 100%);
-    color: white;
-    box-shadow: 0 4px 15px rgba(255, 107, 138, 0.3);
-}
-
-.cute-btn-save:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 6px 20px rgba(255, 107, 138, 0.4);
-}
-
-.cute-btn-save:disabled {
-    background: #444;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
-}
-
-@media (max-width: 420px) {
-    .cute-edit-modal {
-        max-width: 320px;
-        margin: 10px;
-    }
-
-    .cute-type-options, .cute-privacy-options {
-        flex-direction: column;
-    }
-}
-</style>
-@endonce
+@include('components.partials.card-styles')
 
 @once
 <script>