:root{--green:#6ab344;--black:#222;--border:#e5e5e5;--gray:#f5f5f5}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial, Helvetica, sans-serif;background:#f1f1f1;color:#333;line-height:1.5}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 15px}

/* TOP */
.top-bar{background:#2c2c2c;color:#aaa;font-size:11px;padding:6px 0}
.top-bar .container{display:flex;justify-content:space-between;align-items:center}
.date-badge{background:var(--green);color:#fff;padding:4px 8px;font-weight:bold}
.top-nav a{margin-left:12px;color:#aaa}
.top-right a{margin-left:10px;color:#aaa}

/* HEADER */
.main-header{background:#fff;padding:25px 0;border-bottom:1px solid var(--border)}
.logo h1{font-size:36px;color:#c0392b}.logo-t{color:#8e44ad;font-weight:bold}
.logo p{font-size:11px;color:#888;margin-top:4px}

/* NAV */
.main-nav{background:#fff;border-bottom:3px solid var(--green);position:sticky;top:0;z-index:10}
.main-nav .container{display:flex;justify-content:space-between;align-items:center}
.nav-left{display:flex;align-items:center}
.nav-left a{padding:14px 12px;font-size:12px;font-weight:bold;color:#333}
.home-icon{background:var(--green);color:#fff !important}
.search-wrap{position:relative;display:flex;align-items:center}
#searchInput{padding:8px 12px;border:1px solid var(--border);border-right:none;width:200px;font-size:12px;outline:none;background:#f9f9f9}
#searchInput:focus{background:#fff;border-color:var(--green)}
.search-btn{background:var(--green);border:none;color:#fff;padding:9px 14px;cursor:pointer}
.search-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border);border-top:3px solid var(--green);z-index:99;max-height:350px;overflow:auto;display:none;box-shadow:0 5px 15px rgba(0,0,0,.15)}
.search-dropdown.active{display:block}
.search-dropdown .s-item{display:flex;gap:8px;padding:8px;border-bottom:1px solid #eee;cursor:pointer}
.search-dropdown .s-item:hover{background:#f5f5f5}
.search-dropdown .s-item img{width:45px;height:35px;object-fit:cover;flex-shrink:0}
.search-dropdown .s-item h5{font-size:11px;line-height:1.2}

/* MAIN */
.main-wrapper{padding:15px 0}
.main-wrapper .container{display:flex;gap:20px}
.content-area{flex:2.2;background:#fff;padding:15px;border:1px solid var(--border)}
.sidebar{flex:0.9;display:flex;flex-direction:column;gap:15px}

/* HERO */
.hero-section{display:flex;gap:15px;margin-bottom:20px;min-height:300px}
.hero-left{flex:1.4}.hero-right{flex:1;display:flex;flex-direction:column;gap:15px}
.card{position:relative;overflow:hidden;background:#000;color:#fff;cursor:pointer}
.big-card{height:350px}.small-card{height:165px}.tiny-card{height:170px}
.card img{width:100%;height:100%;object-fit:cover;opacity:.85}
.overlay{position:absolute;inset:0}
.orange{background:linear-gradient(45deg,rgba(255,140,0,.9),rgba(255,69,0,.6))}
.purple-ov{background:rgba(80,40,120,.7)}.blue-ov{background:rgba(40,120,180,.7)}.green-ov{background:rgba(60,180,100,.7)}
.card-content{position:absolute;bottom:0;left:0;right:0;padding:12px;z-index:2}
.cat-badge{background:var(--green);color:#fff;font-size:9px;padding:3px 6px;display:inline-block;margin-bottom:5px;cursor:pointer}
.card-content h2{font-size:18px}.card-content h3{font-size:14px}.card-content h4{font-size:12px}
.meta{font-size:10px;margin-top:4px;opacity:.9}

/* TABS */
.tabs-header{display:flex;border-bottom:3px solid var(--green);margin:20px 0 15px}
.tab-btn{flex:1;background:#222;color:#fff;border:none;padding:8px;font-size:11px;cursor:pointer}
.tab-btn.active{background:var(--green)}
.posts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.post-card{border:1px solid var(--border);cursor:pointer;transition:.2s;background:#fff}
.post-card:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.post-card img{height:180px;width:100%;object-fit:cover}
.post-card-body{padding:10px}
.post-card-body h4{font-size:13px;height:34px;overflow:hidden;margin:5px 0}
.post-card-body p{font-size:11px;color:#666;height:32px;overflow:hidden}
.post-card-body .meta{font-size:10px;color:#999}

/* LIST */
.list-section{margin-top:20px;border-top:3px solid var(--green);padding-top:15px}
.list-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer}
.list-img{width:160px;flex-shrink:0}.list-img img{height:100px;object-fit:cover}
.list-text h4{font-size:14px}

/* FILTER INFO */
.filter-info{background:#fff;border-left:4px solid var(--green);padding:10px 15px;margin-bottom:15px;font-size:13px;display:flex;align-items:center;justify-content:space-between}
.clear-btn{background:#222;color:#fff;border:none;padding:4px 10px;font-size:11px;cursor:pointer}

/* SIDEBAR */
.widget{background:#fff;border:1px solid var(--border);border-top:3px solid var(--green)}
.widget-title{padding:10px;font-size:12px;border-bottom:1px solid var(--border);font-weight:bold}
.pop-item{display:flex;gap:8px;padding:8px;border-bottom:1px solid var(--border);cursor:pointer}
.pop-item img{width:60px;height:45px;object-fit:cover;flex-shrink:0}
.pop-item h5{font-size:11px}
.tags{display:flex;flex-wrap:wrap;gap:6px;padding:10px}
.tags a{background:#222;color:#fff;font-size:10px;padding:4px 8px;cursor:pointer;display:inline-block}
.tags a:hover{background:var(--green)}

/* VIDEO GRID */
.video-grid-section{padding:15px;background:#fff;border:1px solid var(--border);margin:15px auto;max-width:1120px}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.v-card{height:190px;position:relative;display:flex;align-items:flex-end;padding:12px;color:#fff;cursor:pointer;overflow:hidden;background:#333}
.v-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v-overlay{position:absolute;inset:0;opacity:.85;z-index:1}
.v-overlay.purple{background:linear-gradient(45deg,#6c5ce7,#a29bfe)}
.v-overlay.blue{background:linear-gradient(45deg,#0984e3,#74b9ff)}
.v-overlay.green{background:linear-gradient(45deg,#00b894,#55efc4)}
.v-overlay.yellow{background:linear-gradient(45deg,#e67e22,#fdcb6e)}
.v-overlay.pink{background:linear-gradient(45deg,#e84393,#fd79a8)}
.v-overlay.cyan{background:linear-gradient(45deg,#00cec9,#81ecec)}
.v-card h4{position:relative;z-index:2;font-size:12px;line-height:1.3}
.play-icon{position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,255,255,.3);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px}

/* THREE COL */
.bottom-three-col{padding:15px;background:#fff;border:1px solid var(--border);margin:15px auto;max-width:1120px}
.three-col-wrapper{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.col-title{font-size:12px;font-weight:bold;border-bottom:2px solid var(--green);padding-bottom:6px;margin-bottom:10px}
.col-list .col-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer}
.col-item img{width:70px;height:50px;object-fit:cover;flex-shrink:0}
.col-item h5{font-size:11px;line-height:1.3}
.col-item span{font-size:10px;color:#888}

/* FOOTER */
.main-footer{background:#222;margin-top:20px;color:#fff}
.footer-social{display:flex}
.footer-social a{flex:1;padding:15px;color:#fff;font-size:13px;font-weight:bold;display:flex;flex-direction:column;line-height:1.2}
.footer-social a span{font-size:10px;font-weight:normal;opacity:.8;margin-top:3px}
.footer-social .fb{background:#3b5998}.footer-social .tw{background:#1da1f2}.footer-social .ig{background:#4c8ebf}.footer-social .yt{background:#ff0000}.footer-social .rs{background:#f39c12}
.footer-links{text-align:center;padding:10px 0;border-top:1px solid #333;border-bottom:1px solid #333}
.footer-links a{font-size:10px;color:#aaa;margin:0 8px}
.footer-bottom{text-align:center;padding:12px;font-size:11px;color:#aaa;background:#1a1a1a}

/* SINGLE POST */
.single-post{background:#fff;padding:20px;border:1px solid var(--border)}
.single-post h1{font-size:24px;margin:10px 0;line-height:1.3}
.post-meta{font-size:11px;color:#888;display:flex;gap:15px;flex-wrap:wrap;margin:10px 0}
.featured-img{width:100%;max-height:450px;object-fit:cover;margin:15px 0}
.post-content{font-size:14px;line-height:1.8;color:#222;margin-top:15px}
.labels-box{margin:20px 0;display:flex;flex-wrap:wrap;gap:6px}
.labels-box span{background:#222;color:#fff;font-size:11px;padding:4px 8px;cursor:pointer}
.related-section{margin-top:25px;border-top:3px solid var(--green);background:#fff;padding:15px;border:1px solid var(--border)}
.related-title{font-size:14px;font-weight:bold;margin-bottom:15px;border-bottom:2px solid var(--green);padding-bottom:6px;display:inline-block}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.related-card{border:1px solid var(--border);cursor:pointer}
.related-card img{height:130px;width:100%;object-fit:cover}
.related-card-body{padding:8px}.related-card-body h4{font-size:11px;height:30px;overflow:hidden}

/* PAGINATION & LOADING */
.pagination{display:flex;gap:5px;margin-top:20px;flex-wrap:wrap}
.pagination button{background:#222;color:#fff;border:none;padding:6px 12px;cursor:pointer;font-size:12px}
.pagination button.active{background:var(--green)}
.loading{padding:40px;text-align:center;color:#888}
#postSearchInput{padding:8px 10px;border:1px solid var(--border);width:180px;font-size:12px;background:#f9f9f9}