.forum-main,.forum-sidebar{box-shadow:0 5px 15px rgba(0,0,0,.05)}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:0;background:#f4f6f8;color:#333}a{text-decoration:none;color:#007bff}a:hover{color:#0056b3}.forum-wrapper{display:flex;flex-wrap:wrap;margin:20px auto;max-width:1200px;gap:20px;padding:20px}.forum-main{flex:1 1 700px;border-radius:12px;padding:20px;background:#fff}.forum-main h1,.forum-main h3,.forum-main h4{color:#222}.forum-sidebar{flex:0 1 300px;border-radius:12px;padding:15px;background:#fff}.forum-categories,.forum-topics,.sidebar-widget ul{list-style:none;padding:0;margin:0}.forum-categories li,.forum-topics li{padding:12px 15px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;transition:background .3s}.forum-categories li:hover,.forum-topics li:hover{background:#f1f8ff}.forum-categories a,.forum-topics a{font-weight:600}.topic-post{border:1px solid #e3e6ea;border-radius:10px;padding:15px;margin-bottom:15px;background:#fafbfc;display:flex;gap:15px;align-items:flex-start}.topic-post.reply{margin-left:40px}.topic-post .avatar{width:50px;height:50px;border-radius:50%;object-fit:cover}form input[type=text],form textarea{width:100%;padding:10px 12px;border:1px solid #ccc;border-radius:8px;margin-bottom:10px;font-size:14px}form button.btn{background-color:#007bff;color:#fff;padding:10px 18px;border:none;border-radius:8px;cursor:pointer;transition:.3s}form button.btn:hover{background-color:#0056b3}.btn-primary,.btn-success{color:#fff;padding:8px 15px;border-radius:6px;transition:.3s}.btn-primary{background:#007bff}.btn-primary:hover{background:#0056b3}.btn-success{background:#28a745}.btn-success:hover{background:#218838}.sidebar-widget{margin-bottom:25px}.sidebar-widget h3{border-bottom:2px solid #007bff;padding-bottom:5px;margin-bottom:10px}.sidebar-widget li{display:flex;align-items:center;gap:10px;margin-bottom:10px}.sidebar-widget li img.avatar{width:35px;height:35px;border-radius:50%;object-fit:cover}.hero{padding:60px 20px;text-align:center;border-bottom:1px solid #e0e0e0;transition:all .3s ease}body.light-mode .hero,[data-theme=light] .hero{background:linear-gradient(135deg,#cce7ff,#99d1ff)!important;color:#111}body.dark-mode .hero,[data-theme=dark] .hero{background:#1f2937!important;color:#fff!important;border-bottom:1px solid #333}[data-theme=dark] .hero h1,[data-theme=dark] .hero h2,[data-theme=dark] .hero-full h1,[data-theme=dark] .hero-full h2,[data-theme=dark] .hero-section h1,[data-theme=dark] .hero-section h2,[data-theme=dark] .banner h1,[data-theme=dark] .banner h2,[data-theme=dark] .hero-category h1,[data-theme=dark] .hero-category h2{color:#fff!important}.hero h1{font-size:36px;font-weight:700;margin:0}h2.section-title{font-size:24px;margin:20px 0;font-weight:600;color:#111827;text-align:center}[data-theme=dark] h2.section-title{color:#fff!important}.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}.category-card{background:#fff;border-radius:10px;box-shadow:0 6px 18px rgba(15,23,42,0.04);transition:transform .18s ease,box-shadow .18s ease;text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px;padding:12px}.category-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(15,23,42,0.08)}.category-card .thumb img{width:60px;height:60px;border-radius:8px;object-fit:cover;display:block}.category-content{flex:1}.category-content h3{margin:0 0 4px;font-size:16px;color:#111827}.category-content p{margin:0;color:#6b7280;font-size:14px}.load-more{text-align:center;margin-top:16px}.load-more button{background:#0366d6;color:#fff;padding:10px 18px;border-radius:8px;border:0;cursor:pointer;font-weight:600}.sidebar-section{margin-bottom:25px}.sidebar-section h3{font-size:1rem;color:#0073e6;margin-bottom:12px;border-bottom:1px solid #e0e0e0;padding-bottom:5px;display:flex;align-items:center;gap:8px}.recent-scroll{max-height:250px;overflow-y:auto;padding-right:4px}.sidebar-list{list-style:none;padding:0;margin:0}.sidebar-list li{margin-bottom:10px}.sidebar-list a{display:flex;align-items:center;text-decoration:none;color:#333;font-size:.9rem}.sidebar-list a:hover{text-decoration:underline}.sidebar-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;margin-right:8px;border:1px solid #ccc;flex-shrink:0}.sidebar-entry{display:flex;flex-direction:column;flex:1}.sidebar-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-list small{font-size:.7rem;color:#666}.popular-grid{display:grid;grid-template-columns:1fr;gap:10px}.popular-card{display:block;background:#f9fbff;border:1px solid #d6e4ff;border-radius:8px;padding:10px 12px;text-decoration:none;transition:.2s ease-in-out}.popular-card:hover{background:#eef5ff;border-color:#0073e6}.popular-title{font-weight:500;font-size:.9rem;color:#222;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popular-meta{font-size:.75rem;color:#555}.recent-scroll::-webkit-scrollbar{width:6px}.recent-scroll::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:3px}.recent-scroll::-webkit-scrollbar-track{background:#f5f5f5}body.dark-mode,[data-theme=dark] body,body.dark-mode .forum-main,body.dark-mode .forum-sidebar,body.dark-mode .category-card,body.dark-mode .topic-post,body.dark-mode .popular-card{background:#1f2937!important;color:#fff!important}body.dark-mode .forum-main h1,body.dark-mode .forum-main h3,body.dark-mode .forum-main h4,body.dark-mode .category-content h3,body.dark-mode .popular-title{color:#fff!important}.sidebar-section.recent-activity h3::before{content:"";display:inline-block;width:18px;height:18px;background:url("/assets/icons/recent-activity.png") no-repeat center center;background-size:contain}@media (max-width:992px){.forum-wrapper{flex-direction:column}.forum-sidebar{flex:1 1 100%;margin-top:20px}}@media (max-width:800px){.hero h1{font-size:26px}}
/* Dark mode hero background in blue */
[data-theme=dark] .banner,
[data-theme=dark] .hero,
[data-theme=dark] .hero-category,
[data-theme=dark] .hero-full,
[data-theme=dark] .hero-section {
    background: linear-gradient(135deg, #1e3a8a, #2563eb) !important; /* nice blue gradient */
    color: #ffffff !important; /* text color in hero */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
[data-theme=dark] .banner h1,
[data-theme=dark] .banner p,
[data-theme=dark] .hero h1,
[data-theme=dark] .hero p,
[data-theme=dark] .hero-category h1,
[data-theme=dark] .hero-category p,
[data-theme=dark] .hero-full h1,
[data-theme=dark] .hero-full p,
[data-theme=dark] .hero-section h1,
[data-theme=dark] .hero-section p {
    color: #ffffff !important;
}
[data-theme=dark] .hero .hero-btn,
[data-theme=dark] .banner .hero-btn,
[data-theme=dark] .hero-category .hero-btn,
[data-theme=dark] .hero-full .hero-btn,
[data-theme=dark] .hero-section .hero-btn {
    background-color: #3b82f6 !important; /* button blue */
    color: #fff !important;
    border: none !important;
}
[data-theme=dark] .hero .hero-btn:hover,
[data-theme=dark] .banner .hero-btn:hover,
[data-theme=dark] .hero-category .hero-btn:hover,
[data-theme=dark] .hero-full .hero-btn:hover,
[data-theme=dark] .hero-section .hero-btn:hover {
    background-color: #2563eb !important; /* darker hover */
}