@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
:root {
--primary: #ff0000;
--primary-dark: #cc0000;
--secondary: #282828;
--light-gray: #f9f9f9;
--medium-gray: #e0e0e0;
--dark-gray: #606060;
--text-dark: #212121;
--text-medium: #424242;
--text-light: #707070;
--trend-up: #4CAF50;
--trend-down: #f44336;
--trend-neutral: #FFC107;
--high-confidence: #28a745;
--medium-confidence: #ffc107;
--low-confidence: #dc3545;
--card-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
--border-radius: 8px;
--positive-sentiment: #e8f5e9;
--neutral-sentiment: #fff8e1;
--negative-sentiment: #ffebee;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', Arial, sans-serif; }
body{background:#fff; color:var(--text-dark); line-height:1.6; }
.fullscreen-container{width:100vw; height:100vh; overflow:hidden; background-blend-mode:screen,overlay,color-burn,color-dodge,normal; background:linear-gradient(160deg,#ff8181 9%,#595959),radial-gradient(100% 100% at 30% 10%,#f77676 0,#260000 100%),linear-gradient(#0ff,#fff),radial-gradient(100% 100% at 70% 0,red 0,#00d2b8 100%),linear-gradient(280deg,#dbff00,#30f); position:relative; }
.scrollable-content{height:100%; overflow-y:auto; padding:20px; box-sizing:border-box;  position:relative; }
.container{max-width:1200px; margin:0 auto; padding:20px; }
header{text-align:center; margin-bottom:20px; }
h1, h1 a{ text-decoration:none; font-size:4.5rem; margin:10px 0 15px; color:#222222; font-weight:400;  line-height:50px;  text-transform:uppercase; font-family:"Space Grotesk",sans-serif; }
h2{font-size:20px; margin-bottom:10px; color:#444444;  font-weight:400;  }
h3{font-size:1.1rem; margin-bottom:10px; color:var(--primary); }
.selcon { position:absolute;  right:10px;  top:10px;  font-size:12px;  }
.description{font-size:1.1rem; color:var(--text-medium); margin-bottom:20px; }
.controls{ margin-bottom:30px; align-items:center; }
.country-selector{position:relative; width:400px; margin:0 auto; }
.custom-select-wrapper{position:relative; }
.custom-select-trigger{padding:15px 30px; border-radius:50px; background-color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:space-between; transition:all .3s; }
.custom-select-trigger:hover{ box-shadow: rgba(238, 68, 238, 0.9) 0px 7px 29px 0px; }
.custom-select-trigger-flag{width:20px; height:15px; margin-right:10px; object-fit:cover; border-radius:2px; }
.custom-select-trigger-arrow{transition:transform .3s; }
.custom-select{display:none; position:absolute; top:100%; left:0; width:100%; max-height:300px; overflow-y:auto; background-color:#fff; border:1px solid var(--medium-gray); border-radius:var(--border-radius); z-index:100; box-shadow:0 5px 15px #0000001a; }
.custom-select-option{padding:10px 15px; cursor:pointer; display:flex; align-items:center; transition:background-color .2s; }
.custom-select-option:hover{background-color:#f5f5f5; }
.custom-select-option.selected{background-color:#f0f0f0; }
.custom-select-flag{width:20px; height:15px; margin-right:10px; object-fit:cover; border-radius:2px; }
.custom-select-wrapper.open .custom-select{display:block; }
.custom-select-wrapper.open .custom-select-trigger-arrow{transform:rotate(180deg); }
.categories{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:20px 0 0 0; }
.category-radio{display:none; }
.category-label{padding:8px 25px; background-color:#fff; border-radius:20px; cursor:pointer; transition:all .3s; font-size:.9rem; }
.category-label:hover{ box-shadow: rgba(238, 68, 238, 0.9) 0px 7px 20px 0px; }
.category-radio:checked + .category-label{ background-color:var(--primary); color:#fff;  }
.videos-container{display:flex; flex-direction:column; gap:20px; margin-bottom:40px; }
.video-card{background-color:#fff; border-radius:var(--border-radius); overflow:hidden; box-shadow:var(--card-shadow); transition:transform 0.3s,box-shadow .3s; display:flex; padding:15px; gap:20px; position:relative; }
.video-card:hover{transform:translateY(-5px); box-shadow:0 10px 20px #0000006a; }
.video-thumbnail{position:relative; width:270px; min-width:240px; overflow:hidden; border-radius:4px; }
.video-thumbnail img{width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.video-card:hover .video-thumbnail img{transform:scale(1.05); }
.video-info{flex:1; }
.channel-subscribers { font-size:.8rem; color:var(--text-light); }
.video-title{font-size:1.3rem; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.video-title a{color:var(--text-dark); text-decoration:none; transition:color .3s; }
.video-title a:hover{color:var(--primary); }
.channel-info{display:flex; align-items:center; margin-bottom:0px; flex-wrap:wrap; gap:5px; }
.channel-name{font-size:18px; color:var(--text-medium); text-decoration:none; transition:color .3s; }
.channel-name:hover{color:var(--primary); }
.infobox { display: flex; }
.box { }
.boxr { padding:0 0 0 10px; }
.subscriber-count{font-size:.8rem; color:var(--text-light); }
.video-stats{display:flex; gap:20px; margin-bottom:0px; flex-wrap:wrap; }
.video-stat{display:flex; align-items:center; gap:5px; font-size:.8rem; color:var(--text-light); }
.confidence-level{display:inline-flex; align-items:center; gap:5px; }
.confidence-icon{width:16px; height:16px; }
.comment-section{background-color:#f5f5f5; border-radius:6px; padding:10px; margin-top:10px; }
.comment-header{display:flex; align-items:center; margin-bottom:5px; }
.comment-author{font-weight:500; margin-right:8px; font-size:.85rem; }
.comment-text{font-size:.9rem; line-height:1.4; }
.comparison-badges{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.comparison-badge{background-color:#f0f0f0; padding:3px 8px; border-radius:12px; font-size:.75rem; display:flex; align-items:center; }
.comparison-badge img{width:14px; height:10px; margin-right:4px; border-radius:2px; }
.trend-velocity{display:flex; align-items:center; gap:6px; font-size:.8rem; margin:8px 0; }
.trend-icon{font-size:1rem; }
.velocity-up{color:var(--trend-up); }
.velocity-down{color:var(--trend-down); }
.velocity-neutral{color:var(--trend-neutral); }
.comment-pulse{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:.8rem; }
.pulse-visualizer{width:100px; height:12px; background-color:#f0f0f0; border-radius:6px; overflow:hidden; position:relative; }
.pulse-bar{position:absolute; left:0; top:0; bottom:0; width:0; background-color:#4CAF50; animation:pulse 1.5s infinite; }
@keyframes pulse { 0%{opacity:.7; } 50%{opacity:1; } 100%{opacity:.7; } }
.sentiment{padding:2px 6px; border-radius:10px; font-size:.7rem; }
.positive{background-color:var(--positive-sentiment); color:#2E7D32; }
.neutral{background-color:var(--neutral-sentiment); color:#F57F17; }
.negative{background-color:var(--negative-sentiment); color:#C62828; }
.loading,.error{text-align:center; padding:50px; font-size:1.2rem; color:var(--text-medium); }
.error{color:#d32f2f; }
.spinner{width:40px; height:40px; margin:0 auto 20px; border:4px solid #ff00001a; border-left-color:var(--primary); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to{transform:rotate(360deg); } }
.load-more{display:block; margin:0 auto 40px; padding:12px 25px; background-color:var(--primary); color:#fff; border:none; border-radius:var(--border-radius); font-size:1rem; cursor:pointer; transition:background-color .3s; }
.load-more:hover{background-color:var(--primary-dark); }
.load-more:disabled{background-color:var(--medium-gray); cursor:not-allowed; }
.back-to-top{position:fixed; bottom:30px; right:30px; width:50px; height:50px; background-color:var(--primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; visibility:hidden; transition:all .3s; box-shadow:0 2px 10px #0003; z-index:100; }
.back-to-top.visible{opacity:1; visibility:visible; }
.back-to-top:hover{background-color:var(--primary-dark); transform:translateY(-3px); }
.video-badges{position:absolute; bottom:10px; right:17px; display:flex; gap:5px; align-items:flex-end; z-index:2; }
.video-badge{ color:var(--text-light); padding:4px 8px; font-size:.8rem;  }
.prediction-badge{display:flex; align-items:center; gap:4px; }
.prediction-badge.high{background-color:#28a745cc; }
.prediction-badge.medium{background-color:#ffc107cc; }
.prediction-badge.low{background-color:#dc3545cc; }
.prediction-icon{width:40px; height:25px; display:flex; align-items:center; justify-content:center; color:#888888; }
.prediction-icon svg{width:100%; height:100%; }
.footer-content { margin:0 0 10px 0; }
.footer-content p { margin:0 0 25px 0; font-size:15px; }
@media (max-width: 900px) {
.video-card{flex-direction:column; }
.video-thumbnail{width:100%; height:auto; aspect-ratio:16/9; }

}
@media (max-width: 600px) {
.controls{flex-direction:column; align-items:stretch; }
.country-selector{width:100%; }
.video-stats{flex-wrap:wrap; gap:10px; }

}
.prediction-badge{  }
.prediction-icon{font-size:.9rem; }
.high-confidence{color:#4CAF50; font-size:22px; font-weight:300; }
.medium-confidence{color:#FFC107; font-size:22px; font-weight:300; }
.low-confidence{color:#f44336; font-size:22px; font-weight:300; }
.creator-spotlight { background: #7e7e7e; border-radius: 8px; padding: 12px; display: flex; align-items: center; gap: 12px; width: 100%; }
.creator-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 4px solid #000000; }
.creator-info { display: flex; justify-content: space-between; align-items: center; flex: 1; }
.creator-info-text { display: flex; flex-direction: column; align-items: flex-start; }
.creator-info h4 { margin: 0 0 4px; font-size: 20px; line-height:20px; color:#ffffff; }
.creator-info p { margin: 0; font-size: .85rem; color:#ffffff; }
.creator-buttons { display: flex; flex-direction: row; gap: 10px; align-items: center; }
.subscribe-btn { background-color: var(--primary); color: #fff; border: none; border-radius: 4px; padding: 6px 15px; font-size: .8rem; margin-top: 6px; cursor: pointer; transition: background-color .3s; }
.subscribe-btn:hover { background-color: var(--primary-dark); }
.channel-btn { background-color:#535353; color: #fff; border: none; border-radius: 4px; padding: 4px 15px; font-size: .8rem; margin-top: 6px; cursor: pointer; transition: background-color .3s; text-decoration:none; }
.channel-btn:hover { background-color: #797979; }
footer { text-align:center; color:#222222; padding:25px 0; }
nav { text-align:center; color:#222222; padding:0 10px; }
.copy { padding:20px 0 0 0; display:block;}
.sub h3 { font-size:24px !important; margin:20px 0 5px 0 !important; color:var(--text-dark) !important; font-weight:400 !important; }
.sub h2 { margin:25px 0 10px 0; }
.hsub { padding-bottom:60px; border-bottom:5px solid #ffcfbc; margin-bottom:60px; }
.sub-foot { padding-top:60px; border-top:5px solid #9ae9e9; margin-top:60px; }
ul { margin:10px 0 0 30px; padding:0 0 0 0; }
.footer-content h4 { }
.sentiment-tracker-compact { width: 100%; margin: 11px 0; font-size: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sentiment-bar-combined { display: flex; width: 100px; height: 10px; border-radius: 5px; overflow: hidden; background: #f0f0f0; margin: 0; }
.sentiment-labels-compact { display: flex; justify-content: flex-start; align-items: center; font-size: 12px; gap: 10px; white-space: nowrap; }
.sentiment-bar-combined > div { height: 100%; transition: width 0.5s ease; }
.sentiment-bar-combined .positive { background: #4CAF50; border-radius: 5px 0 0 5px; }
.sentiment-bar-combined .neutral { background: #FFC107; }
.sentiment-bar-combined .negative { background: #F44336; border-radius: 0 5px 5px 0; }
.sentiment-labels-compact { display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap:10px; }
.sentiment-labels-compact .sentiment-label, .sentiment-labels-compact .comment-count { display: inline-flex; align-items: center; color: #555; }
.sentiment-icon { width: 16px; height: 16px; margin-right: 4px; object-fit: contain; }
.cslab { padding:10px 0 0 30px; }
.sentiment-labels-compact .sentiment-label[class*="positive"] { color: #4CAF50; }
.sentiment-labels-compact .sentiment-label[class*="neutral"] { color: #FFC107; }
.sentiment-labels-compact .sentiment-label[class*="negative"] { color: #F44336; }
.sentiment-labels-compact .comment-count { color: #2196F3; }
.sentiment-labels-compact span:hover { transform: scale(1.05); transition: transform 0.2s ease; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
.ico-positive { background:url(assets/images/sentiment-positive.png) center left no-repeat; padding:0 0 0 20px; }
.ico-neutral { background:url(assets/images/sentiment-neutral.png) center left no-repeat; padding:0 0 0 20px; }
.ico-negative { background:url(assets/images/sentiment-negative.png) center left no-repeat; padding:0 0 0 20px; }
.ico-comments { background:url(assets/images/comment-icon.png) center left no-repeat; padding:0 0 0 20px !important; }
.cslab { font-size: .8rem; color: var(--text-dark); }
@media (min-width:240px) and (max-width:766px){
.selcon { display:none; }
h1{font-size:44px; }
.scrollable-content { padding:0; }
.video-badges{ position:static; flex-direction:row; margin-bottom:8px; margin:0 auto; }
.prediction-badge-x { display: flex; align-items: center; }
.prediction-icon { order: 2; }
.low-confidence, .high-confidence, .medium-confidence  { order: 1; padding-right:4px; }
.video-card { gap: 7px; }
.video-title { margin-top:10px; }
.infobox { display:inherit; }
.boxr { padding: 0 0 0 0; }
.video-stats { margin: 15px 0 0 0; }
h1, h1 a { font-size: 2.8rem; }
.video-title { font-size: 1.1rem; }
.creator-spotlight { display: block; text-align:center; }
.creator-info, .creator-info-text, .creator-buttons { display: block; text-align:center; }
.cslab { padding:0; }
.sentiment-tracker-compact { flex-direction: column;  align-items: flex-start; }
.sentiment-bar-combined { margin-bottom: 5px; width:100%;  }
.sentiment-labels-compact {flex-wrap: wrap; gap: 5px; margin:0 auto; text-align:center; }
.sentiment-labels-compact .comment-count { margin-left: auto; }


}