/* ── TOKENS ── */
:root {
--gold: #FEA921;
--gold-dim: rgba(254,169,33,.15);
--gold-border: rgba(254,169,33,.3);
--bg: #12121e;
--surface: #1c1c2e;
--surface2: #24243a;
--surface3: #2e2e45;
--text: #f0eefc;
--text-sub: #b0aed0;
--text-muted: #6e6c8a;
--border: rgba(255,255,255,.07);
--border-hover: rgba(254,169,33,.4);
--radius: 16px;
--radius-sm: 12px;
--radius-xs: 8px;
--shadow: 0 4px 20px rgba(0,0,0,.35);
--shadow-lg: 0 8px 40px rgba(0,0,0,.5);
--transition: .2s cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] {
--bg: #f4f3ff;
--surface: #ffffff;
--surface2: #f0eeff;
--surface3: #e8e6ff;
--text: #1a1830;
--text-sub: #4a4870;
--text-muted: #8a88aa;
--border: rgba(0,0,0,.07);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
font-family: 'Nunito', sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
transition: background .3s, color .3s;
-webkit-font-smoothing: antialiased;
}
.ms {
font-family: 'Material Symbols Rounded';
font-weight: 400; font-style: normal;
line-height: 1; letter-spacing: normal; text-transform: none;
white-space: nowrap; direction: ltr;
display: inline-flex; align-items: center; justify-content: center;
user-select: none; -webkit-font-smoothing: antialiased;
}

/* ── HEADER ── */
header {
background: var(--surface);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 100;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.header-inner {
max-width: 700px; margin: 0 auto;
display: flex; align-items: center; gap: 10px;
padding: 10px 16px;
}
.logo-cross {
width: 28px; height: 28px; position: relative; flex-shrink: 0; cursor: pointer;
}
.logo-cross::before,.logo-cross::after {
content:''; position:absolute; background:var(--gold); border-radius:2px;
}
.logo-cross::before { width:6px; height:28px; left:50%; transform:translateX(-50%) }
.logo-cross::after  { width:28px; height:6px; top:28% }
.header-search {
flex: 1; display: flex; align-items: center; gap: 10px;
background: var(--surface2);
border: 1.5px solid var(--border);
border-radius: 30px; padding: 9px 16px;
transition: var(--transition);
}
.header-search:focus-within {
border-color: var(--gold);
background: var(--surface3);
}
.header-search input {
flex: 1; background: none; border: none; outline: none;
font-family: 'Nunito', sans-serif; font-size: 15px;
color: var(--text); font-weight: 500;
}
.header-search input::placeholder { color: var(--text-muted); font-weight: 400 }
.dark-toggle {
background: var(--surface2); border: 1.5px solid var(--border);
border-radius: 50%; width: 36px; height: 36px; flex-shrink: 0;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: var(--transition); color: var(--text-sub);
}
.dark-toggle:hover { border-color: var(--gold); color: var(--gold) }

/* ── MAIN ── */
/*#app { display: flex; flex-direction: column; min-height: 100vh }*/
main { flex: 1; max-width: 700px; margin: 0 auto; width: 100%; padding: 0 16px 0; }

/* ── ADS ── */
.ad-box {
background: var(--surface2);
border: 1px dashed rgba(254,169,33,.2);
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
color: var(--text-muted); font-size: 11px; letter-spacing: 1px;
text-transform: uppercase; margin: 15px 0;
}
.ad-box.sm { min-height: 60px }
.ad-box.lg { min-height: 200px; flex-direction: column; gap: 6px }
.ad-box.lg span { font-size: 13px; color: var(--text-muted) }

/* ── VIEWS ── */
.view { display: none; animation: fadeUp .25s ease; }
.view.active { display: block }
@keyframes fadeUp {
from { opacity:0; transform:translateY(10px) }
to   { opacity:1; transform:translateY(0) }
}

div#view-saved, #view-about, #view-detail {
    padding: 0 16px;
    margin-bottom: 80px;
}

/* ── HOME HERO ── */
.home-hero {
text-align: center; padding: 32px 16px 20px;
}
.hero-cross {width: 44px;height: 55px;position: relative;margin: 0 auto 14px;}
.hero-cross::before,.hero-cross::after {
content:''; position:absolute; background:var(--gold); border-radius:3px;
}
.hero-cross::before {width:10px;height: 56px;left:50%;transform:translateX(-50%)}
.hero-cross::after  {width:44px;height:10px;top: 15px;margin: auto;text-align: center;left: 0;right: 0;}
.hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(26px, 7vw, 40px);
font-weight: 700; color: var(--gold);
letter-spacing: .04em; line-height: 1.1; margin-bottom: 6px;
}
.hero-sub {
font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
color: var(--text-sub); font-weight: 600; margin-bottom: 20px;
}
.stats-row {
display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.stat { text-align: center }
.stat-num { font-size: 22px; font-weight: 800; color: var(--gold) }
.stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px }

/* ── HOME SEARCH BAR ── */
.home-searchbar {
display: flex; align-items: center; gap: 12px;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 30px; padding: 13px 20px;
margin-bottom: 16px; cursor: text;
transition: var(--transition);
box-shadow: var(--shadow);
}
.home-searchbar:focus-within { border-color: var(--gold) }
.home-searchbar input {
flex: 1; background: none; border: none; outline: none;
font-family: 'Nunito', sans-serif; font-size: 15px;
color: var(--text); font-weight: 500;
}
.home-searchbar input::placeholder { color: var(--text-muted) }

/* ── CHIP ROWS ── */
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; scrollbar-width: none }
.chip-row::-webkit-scrollbar { display: none }
.chip {
flex-shrink: 0; padding: 7px 18px; border-radius: 30px;
border: 1.5px solid var(--border);
background: var(--surface); color: var(--text-sub);
font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 600;
cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.chip.gu { font-family: 'Noto Sans Gujarati', sans-serif }
.chip.hi { font-family: 'Noto Sans Devanagari', sans-serif }
.chip.active { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 700 }
.chip:hover:not(.active) { border-color: var(--gold); color: var(--gold) }

/* ── COMMUNITY GRID ── */
.comm-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px; margin-bottom: 80px;
}
.comm-card {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius); padding: 18px 14px;
cursor: pointer; transition: var(--transition);
display: flex; flex-direction: column; align-items: center;
gap: 8px; text-align: center; position: relative; overflow: hidden;
}
.comm-card::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
background: var(--gold); opacity: 0; transition: var(--transition);
}
.comm-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow) }
.comm-card:hover::after { opacity: 1 }
.comm-icon { font-size: 28px; margin-bottom: 2px }
.comm-name { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3 }
.comm-count { font-size: 11px; color: var(--text-muted); background: var(--surface2); padding: 2px 10px; border-radius: 20px; margin-top: 2px }

/* ── SONG CARDS ── */
.songs-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 80px;}
.song-card {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
padding: 14px 14px; cursor: pointer;
transition: var(--transition);
display: flex; align-items: center; gap: 12px;
}
.song-card:hover { border-color: var(--gold); background: var(--surface2); transform: translateX(2px) }
.song-num {
font-family: 'Playfair Display', serif;
font-size: 14px; font-weight: 700; color: var(--gold);
min-width: 38px; text-align: center; flex-shrink: 0;
background: var(--gold-dim); border-radius: var(--radius-xs);
padding: 4px 6px; line-height: 1.2;
}
.song-info { flex: 1; min-width: 0 }
.song-title { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.song-title.gu { font-family: 'Noto Sans Gujarati', sans-serif; font-size: 14px }
.song-title.hi { font-family: 'Noto Sans Devanagari', sans-serif }
.song-meta {
display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap;
}
.meta-tag {
font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
background: var(--gold-dim); color: var(--gold); letter-spacing: .3px;
}
.meta-author { font-size: 12px; color: var(--text-muted) }
.song-save-btn {
background: none; border: none; cursor: pointer; padding: 6px;
border-radius: 50%; transition: var(--transition); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: var(--text-muted);
}
.song-save-btn:hover { background: var(--gold-dim); color: var(--gold) }
.song-save-btn.saved { color: var(--gold) }
.song-arrow { color: var(--text-muted); flex-shrink: 0; display: flex; align-items: center }
.empty-state { text-align: center; padding: 50px 20px; color: var(--text-muted) }
.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: .4 }

/* ── VIEW HEADER ── */
.view-header {
display: flex; align-items: center; gap: 12px;
padding: 16px 0 14px; margin-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.back-btn {
background: var(--surface2); border: 1.5px solid var(--border);
border-radius: 50%; width: 36px; height: 36px; flex-shrink: 0;
cursor: pointer; display: flex; align-items: center; justify-content: center;
color: var(--text-sub); transition: var(--transition);
}
.back-btn:hover { border-color: var(--gold); color: var(--gold) }
.view-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--text); flex: 1 }
.view-count { font-size: 12px; color: var(--text-muted); font-weight: 600 }

/* ── DETAIL ── */
.detail-top { padding: 18px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px }
.detail-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap }
.comm-badge {
font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
font-weight: 700; padding: 4px 12px; border-radius: 20px;
background: var(--gold-dim); color: var(--gold); border: 1px solid var(--gold-border);
}
.song-num-badge { font-size: 13px; color: var(--text-muted); font-weight: 600 }
.detail-title { font-family: 'Playfair Display', serif; font-size: clamp(22px,6vw,32px); font-weight: 700; color: var(--text); line-height: 1.2; margin-bottom: 5px }
.detail-author { font-size: 14px; color: var(--text-sub); font-style: italic }
.lang-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap }
.lang-tab {
padding: 7px 18px; border-radius: 30px;
border: 1.5px solid var(--border); background: var(--surface);
font-size: 13px; cursor: pointer; transition: var(--transition);
font-family: 'Nunito', sans-serif; color: var(--text-sub); font-weight: 600;
}
.lang-tab.gu { font-family: 'Noto Sans Gujarati', sans-serif }
.lang-tab.hi { font-family: 'Noto Sans Devanagari', sans-serif }
.lang-tab.active { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 700 }
.font-ctrl { display: flex; align-items: center; gap: 8px; margin-bottom: 16px }
.font-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px }
.font-btn {
width: 30px; height: 30px; border-radius: 50%;
border: 1.5px solid var(--border); background: var(--surface2);
cursor: pointer; font-size: 16px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
color: var(--text); transition: var(--transition);
}
.font-btn:hover { background: var(--gold); color: #000; border-color: var(--gold) }
.font-val { font-size: 13px; color: var(--text); min-width: 28px; text-align: center; font-weight: 700 }
.lyrics-box {
background: var(--surface); border-radius: var(--radius);
padding: 24px 20px; margin-bottom: 16px;
border: 1px solid var(--border); box-shadow: var(--shadow);
}
.lyrics-verse { margin-bottom: 20px }
.lyrics-verse:last-child { margin-bottom: 0 }
.lyric-line { font-size: 18px; line-height: 1.95; color: var(--text); font-weight: 500; transition: font-size .2s }
.lyric-line.gu { font-family: 'Noto Sans Gujarati', sans-serif }
.lyric-line.hi { font-family: 'Noto Sans Devanagari', sans-serif }
.verse-sep { border: none; border-top: 1px solid var(--border); margin: 14px 0 }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px }
.act-btn {
display: flex; align-items: center; gap: 6px;
padding: 10px 18px; border-radius: 30px;
border: 1.5px solid var(--border); background: var(--surface);
cursor: pointer; font-size: 13px; font-weight: 700;
color: var(--text-sub); transition: var(--transition);
font-family: 'Nunito', sans-serif;
}
.act-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim) }
.act-btn.primary { background: var(--gold); color: #000; border-color: var(--gold) }
.act-btn.primary:hover { opacity: .85 }
.act-btn.saved-active { background: var(--gold-dim); color: var(--gold); border-color: var(--gold) }
.pn-nav { display: flex; gap: 10px; margin-bottom: 8px }
.pn-btn {
flex: 1; padding: 12px; border-radius: var(--radius-sm);
background: var(--surface); border: 1.5px solid var(--border);
cursor: pointer; transition: var(--transition);
font-family: 'Nunito', sans-serif; text-align: left;
}
.pn-btn:hover { border-color: var(--gold) }
.pn-btn.right { text-align: right }
.pn-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px }
.pn-title { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* ── SEARCH ── */
.search-label { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; font-weight: 600 }
.section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); font-weight: 700; padding: 12px 0 6px }
mark { background: rgba(254,169,33,.25); color: var(--text); border-radius: 3px; padding: 0 2px }

/* ── SAVED ── */
.saved-empty { text-align: center; padding: 60px 20px }
.saved-empty .ei { color: var(--gold); opacity: .35; margin-bottom: 16px }
.saved-empty h3 { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--text); margin-bottom: 8px }
.saved-empty p { font-size: 14px; color: var(--text-muted); line-height: 1.7 }

/* ── ABOUT ── */
.about-wrap { padding: 20px 0 8px; margin-bottom: 80px}
.about-hero { text-align: center; padding: 30px 16px 24px }
.about-cross { width: 52px; height: 52px; position: relative; margin: 0 auto 16px }
.about-cross::before,.about-cross::after { content:''; position:absolute; background:var(--gold); border-radius:3px }
.about-cross::before {width:12px;height: 56px;left:50%;transform:translateX(-50%)}
.about-cross::after  {width: 44px;height:12px;top: 15px;left: 0;right: 0;margin: auto;}
.about-name { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: var(--gold); margin-bottom: 4px }
.about-tagline { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-sub) }
.about-card {
background: var(--surface); border-radius: var(--radius);
padding: 20px; margin-bottom: 10px; border: 1px solid var(--border);
}
.about-card-title { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); font-weight: 700; margin-bottom: 14px }
.about-dev { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 6px }
.about-desc { font-size: 13px; color: var(--text-sub); line-height: 1.65; margin-bottom: 14px }
.about-email {
display: flex; align-items: center; gap: 10px;
font-size: 14px; font-weight: 700; color: var(--text);
text-decoration: none; background: var(--surface2);
padding: 13px 16px; border-radius: var(--radius-sm);
border: 1px solid var(--border); transition: var(--transition);
word-break: break-all;
}
.about-email:hover { border-color: var(--gold); color: var(--gold) }
.feat-item { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border) }
.feat-item:last-child { border-bottom: none; padding-bottom: 0 }
.feat-icon { flex-shrink: 0; color: var(--gold); margin-top: 1px }
.feat-text { font-size: 13px; color: var(--text-sub); line-height: 1.5 }
.feat-text strong { color: var(--text); display: block; font-size: 14px; font-weight: 700; margin-bottom: 1px }
.about-ver { text-align: center; font-size: 12px; color: var(--text-muted); padding: 14px 0 6px }

/* ── BOTTOM NAV ── */
.bottom-nav {
background: var(--surface);
border-top: 1px solid var(--border);
display: flex; z-index: 90;
box-shadow: 0 -4px 24px rgba(0,0,0,.3);
position: fixed; bottom: 0; width: 100%;
}
.bnav-btn {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 10px 4px 9px; cursor: pointer; border: none; background: none;
font-family: 'Nunito', sans-serif; color: var(--text-muted);
font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
transition: var(--transition);
}
.bnav-btn:hover,.bnav-btn.active { color: var(--gold) }
.bnav-btn.active .bnav-icon { color: var(--gold) }
.bnav-icon { font-size: 22px; display: block }

/* ── TOAST ── */
.toast {
position: fixed; bottom: 74px; left: 50%; transform: translateX(-50%);
background: var(--surface3); color: var(--text);
border: 1px solid var(--gold-border);
padding: 11px 22px; border-radius: 30px; font-size: 13px; font-weight: 700;
box-shadow: var(--shadow-lg); z-index: 1000;
opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap;
}
.toast.show { opacity: 1 }

@media(max-width:480px) {
.hero-title { font-size: 26px }
.lyrics-box { padding: 18px 14px }
.detail-actions { justify-content: center }
}