@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu72xKOzY.woff2)format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu5mxKOzY.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7mxKOzY.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4WxKOzY.woff2)format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7WxKOzY.woff2)format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7GxKOzY.woff2)format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
 html{overflow:hidden;scrollbar-width:thin;} body{-webkit-font-smoothing:antialiased;position:relative;top:0 !important;margin:0;padding:0!important;width:100%;scrollbar-width: thin;} a{text-decoration:none}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu72xKOzY.woff2)format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu5mxKOzY.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7mxKOzY.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4WxKOzY.woff2)format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7WxKOzY.woff2)format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7GxKOzY.woff2)format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
 html{overflow:hidden;scrollbar-width:thin;} body{-webkit-font-smoothing:antialiased;position:relative;top:0 !important;margin:0;padding:0!important;width:100%;scrollbar-width: thin;} a{text-decoration:none}
/* --- Your Custom CSS goes here --- */
/* Base Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'SolaimanLipi', Arial, sans-serif;
background: #f0f0f0;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
/* Main Content */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
}
/* Player Container */
.player-container {
background: black;
width: 100%;
position: relative;
flex-shrink: 0;
}
.video-container {
width: 100%;
position: relative;
background: #000;
}
/* Channel Section */
.channel-section {
flex: 1;
display: flex;
flex-direction: column;
background: white;
overflow: hidden;
width: 100%;
max-height: 400px;
}
/* Channel Tabs */
.channel-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: #f8f9fa;
border-bottom: 1px solid #eee;
padding: 8px;
gap: 8px;
position: sticky;
top: 0;
z-index: 10;
}
.tab-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px;
border: none;
background: none;
cursor: pointer;
border-radius: 8px;
color: #666;
font-size: 14px;
transition: all 0.3s ease;
white-space: nowrap;
}
.tab-btn.active {
background: #007bff;
color: white;
}
/* Search Container */
.search-container {
padding: 8px;
background: #fff;
border-bottom: 1px solid #eee;
}
.search-input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
}
/* Channel Grid */
.channel-grid {
padding: 0;
overflow-y: auto;
flex: 1;
max-height: calc(400px - 100px);
}
/* Channel Card */
.channel-card {
background: #fff;
padding: 12px;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 15px;
border-bottom: 1px solid #eee;
}
.channel-card:hover {
background: #f8f9fa;
}
.channel-image {
width: 50px;
height: 50px;
flex-shrink: 0;
}
.channel-image img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 8px;
}
.channel-info {
flex: 1;
min-width: 0;
}
.channel-name {
font-weight: bold;
font-size: 14px;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.channel-category {
font-size: 12px;
color: #666;
}
/* Action Buttons */
.action-buttons {
display: flex;
gap: 8px;
}
.favorite-btn {
border: none;
background: #f0f0f0;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #666;
font-size: 16px;
transition: all 0.2s ease;
}
.favorite-btn.active {
color: #dc3545;
background: #ffe6e6;
}
/* Mobile View (Default) */
@media (max-width: 766px) {
.player-container {
height: 33vh;
}
.video-container {
height: 100%;
}
.channel-section {
max-height: 67vh;
}
.channel-grid {
max-height: calc(67vh - 100px);
}
}
/* Mobile View (Default) */
@media (max-width: 767px) {
.player-container {
height: 33vh;
}
.video-container {
height: 100%;
}
.channel-section {
max-height: 67vh;
}
.channel-grid {
max-height: calc(67vh - 100px);
}
}
/* Mobile View (Default) */
@media (max-width: 768px) {
.player-container {
height: 33vh;
}
.video-container {
height: 100%;
}
.channel-section {
max-height: 67vh;
}
.channel-grid {
max-height: calc(67vh - 100px);
}
}
/* Desktop View */
@media (min-width: 769px) {
.main-content {
flex-direction: row;
height: 100vh;
}
.player-container {
flex: 1;
height: 100vh;
max-width: 50%;
}
.video-container {
height: 100%;
}
.channel-section {
flex: 1;
height: 100vh;
max-height: none;
max-width: 50%;
}
.channel-grid {
max-height: calc(100vh - 110px);
}
}
/* Utility Classes */
.loading {
text-align: center;
padding: 20px;
}
.loading:after {
content: "";
display: inline-block;
width: 30px;
height: 30px;
border: 3px solid #f3f3f3;
border-top: 3px solid #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.error-message {
padding: 20px;
text-align: center;
color: #666;
}
.no-favorites {
padding: 20px;
text-align: center;
color: #666;
}
/* Animations */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Hide Blogger Default Elements */
.blog-posts.hfeed {
display: none;
}
.widget.Blog {
display: none;
}
/* PWA Support */
@media (display-mode: standalone) {
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
}