:root {
      --bg: #0d0a08;
      --bg2: #0c0e12;
      --surface: #1c1410;
      --surface2: #161a20;
      --border: #2e2018;
      --border2: #252d3a;
      --gold: #c9943a;
      --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: #ffe5c8;
      --mega-bg: #0e1118;
      --font-display: 'Cormorant Garamond', serif;
      --font-tamil: 'Noto Serif Tamil', serif;
      --font-body: 'Outfit', sans-serif;
      --nav-h: 58px;
      --signal: #00e5a0;
      --signal-dim: rgba(0,229,160,0.15);
      --live-red: #e53935;
      --sidebar-w: 320px;
    }

    [data-bs-theme="light"] {
      --bg: #f5f0e8;
      --bg2: #ede6d8;
      --surface: #fff8ee;
      --surface2: #f0ece4;
      --border: #d4c4a0;
      --border2: #c8bca8;
      --text: #2a1f0e;
      --text-dim: #6b5c42;
      --mega-bg: #faf6ee;
    }

    * { box-sizing: border-box; }

    html, body {
      min-height: 100vh;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 14px;
      margin: 0; padding: 0;
    }
	/* ═══ NAV ═══ */
#site-header{
  position:sticky;top:0;z-index:100;
  height:var(--nav-h);
  background:rgba(13,10,8,.95);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;
  gap:16px;
}
.logo img{display:block;height:75px}
.nav-bar{display:flex;align-items:center;gap:2px;flex:1;padding-left:24px;justify-content: center;}
.nav-btn{
  background:none;border:none;color:var(--text-dim);cursor:pointer;
  font-family:var(--font-body);font-size:1rem;letter-spacing:.06em;font-weight:500;
  padding:8px 12px;border-radius:6px;
  display:flex;align-items:center;gap:6px;
  transition:color .2s,background .2s;
  text-transform:uppercase;
}
.nav-btn:hover,.nav-btn.active{color:var(--gold);background:var(--gold-glow)}
.nav-lbl{display:none}
@media(min-width:900px){.nav-lbl{display:inline}}
.nav-right{display:flex;align-items:center;gap:12px}
.social-icon{color:var(--text-dim);font-size:1.1rem;transition:color .2s}
.social-icon:hover{color:#1877f2}
.nav-cta{
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:#0d0a08;font-weight:700;font-size:.78rem;letter-spacing:.08em;
  padding:9px 18px;border-radius:6px;text-decoration:none;
  text-transform:uppercase;transition:opacity .2s,transform .2s;
  white-space:nowrap;
}
.nav-cta:hover{opacity:.88;transform:translateY(-1px)}

/* ═══ MEGA MENUS ═══ */
.mega-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:98;
  backdrop-filter:blur(2px);
}
.mega-overlay.open{display:block}
.mega-menu{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;
  background:var(--mega-bg);border-bottom:1px solid var(--border);
  padding:28px 5%;
  display:none;animation:megaDown .22s ease;
  max-height:calc(100vh - var(--nav-h));overflow-y:auto;
}
.mega-menu.open{display:block}
@keyframes megaDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.mega-close{
  position:absolute;top:16px;right:20px;
  background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:1.1rem;
  transition:color .2s;
}
.mega-close:hover{color:var(--gold)}
.mega-inner{display:grid;grid-template-columns:auto 1fr 1fr 1fr 1fr;gap:28px;align-items:start}
.mega-header{display:flex;flex-direction:column;gap:6px;padding-right:20px;border-right:1px solid var(--border);min-width:140px}
.mega-header i{font-size:1.6rem;color:var(--gold);margin-bottom:4px}
.mega-header-title{font-family:var(--font-display);font-size:1.3rem;color:var(--cream);font-weight:600}
.mega-header-sub{font-size:.75rem;color:var(--text-dim);line-height:1.5}
.mega-col h3{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;font-weight:600;font-family:var(--font-body)}
.mega-item{
  display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:8px;
  text-decoration:none;transition:background .18s;margin-bottom:2px;
}
.mega-item:hover{background:var(--gold-glow)}
.mega-item>i{color:var(--gold);font-size:.9rem;margin-top:2px;flex-shrink:0;width:16px}
.item-info{display:flex;flex-direction:column;gap:2px}
.item-title{font-size:1rem;color:var(--cream);font-weight:500}
.item-desc{font-size:.71rem;color:var(--text-dim)}

    /* ====== TOPNAV ====== */
    #TOPNAV {
      position: sticky; top: 0; z-index: 1050;
      height: var(--nav-h);
      background: rgba(13,10,8,0.97);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center;
      padding: 0 16px; gap: 12px;
    }
    [data-bs-theme="light"] #TOPNAV { background: rgba(245,240,232,0.97); }

    .nav-brand {
      font-family: var(--font-display);
      font-size: 22px; font-weight: 600;
      color: var(--gold);
      letter-spacing: 0.5px;
      white-space: nowrap;
      text-decoration: none;
      flex-shrink: 0;
    }
    .nav-brand span { color: var(--cream); font-weight: 400; }

    .nav-cats {
      display: flex; align-items: center; gap: 4px;
      flex-shrink: 0;
    }
    .nav-cat-btn {
      background: none; border: none;
      color: var(--text-dim);
      font-family: var(--font-body);
      font-size: 13px; font-weight: 500;
      padding: 6px 11px;
      border-radius: 6px;
      cursor: pointer;
      transition: all .18s;
      white-space: nowrap;
    }
    .nav-cat-btn:hover { color: var(--gold); background: var(--gold-glow); }
    .nav-cat-btn.active { color: var(--gold); background: var(--gold-glow); }
    .nav-cat-btn i { font-size: 14px; margin-right: 5px; }

    /* search */
    .nav-search-wrap {
      flex: 1; max-width: 400px;
      position: relative;
    }
    .nav-search-wrap input {
      width: 100%;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: 8px;
      padding: 7px 38px 7px 36px;
      font-family: var(--font-body);
      font-size: 13px;
      outline: none;
      transition: border-color .18s;
    }
    .nav-search-wrap input:focus { border-color: var(--gold); }
    .nav-search-wrap .si { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: 15px; pointer-events: none; }
    .nav-search-wrap .mic-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px; font-size: 15px; }
    .nav-search-wrap .mic-btn:hover { color: var(--gold); }

    .nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
    .nav-icon-btn {
      background: none; border: none;
      color: var(--text-dim); font-size: 18px;
      cursor: pointer; padding: 6px;
      border-radius: 6px; transition: all .18s;
    }
    .nav-icon-btn:hover { color: var(--gold); background: var(--gold-glow); }
    .lang-select {
      background: var(--surface); border: 1px solid var(--border);
      color: var(--text); font-family: var(--font-body);
      font-size: 13px; padding: 5px 8px;
      border-radius: 6px; cursor: pointer; outline: none;
    }

    /* ====== LAYOUT ====== */
    #MAIN_LAYOUT {
      display: flex;
      height: calc(100vh - var(--nav-h));
      overflow: hidden;
    }

    /* ====== SIDEBAR ====== */
    #SIDEBAR {
      width: var(--sidebar-w);
      flex-shrink: 0;
      display: flex; flex-direction: column;
      background: var(--surface);
      border-right: 1px solid var(--border);
      overflow: hidden;
    }

    /* Player */
    #PLAYER_WRAP {
      background: #000;
      border-bottom: 1px solid var(--border);
      position: relative;
      flex-shrink: 0;
    }
    #FRAME_PLAYER {
      width: 100%; height: 180px;
      border: none; display: block;
    }
    .player-overlay {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(to top, rgba(13,10,8,.7) 0%, transparent 60%);
      pointer-events: none;
    }

    /* Sidebar list */
    #MENU {
      flex: 1; overflow-y: auto;
      padding: 0;
    }
    #MENU::-webkit-scrollbar { width: 4px; }
    #MENU::-webkit-scrollbar-track { background: transparent; }
    #MENU::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    /* Alpha nav */
    .alpha-container { display: flex; height: 100%; }
    #ALPHABET_LIST {
      display: flex; flex-direction: column;
      background: var(--surface2);
      border-right: 1px solid var(--border);
      overflow-y: auto;
      min-width: 32px;
      padding: 4px 0;
    }
    #ALPHABET_LIST::-webkit-scrollbar { width: 0; }
    #ALPHABET_LIST a {
      font-size: 10px; font-weight: 600;
      color: var(--text-dim); text-align: center;
      padding: 3px 6px; text-decoration: none;
      transition: color .15s;
      display: block;
    }
    #ALPHABET_LIST a:hover, #ALPHABET_LIST a.active { color: var(--gold); }

    #ALPHABET_DATA {
      flex: 1; overflow-y: auto; padding: 0 0 8px 0;
    }
    #ALPHABET_DATA::-webkit-scrollbar { width: 4px; }
    #ALPHABET_DATA::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    .ALPHABET_HEADER {
      font-family: var(--font-display);
      font-size: 18px; font-weight: 600;
      color: var(--gold);
      padding: 10px 12px 4px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 2px;
      letter-spacing: 1px;
      position: sticky; top: 0;
      background: var(--surface);
      z-index: 1;
    }

    .OL_LIST { list-style: none; margin: 0; padding: 0; }
    .OL_LIST li { border-bottom: 1px solid rgba(46,32,24,.4); }
    .OL_LIST li a {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 12px;
      color: var(--text); text-decoration: none;
      font-size: 13px;
      transition: background .15s, color .15s;
      cursor: pointer;
    }
    .OL_LIST li a:hover { background: var(--gold-glow); color: var(--gold-light); }
    .OL_LIST li a.active { background: var(--gold-glow); color: var(--gold); }

    .POSTER_STYLE {
      width: 28px; height: 28px;
      border-radius: 50%; object-fit: cover;
      border: 1px solid var(--border);
      flex-shrink: 0;
    }
    .POSTER_STYLE.bi { font-size: 20px; color: var(--text-dim); }

    /* ====== CONTENT AREA ====== */
    #CONTENT {
      flex: 1; overflow-y: auto;
      padding: 0;
      background: var(--bg);
    }
    #CONTENT::-webkit-scrollbar { width: 6px; }
    #CONTENT::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    /* Page header */
    #PAGE_HEADER {
      background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
      border-bottom: 1px solid var(--border);
      padding: 20px 24px 0;
    }
    .CONTENT_HEADER {
      font-family: var(--font-display);
      font-size: 26px; font-weight: 600;
      color: var(--cream); margin: 0;
      letter-spacing: 0.3px;
    }
    .CONTENT_HEADER i { color: var(--gold); }
    .ICON_STYLE { color: var(--gold); }

    /* Info grid */
    #PAGE_INFO { padding: 16px 24px; }

    .page-info-inner { display: flex; gap: 20px; flex-wrap: wrap; }

    .info-poster img {
      width: 140px; border-radius: 10px;
      box-shadow: 0 8px 32px rgba(0,0,0,.5);
      border: 2px solid var(--border);
    }

    .table { color: var(--text); }
    .table td { padding: 6px 10px; border-color: var(--border); font-size: 13px; }
    .table td em { color: var(--text-dim); font-style: normal; }
    .table-bordered { border-color: var(--border) !important; }
    .table-hover tbody tr:hover { background: var(--gold-glow); }

    /* Videos */
    #PAGE_VIDEOS { padding: 0 24px 24px; }
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 16px;
      overflow: hidden;
    }
    .card-header {
      background: linear-gradient(90deg, var(--surface2), var(--surface));
      border-bottom: 1px solid var(--border);
      padding: 12px 16px;
    }
    .card-body { padding: 12px 16px; }

    .UL_LIST { list-style: none; margin: 0; padding: 0; }
    .UL_LIST li {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 0;
      border-bottom: 1px solid rgba(46,32,24,.3);
      font-size: 13px;
      flex-wrap: wrap;
    }
    .UL_LIST li:last-child { border-bottom: none; }
    .IMAGE_STYLE {
      width: 56px; height: 42px;
      object-fit: cover; border-radius: 4px;
      border: 1px solid var(--border);
      flex-shrink: 0;
    }
    .UL_LIST a { color: var(--cream); text-decoration: none; }
    .UL_LIST a:hover { color: var(--gold); }
    .NUM_COLOR { color: var(--gold-dim); font-size: 12px; }

    .bi-play { color: var(--gold); font-size: 18px; cursor: pointer; }
    .bi-youtube { color: #ff0000; font-size: 16px; }

    /* Search results */
    .list-group-item {
      background: var(--surface);
      border-color: var(--border);
      color: var(--text);
      padding: 10px 14px;
    }
    .list-group-item a { color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 8px; }
    .list-group-item a:hover { color: var(--gold); }

    /* Spinner */
    .spinner-area {
      display: flex; align-items: center; justify-content: center;
      padding: 40px; color: var(--text-dim);
      flex-direction: column; gap: 12px;
    }
    .spinner-border { color: var(--gold) !important; }

    /* Lyrics */
    #PAGE_LYRICS, #PAGE_REFS { padding: 0 24px 24px; }

    /* Context search */
    .context-cols select {
      background: var(--surface); border: 1px solid var(--border);
      color: var(--text); border-radius: 6px; padding: 6px;
      font-size: 13px; width: 100%;
    }
    .context-submit {
      background: var(--gold); color: #000; border: none;
      padding: 8px 20px; border-radius: 6px;
      font-weight: 600; cursor: pointer; margin-top: 10px;
      font-family: var(--font-body);
    }
    .context-submit:hover { background: var(--gold-light); }

    /* Modal */
    .modal-content {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
    }
    .modal-header { border-bottom-color: var(--border); }
    .modal-footer { border-top-color: var(--border); }
    .btn-close { filter: invert(1) opacity(.6); }
    .btn-secondary { background: var(--surface2); border-color: var(--border); }

    /* Crew */
    .CREW_STYLE { width: 44px; height: 44px; object-fit: cover;border-radius: 5px;
    border: 2px solid #ffffff5c; }

    /* About stats */
    .about-stat-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 12px; padding: 20px;
    }
    .about-stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px; padding: 14px 16px;
      text-align: center;
    }
    .about-stat-card .val {
      font-family: var(--font-display);
      font-size: 22px; font-weight: 600;
      color: var(--gold);
    }
    .about-stat-card .lbl { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

    /* Keyboard */
    .langkbd td {
      cursor: pointer; padding: 4px 6px;
      background: var(--surface2);
      border-radius: 4px; font-size: 13px;
      transition: background .15s;
    }
    .langkbd td:hover { background: var(--gold-glow); color: var(--gold); }

    /* URL indicator */
    #URL_CRUMB {
      font-size: 11px; color: var(--text-dim);
      padding: 6px 24px;
      border-bottom: 1px solid var(--border);
      font-family: monospace;
      background: var(--surface2);
    }
    #URL_CRUMB a { color: var(--gold); text-decoration: none; }
    #URL_CRUMB a:hover { text-decoration: underline; }

    /* Responsive */
    @media (max-width: 768px) {
      :root { --sidebar-w: 260px; }
      .nav-cats { display: none; }
      #FRAME_PLAYER { height: 140px; }
    }
    @media (max-width: 576px) {
      #SIDEBAR { width: 100%; position: fixed; left: -100%; transition: left .3s; z-index: 900; }
      #SIDEBAR.open { left: 0; }
      #CONTENT { width: 100%; }
    }

    /* Transitions */
    #PAGE_TITLE, #PAGE_INFO, #PAGE_VIDEOS, #PAGE_LYRICS, #PAGE_REFS {
      transition: opacity .2s;
    }
    .fade-in { animation: fadeIn .3s ease; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

    /* Gold accent line */
    .gold-line {
      height: 2px; background: linear-gradient(90deg, var(--gold), transparent);
      margin: 0; border: none;
    }