/* ══════════════════════════════════════
   THEME VARS
══════════════════════════════════════ */
:root {
  --bg:#0a0608;--bg2:#120c10;--bg3:#1a1018;
  --panel:#1f1320;--panel2:#261628;
  --border:rgba(200,140,60,.18);--border2:rgba(200,140,60,.35);
  --gold:#c8903c;--gold2:#e8b865;--gold3:#f5d090;
  --deep-red:#8b2020;--crimson:#c43030;--ruby:#e05050;
  --teal:#1a6b6b;--teal2:#2a9a9a;--teal3:#5ecece;
  --purple:#5a2a7a;--purple2:#7a4aaa;--purple3:#b080e0;
  --text:#f0e8d8;--text2:#c8b898;--text3:#907868;
  --accent:#c8903c;--glow:rgba(200,140,60,.06);
  --font-d:'Cormorant Garamond',serif;
  --font-b:'Outfit',sans-serif;
  --nav-h:58px;--sidebar-w:300px;--t:.2s ease;
}
[data-theme="light"]{
  --bg:#faf5ee;--bg2:#f5ede0;--bg3:#ede0cc;
  --panel:#fff;--panel2:#faf5f0;
  --border:rgba(139,80,20,.15);--border2:rgba(139,80,20,.30);
  --gold:#8b5014;--gold2:#a8681c;--gold3:#c88030;
  --teal:#1a6b6b;--teal2:#2a9a9a;--teal3:#0a5050;
  --purple2:#6a3a9a;--purple3:#7a4aaa;
  --crimson:#a02020;--ruby:#c04040;
  --text:#1a0e08;--text2:#5a3820;--text3:#9a7850;
  --glow:rgba(139,80,20,.04);
}
/* ══════════════════════════════════════
   BASE
══════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);font-size:14px;line-height:1.6;min-height:100vh;overflow-x:hidden;transition:background var(--t),color var(--t)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
a{color:var(--gold);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--gold2)}
sub{font-size:.65em;vertical-align:sub;color:var(--teal3)}

/* ══════════════════════════════════════
   INIT OVERLAY
══════════════════════════════════════ */
#init-overlay{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  transition:opacity .5s ease
}
.init-logo{font-family:var(--font-d);font-size:2.4rem;font-weight:700;color:var(--text)}
.init-logo span{color:var(--gold)}
.init-sub{font-size:.78rem;color:var(--text3);letter-spacing:2px;text-transform:uppercase}
.init-bar{width:220px;height:3px;background:var(--border2);border-radius:2px;overflow:hidden}
.init-fill{height:100%;background:var(--gold);border-radius:2px;width:0%;transition:width .3s ease}
.init-msg{font-size:.78rem;color:var(--text3)}

/* ══════════════════════════════════════
   TOPNAV
══════════════════════════════════════ */
#topnav{
  display:flex;align-items:center;gap:10px;
  padding:0 18px;height:var(--nav-h);
  background:var(--panel);border-bottom:1px solid var(--border2);
  position:sticky;top:0;z-index:800
}
.nav-logo{font-family:var(--font-d);font-size:1.45rem;font-weight:700;color:var(--text);white-space:nowrap}
.nav-logo span{color:var(--gold)}
.nav-cats{display:flex;gap:4px}
.nav-cat{
  padding:5px 12px;border:1px solid var(--border);border-radius:20px;
  background:transparent;color:var(--text2);
  font-family:var(--font-b);font-size:.76rem;cursor:pointer;transition:all var(--t)
}
.nav-cat:hover,.nav-cat.active{background:var(--gold);color:var(--bg);border-color:var(--gold);font-weight:600}
.nav-search{
  flex:1;max-width:360px;margin-left:auto;
  display:flex;align-items:center;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:30px;padding:3px 3px 3px 14px;transition:border-color var(--t)
}
.nav-search:focus-within{border-color:var(--gold2)}
.nav-search input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--font-b);font-size:.84rem}
.nav-search input::placeholder{color:var(--text3)}
.nav-search button{padding:5px 14px;background:var(--gold);border:none;border-radius:30px;color:var(--bg);font-weight:600;font-size:.76rem;cursor:pointer}
.icon-btn{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border2);background:var(--bg2);
  color:var(--gold);cursor:pointer;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);flex-shrink:0
}
.icon-btn:hover{background:var(--gold);color:var(--bg)}

/* ══════════════════════════════════════
   VIDEO PLAYER SECTION
══════════════════════════════════════ */
#video-player-section{
  display:none;
  background:var(--panel);
  border-bottom:1px solid var(--border2);
  padding:16px 20px;
  position:relative;
  animation:slideDown .3s ease
}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.vp-inner{
  display:flex;gap:16px;align-items:flex-start;
  max-width:1100px;margin:0 auto
}
.vp-embed{
  flex-shrink:0;border-radius:10px;overflow:hidden;
  border:1px solid var(--border2);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  position:relative;width:100%;
}
.vp-embed iframe{width:100%;height:480px;display:block;border:none}
.vp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.vp-title{
  font-family:var(--font-d);font-size:1.3rem;font-weight:700;
  color:var(--gold2);line-height:1.2
}
.vp-meta{font-size:.8rem;color:var(--text3);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vp-meta a{color:var(--teal3)}
.vp-meta .views-pill{
  background:rgba(94,206,206,.1);border:1px solid rgba(94,206,206,.2);
  color:var(--teal3);padding:2px 10px;border-radius:12px;font-size:.72rem
}
.vp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.vp-btn{
  padding:7px 14px;border-radius:6px;border:1px solid var(--border2);
  background:rgba(255,255,255,.04);color:var(--text2);
  font-family:var(--font-b);font-size:.76rem;cursor:pointer;
  display:flex;align-items:center;gap:5px;transition:all var(--t)
}
.vp-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--glow)}
.vp-btn.primary{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.vp-btn.primary:hover{background:var(--gold2)}
.vp-close{
  position:absolute;top:12px;right:12px;
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--border2);background:var(--bg2);
  color:var(--text3);cursor:pointer;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;transition:all var(--t)
}
.vp-close:hover{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.vp-playlist{
  margin-top:10px;
  background:var(--bg2);border:1px solid var(--border);border-radius:8px;
  overflow:hidden;max-height:160px;overflow-y:auto
}
.vp-plist-title{font-size:.68rem;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;padding:6px 10px;border-bottom:1px solid var(--border)}
.vp-plist-item{
  display:flex;align-items:center;gap:8px;padding:6px 10px;
  cursor:pointer;border-bottom:1px solid var(--border);
  transition:background var(--t);font-size:.78rem;color:var(--text2)
}
.vp-plist-item:hover{background:var(--glow);color:var(--gold2)}
.vp-plist-item.now-playing{background:rgba(200,140,60,.1);color:var(--gold)}
.vp-plist-item img{width:40px;height:28px;object-fit:cover;border-radius:3px;flex-shrink:0}
@media(max-width:750px){
  .vp-embed,.vp-embed iframe{width:100%;min-width:0}
  .vp-inner{flex-direction:column}
}

/* ══════════════════════════════════════
   LAYOUT
══════════════════════════════════════ */
.app-body{display:flex;min-height:calc(100vh - var(--nav-h))}
#sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:var(--panel);border-right:1px solid var(--border);
  position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));
  overflow:hidden;display:flex;flex-direction:column
}
.sb-inner{flex:1;overflow-y:auto}
#content{flex:1;padding:18px 22px 60px;overflow:hidden;min-width:0}

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */
.alpha-item{border-bottom:1px solid var(--border)}
.alpha-hdr{
  display:flex;align-items:center;
  background:#0d0a08;
  border-bottom:1px solid var(--border);
  cursor:pointer;transition:background var(--t)
}
.alpha-hdr:hover{background:rgba(200,140,60,.08)}
.alpha-letter{
  width:30px;min-width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-size:.9rem;font-weight:700;
  color:var(--gold);border-right:1px solid var(--border)
}
.alpha-count{margin-left:auto;font-size:.65rem;color:var(--text3);padding-right:8px}
.alpha-items{display:none}
.alpha-item.open .alpha-items{display:block}
.alpha-items a{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px 6px 14px;
  color:var(--text2);font-size:.8rem;
  border-bottom:1px solid var(--border);
  cursor:pointer;transition:all var(--t)
}
.alpha-items a:hover,.alpha-items a.act{
  background:var(--glow);color:var(--gold);
  border-left:2px solid var(--gold);padding-left:12px
}
.alpha-items img{width:26px;height:26px;object-fit:cover;border-radius:50%;border:1px solid var(--border2);flex-shrink:0}
.alpha-items .bi{color:var(--gold);font-size:1rem;flex-shrink:0}

/* ══════════════════════════════════════
   PAGE HEADER
══════════════════════════════════════ */
#page-header{
  background:var(--panel);border:1px solid var(--border);
  border-radius:12px;margin-bottom:18px;overflow:hidden;display:none
}
.ph-bar{
  padding:12px 18px;
  background:linear-gradient(90deg,rgba(200,140,60,.12),transparent);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px
}
.ph-bar h3{font-family:var(--font-d);font-size:1.35rem;font-weight:700;color:var(--gold2)}
#page-info-wrap{padding:14px 18px}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.info-table{border-collapse:collapse;width:100%}
.info-table tr{border-bottom:1px solid var(--border)}
.info-table td{padding:7px 10px;font-size:.83rem;vertical-align:top}
.info-table td:first-child{color:var(--text2);font-weight:500;white-space:nowrap;width:40%}
.stats-table{border-collapse:collapse;width:100%}
.stats-table tr{border-bottom:1px solid var(--border)}
.stats-table td{padding:7px 10px;font-size:.8rem}
.stats-table td:first-child{color:var(--text3);width:60%}
.stats-table td:last-child{color:var(--gold2);font-weight:600;text-align:right}
.poster-img{width:100%;max-width:180px;border-radius:8px;border:1px solid var(--border2);display:block;margin:0 auto 10px}

/* ══════════════════════════════════════
   PIANO
══════════════════════════════════════ */
.piano-wrap{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:10px;padding:14px;margin-top:12px;overflow-x:auto
}
.piano-label{font-size:.68rem;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;font-weight:600}
.PIANO{display:flex;position:relative;height:130px;user-select:none;min-width:380px}
.key{position:absolute;cursor:pointer;border-radius:0 0 5px 5px;transition:all .06s ease;display:flex;align-items:flex-end;justify-content:center}
.key.white{
  background:linear-gradient(180deg,#f5f0e8,#fff 60%,#e8e0d0);
  border:1px solid #b0a090;border-top:none;
  box-shadow:0 3px 6px rgba(0,0,0,.3);z-index:1
}
.key.black{
  background:linear-gradient(180deg,#1a1410,#0a0806 60%,#1a1410);
  border:1px solid #0a0806;border-top:none;
  box-shadow:0 4px 8px rgba(0,0,0,.6);z-index:2
}
.key.white:hover{background:linear-gradient(180deg,#fff8f0,#fff 50%,#f5ede0)}
.key.black:hover{background:linear-gradient(180deg,#2a2018,#1a1210 60%,#2a2018)}
.wk-C.lit{background:#ff9999!important;box-shadow:0 0 12px #ff6666}
.wk-D.lit{background:#ffcc77!important;box-shadow:0 0 12px #ffaa33}
.wk-E.lit{background:#fff055!important;box-shadow:0 0 12px #ffe000}
.wk-F.lit{background:#aaffaa!important;box-shadow:0 0 12px #66ff66}
.wk-G.lit{background:#88ffee!important;box-shadow:0 0 12px #33ffcc}
.wk-A.lit{background:#88bbff!important;box-shadow:0 0 12px #4499ff}
.wk-B.lit{background:#cc99ff!important;box-shadow:0 0 12px #aa66ff}
.key.black.lit{background:var(--gold)!important;box-shadow:0 0 12px var(--gold)}
.key p{font-size:.52rem;color:var(--text3);padding:2px 3px;text-align:center;line-height:1.2;margin-bottom:2px;pointer-events:none;font-weight:600}
.key.black p{color:rgba(255,220,150,.8)}
[data-theme="light"] .key p{color:#4a3020}

/* ══════════════════════════════════════
   VIDEOS
══════════════════════════════════════ */
.video-section{background:var(--panel);border:1px solid var(--border);border-radius:12px;margin-bottom:14px;overflow:hidden}
.vs-hdr{padding:11px 16px;background:linear-gradient(90deg,rgba(26,107,107,.15),transparent);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.vs-hdr h4{font-family:var(--font-d);font-size:1.1rem;color:var(--teal3);font-weight:600}
.folder-block{padding:10px 14px}
.folder-title{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--gold2);font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px dashed var(--border)}
.folder-count{font-size:.68rem;color:var(--text3);font-weight:400;margin-left:auto}
.song-list{list-style:none;padding:0}
.song-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-size:.8rem;color:var(--text2);border-bottom:1px solid var(--border);transition:background var(--t)}
.song-item:hover{background:var(--glow)}
.song-item img{width:38px;height:28px;object-fit:cover;border-radius:3px;border:1px solid var(--border);flex-shrink:0}
.play-btn{
  width:26px;height:26px;border-radius:50%;
  background:var(--teal);border:none;color:#fff;
  cursor:pointer;font-size:.75rem;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--t);flex-shrink:0
}
.play-btn:hover{background:var(--teal2)}
.song-link{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);cursor:pointer}
.song-link:hover{color:var(--gold2)}
.song-meta{display:flex;gap:6px;align-items:center;flex-shrink:0;font-size:.7rem;color:var(--text3)}
.song-meta a{color:var(--text3)}
.song-meta a:hover{color:var(--teal3)}
.views-badge{font-size:.66rem;color:var(--text3);padding:1px 6px;border:1px solid var(--border);border-radius:10px;white-space:nowrap}
.yt-btn{color:var(--crimson);font-size:.88rem}
.yt-btn:hover{color:var(--ruby)}

/* SWARA */
.swara-play{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:rgba(26,138,107,.15);border:1px solid rgba(26,138,107,.3);
  color:var(--teal3);font-size:.72rem;cursor:pointer;
  transition:all var(--t);vertical-align:middle;margin-left:4px
}
.swara-play:hover{background:var(--teal);color:#fff}
.swara-cell{font-family:var(--font-d);font-size:.95rem;color:var(--gold2);letter-spacing:.5px}

/* SEARCH RESULTS */
.search-results{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.sr-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--t)}
.sr-item:hover{background:var(--glow)}
.sr-item:last-child{border:none}
.sr-cat{font-size:.63rem;color:var(--text3);padding:2px 8px;border:1px solid var(--border);border-radius:10px;text-transform:uppercase;white-space:nowrap}
.sr-name{font-size:.86rem;color:var(--text);flex:1}
.sr-img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid var(--border2)}

/* SPINNER */
.spinner-wrap{display:flex;flex-direction:column;align-items:center;padding:36px;gap:10px;color:var(--text3)}
.spinner{width:28px;height:28px;border:2px solid var(--border2);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* EMPTY */
.empty-state{text-align:center;padding:44px 20px;color:var(--text3);font-size:.86rem}
.empty-state .bi{font-size:2.2rem;color:var(--border2);display:block;margin-bottom:10px}

/* OVERLAY */
#mob-overlay{display:none;position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.6)}
#mob-overlay.open{display:block}
.menu-toggle{display:none;width:36px;height:36px;border-radius:6px;border:1px solid var(--border2);background:var(--bg2);color:var(--gold);cursor:pointer;font-size:1rem;align-items:center;justify-content:center;transition:all var(--t)}

@media(max-width:900px){
  #sidebar{position:fixed;left:-100%;top:var(--nav-h);z-index:700;height:calc(100vh - var(--nav-h));transition:left .3s ease;box-shadow:4px 0 20px rgba(0,0,0,.6)}
  #sidebar.open{left:0}
  .menu-toggle{display:flex}
  .nav-cats{display:none}
  #content{padding:12px}
  .info-grid{grid-template-columns:1fr}
}
.vp-meta {
    display: none;
}

:root {
		  --bg:          #0d0a08;
		  --bg2:         #0c0e12;
		  --surface:     #1c1410;
		  --surface2:    #161a20;
		  --border:      #2e2018;
		  --border2:     #252d3a;
		  --gold:        #ffc768;
		  --gold-light:  #e8b96a;
		  --gold-glow:   rgba(201,148,58,0.18);
		  --gold-dim:    #f3b54f;
		  --crimson:     #8b1f2f;
		  --teal:        #1a8a7a;
		  --cream:       #eee6d0;
		  --cream-dim:   #ede1c7;
		  --text:        #d8ccb4;
		  --text-dim:    #d1cfcf;
		  --mega-bg:     #0e1118;
		  --font-d:      'Cormorant Garamond', serif;
		  --font-ta:     'Noto Serif Tamil', serif;
		  --font-b:      'Outfit', sans-serif;
		  --nav-h:       64px;
		  --signal:      #00e5a0;
		  --signal-dim:  rgba(0,229,160,0.15);
		  --live-red:    #e53935;
		  --accent:      #c9943a;
		  --primary-bg:  #0d0a08;
		  --text-main:   #d8ccb4;
		}

        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Roboto, sans-serif; }
        body { background-color: var(--primary-bg); color: var(--text-main); line-height: 1.6; overflow-x: hidden; }
		
		
        /* Header Styles */
			   #site-header{
		  position:sticky;top:0;z-index:1000;
		  height:var(--nav-h);
		  background:rgba(13,10,8,0.97);
		  border-bottom:1px solid rgba(201,148,58,0.2);
		  display:flex;align-items:center;gap:14px;
		  padding:0 5%;
		  backdrop-filter:blur(20px);
		  box-shadow:0 2px 40px rgba(0,0,0,0.6)
		}
		.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
		.logo img{height:40px}
		.logo-ta{font-family:var(--font-ta);font-size:0.7rem;color:var(--gold);line-height:1.2}

		.nav-bar{display:flex;gap:2px;flex:1;justify-content:center}
		.nav-item{position:relative}
		.nav-btn{
		  display:flex;align-items:center;gap:5px;
		  background:none;border:none;cursor:pointer;
		  color:var(--text);font-family:var(--font-b);font-size:1rem;
		  padding:7px 9px;border-radius:5px;transition:all 0.2s;white-space:nowrap
		}
		.nav-btn:hover,.nav-btn.active{background:var(--gold-glow);color:var(--gold-light)}
		.nav-btn .fa-caret-down{font-size:0.55rem;opacity:0.45}
		.nav-lbl{display:inline}

		.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
		.search-hdr{
		  display:flex;align-items:center;
		  background:rgba(255,255,255,0.05);border:1px solid var(--border);
		  border-radius:6px;overflow:hidden
		}
		.search-hdr input{
		  background:none;border:none;outline:none;
		  color:var(--cream);font-family:var(--font-b);font-size:0.79rem;
		  padding:7px 12px;width:190px
		}
		.search-hdr input::placeholder{color:rgba(201,148,58,0.45)}
		.search-hdr button{
		  background:var(--gold);border:none;padding:7px 12px;
		  color:var(--bg);cursor:pointer;font-size:0.78rem;transition:background 0.2s
		}
		.search-hdr button:hover{background:var(--gold-light)}
		.social-icon{color:var(--text-dim);font-size:1rem;transition:color 0.2s}
		.social-icon:hover{color:#1877f2}
		.nav-cta{
		  background:var(--gold);color:var(--bg);font-weight:600;
		  padding:6px 14px;border-radius:5px;font-size:0.78rem;transition:background 0.2s
		}
		.nav-cta:hover{background:var(--gold-light)}
		/* ══════════════════════════════════════
		   MEGA MENU
		══════════════════════════════════════ */
		.mega-overlay{
		  display:none;position:fixed;inset:0;z-index:900;
		  background:rgba(0,0,0,0.55);backdrop-filter:blur(4px)
		}
		.mega-overlay.active{display:block}
		#offcanvas-overlay{
		  position:fixed;top:0;left:0;width:100%;height:100%;
		  background:rgba(0,0,0,0.6);display:none;z-index:1999
		}
		#offcanvas-overlay.active{display:block}

		.mega-menu{
		  display:none;position:fixed;top:var(--nav-h);left:0;right:0;
		  z-index:950;background:var(--mega-bg);
		  border-bottom:1px solid rgba(201,148,58,0.18);
		  box-shadow:0 24px 64px rgba(0,0,0,0.8);
		  animation:megaIn 0.2s ease
		}
		.mega-menu.active{display:block}
		@keyframes megaIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

		.mega-close{
		  position:absolute;top:14px;right:20px;
		  background:none;border:none;color:var(--text-dim);font-size:1rem;cursor:pointer;transition:color 0.2s
		}
		.mega-close:hover{color:var(--cream)}
		.mega-inner{display:grid;grid-template-columns:200px repeat(4,1fr);max-width:1280px;margin:0 auto}
		.mega-header{
		  padding:22px 18px;background:rgba(201,148,58,0.06);
		  border-right:1px solid var(--border);display:flex;flex-direction:column;gap:5px
		}
		.mega-header i{font-size:1.5rem;color:var(--gold)}
		.mega-header-title{font-family:var(--font-d);font-size:1.25rem;font-weight:600;color:var(--cream)}
		.mega-header-sub{font-size:0.68rem;color:var(--text-dim);line-height:1.4}
		.mega-col{padding:18px 14px;border-right:1px solid var(--border)}
		.mega-col:last-child{border-right:none}
		.mega-col h3{font-size:0.6rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
		.mega-item{
		  display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:5px;
		  transition:background 0.15s;margin-bottom:1px;cursor:pointer
		}
		.mega-item:hover{background:var(--gold-glow)}
		.mega-item>i{
		  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
		  background:rgba(255,255,255,0.04);border-radius:4px;color:var(--gold);font-size:0.72rem;flex-shrink:0
		}
		.item-info{display:flex;flex-direction:column;gap:1px}
		.item-title{font-size:1rem;font-weight:500;color:var(--cream)}
		.item-desc{font-size:0.62rem;color:var(--text-dim)}
        .nav-icons { display: flex; gap: 20px; font-size: 1.2rem; }
        .nav-icons a { color: var(--text-dim); transition: 0.3s; text-decoration: none; }
        .nav-icons a:hover { color: var(--accent-color); transform: translateY(-3px); }
		/* Social Icon Common Styles */
		.social-icon {
			color: var(--text-dim); /* Default dim color (your root variable) */
			font-size: 1.2rem; /* Size of the icon */
			padding: 10px;
			border-radius: 50%; /* Makes the hover effect circular */
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
		}

		/* Facebook Specific Hover Style */
		.facebook-link:hover {
			color: #1877F2; /* Official Facebook Blue */
			background: rgba(24, 119, 242, 0.1); /* Light blue background on hover */
			transform: scale(1.1); /* Subtle grow effect */
		}

		/* Optional Text Style (if you uncommented the span) */
		.social-text {
			font-size: 0.8rem;
			margin-left: 8px;
			font-weight: 500;
		}
		/* கேட்டகரி லிஸ்ட் ஸ்டைல் */
		#category-list {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		#category-list li {
			display: flex;
			align-items: flex-start; /* ஐகான் மற்றும் உரையை செங்குத்தாக நடுவில் வைக்கும் */
			padding: 6px 15px;
			margin-bottom: 8px;
			background: rgba(255, 255, 255, 0.05); /* லேசான பின்னணி */
			border-radius: 10px;
			cursor: pointer;
			transition: all 0.3s ease;
			border: 1px solid transparent;
		}

		/* ஹோவர் செய்யும் போது (Hover Effect) */
		#category-list li:hover {
			background: rgba(56, 189, 248, 0.1); /* உங்கள் accent color-ன் லேசான நிறம் */
			border-color: var(--accent-color);
			transform: translateY(2px); /* லேசாக வலது பக்கம் நகரும் */
		}

		/* ஐகான் ஸ்டைல் */
		.cat-icon {
			font-size: 1.2rem;
			margin-right: 15px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 30px;
		}

		/* பெயர் ஸ்டைல் */
		.cat-name {
			flex: 1; /* இது மீதமுள்ள அனைத்து இடத்தையும் எடுத்துக்கொள்ளும் */
			font-size: 0.95rem;
			color: var(--text-color);
			font-weight: 500;
		}

		/* எண்ணிக்கை ஸ்டைல் (Count Badge) */
		.cat-count {
			background: var(--accent-color);
			color: #000; /* பின்னணிக்கு ஏற்ப மாற்றவும் */
			font-size: 0.75rem;
			font-weight: bold;
			padding: 2px 8px;
			border-radius: 20px;
			min-width: 30px;
			text-align: center;
			opacity: 0.8;
		}

		/* Nav Label (Volumes, Spiritual Themes போன்றவற்றிற்கு) */
		.nav-label {
			display: block;
			font-size: 0.75rem;
			text-transform: uppercase;
			letter-spacing: 1px;
			color: var(--accent-color);
			margin: 20px 0 10px 5px;
			font-weight: bold;
			opacity: 0.7;
		}
		.mega-col h4 {
			width: max-content;
		}
		.mega-col a {
			width: max-content;
		}
		.mega-col {
			margin: 0 10px;
		}
		
		@media (max-width: 768px) {
		.hero h2 {
			font-size: 1.4rem;
		}
		}
		@media (max-width: 768px) {
		.hero {
			margin-top:30px;
			height: 300px;
		}
		}
		@media (max-width: 768px) {
			.search-container {
				display: none;
			
}
		}
		@media (max-width: 768px) {
				.nav-icons {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					background: #111;
					justify-content: space-around;
					padding: 5px 0;
					border-top: 1px solid #333;
					z-index: 1000;
					margin-bottom: -50px;
					height: 45px;
				}

				.mega-panel {
					position: fixed;
					top: auto;
					left: 5%;
					right: 5%;
					width: 90%;
					border-radius: 15px;
				}

				.mega-grid { grid-template-columns: 1fr; gap: 10px; }
				
				.search-container { width: 100%; margin-top: 10px; }
			}
			.logo img {
				height: 100px;
			}
			h4 {
				color: #f7c695;
				text-align: center;
				text-shadow: 1px 1px black;
				font-size: 24px;
				margin-bottom: 30px;
			}
		@media (max-width: 768px) {	
			h4 {
				display:none;
			}
		}
		@media (max-width: 768px) {	
			.has-mega {
				display:none;
			}
		}
		.card-body {
			color: #000;
		}
		.nav-cta {
			text-decoration: none;
		}
		.mega-menu {
			display: none;
		}
		.mega-col a {
			text-decoration: none;
			display:flex;
		}
		.nav-cta {
			background: #f0ece8;
			}
h4 {
    margin-bottom: 0px;
}