:root {
--sgr-bg: #ffffff;
--sgr-text: #333333;
--sgr-star: #f4b400;
--sgr-radius: 8px;
--sgr-shadow: 0 0px 0px rgba(0,0,0,0.01);
--sgr-font: 'Gilroy', 'Segoe UI', system-ui, sans-serif;
} .oyc-carousel { padding: 20px 0; }
.oyc-video-card {
display: block;
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
text-decoration: none;
}
.oyc-video-card:hover { transform: translateY(-5px); }
.oyc-video-card img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.oyc-normal-carousel .oyc-video-card img { aspect-ratio: 16 / 9; }
.oyc-shorts-carousel .oyc-video-card img { aspect-ratio: 9 / 16; }
.oyc-shorts-badge {
position: absolute;
top: 12px;
right: 12px;
z-index: 5;
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
pointer-events: none;
}
.oyc-shorts-carousel .oyc-play-button { z-index: 6; }
.oyc-play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent !important; 
border-radius: 0 !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
opacity: 0; 
transition: opacity 0.3s ease;
z-index: 10;
}
.oyc-video-card:hover .oyc-play-button { opacity: 1; }
.oyc-carousel .swiper-button-next, 
.oyc-carousel .swiper-button-prev { color: #ff0000; } #oyc-video-modal {
display: none;
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
z-index: 999999;
align-items: center;
justify-content: center;
}
#oyc-video-modal.oyc-show { display: flex; }
.oyc-modal-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.9);
cursor: pointer;
}
.oyc-modal-content {
position: relative;
width: 90%;
z-index: 1000000;
}
.oyc-modal-close {
position: absolute;
top: -40px; 
right: 0;
color: white; 
font-size: 35px; 
cursor: pointer;
font-family: Arial, sans-serif;
}
.oyc-modal-close:hover { color: #ff0000; }
.oyc-modal-iframe-container {
position: relative;
height: 0;
overflow: hidden;
background: #000;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.oyc-modal-iframe-container iframe {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
}
#oyc-video-modal.oyc-modal-normal .oyc-modal-content { max-width: 900px !important; }
#oyc-video-modal.oyc-modal-normal .oyc-modal-iframe-container { padding-bottom: 56.25% !important; }
#oyc-video-modal.oyc-modal-shorts .oyc-modal-content { max-width: 400px !important; width: 90% !important; }
#oyc-video-modal.oyc-modal-shorts .oyc-modal-iframe-container { padding-bottom: 177.77% !important; } .sgr-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
padding: 10px;
} .sgr-swiper { 
padding: 20px 0px 50px 0px !important; position: relative;
overflow: hidden !important; } .sgr-swiper .swiper-wrapper {
align-items: stretch !important; }
.sgr-swiper .swiper-slide {
height: auto !important; display: flex !important;
} .sgr-card {
background: var(--sgr-bg);
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
border: 1px solid #eeeeee;
font-family: var(--sgr-font);
position: relative;
width: 100% !important;
height: 100% !important; display: flex !important;
flex-direction: column;
transition: transform 0.3s ease;
box-sizing: border-box; }
.sgr-card:hover { transform: translateY(-5px); }
.sgr-header { display: flex; align-items: center; margin-bottom: 15px; }
.sgr-avatar { width: 42px; height: 42px; border-radius: 50%; margin-right: 12px; object-fit: cover; }
.sgr-author { font-weight: bold; font-size: 15px; color: var(--sgr-text); }
.sgr-date { font-size: 12px; color: #888; margin-top: 2px; }
.sgr-rating { color: var(--sgr-star); font-size: 16px; margin-bottom: 12px; letter-spacing: 1px; }
.sgr-source-icon { position: absolute; top: 20px; right: 20px; opacity: 0.9; } .sgr-body { 
font-size: 14px; 
line-height: 1.6; 
color: #555; 
flex-grow: 1 !important; } .sgr-swiper .swiper-button-next, 
.sgr-swiper .swiper-button-prev {
background: #ffffff !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
color: #333333 !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin-top: -15px !important;
z-index: 10 !important;
}
.sgr-swiper .swiper-button-next:after, 
.sgr-swiper .swiper-button-prev:after {
font-size: 16px !important;
font-weight: bold !important;
}
.sgr-swiper .swiper-button-prev { left: 10px !important; }
.sgr-swiper .swiper-button-next { right: 10px !important; }
.sgr-swiper .swiper-pagination-bullet-active {
background: #4285F4 !important; 
} .sgr-badge-container { display: inline-flex; }
.sgr-badge-content {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: var(--sgr-radius);
padding: 12px 20px;
display: flex;
align-items: stretch;
gap: 0;
box-shadow: var(--sgr-shadow);
font-family: var(--sgr-font);
}
.sgr-badge-left { 
display: flex; flex-direction: column; align-items: center; 
justify-content: center; padding-right: 25px; text-align: center;
}
.sgr-badge-text { 
font-size: 14px; font-weight: 800; color: #333; 
letter-spacing: 0.5px; display: block; margin-bottom: 4px; text-transform: uppercase;
}
.sgr-badge-stars { color: var(--sgr-star); font-size: 20px; line-height: 1; }
.sgr-badge-right { 
border-left: 1px solid #e0e0e0; padding-left: 25px; display: flex; 
flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.sgr-badge-count { font-size: 13px; color: #666; margin-bottom: 4px; font-weight: 400; }
.sgr-badge-count strong { color: #1C244B; font-weight: 800; font-size: 14px; }
.sgr-google-logo-text { 
display: flex; align-items: center; justify-content: center; 
gap: 6px; font-weight: 600; font-size: 16px; color: #444; 
}