/* =====================================================================
   উপকূলবন্ধুর গানের লিরিক্স — public theme
   Coastal dusk · watercolour · literary Bengali
   ===================================================================== */

:root{
    --c-paper:#F7F2E9;
    --c-ink:#211D1A;
    --c-ink-soft:#574F46;
    --c-sea:#15314B;
    --c-sea-2:#1E4664;
    --c-tide:#2C7A7B;
    --c-sun:#D98324;
    --c-sun-2:#C2711B;
    --c-sand:#EADFC8;
    --c-sand-2:#E2D4B7;
    --c-line:#E0D5BE;
    --c-white:#ffffff;
    --shadow-sm:0 2px 10px rgba(33,29,26,.06);
    --shadow-md:0 10px 30px rgba(21,49,75,.10);
    --shadow-lg:0 20px 55px rgba(21,49,75,.16);
    --radius:16px;
    --radius-sm:10px;
    --font-body:"Hind Siliguri","Noto Sans Bengali","SolaimanLipi",system-ui,sans-serif;
    --font-display:"Tiro Bangla","Noto Serif Bengali","Hind Siliguri",serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:var(--font-body);
    color:var(--c-ink);
    background:var(--c-paper);
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
body[data-copy-protect="1"]{
    -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}
a{color:var(--c-sea);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--c-tide)}
img{max-width:100%;height:auto}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:var(--c-sea);line-height:1.4}

.skip-link{position:absolute;left:-999px;top:0;background:var(--c-sun);color:#fff;padding:.6rem 1rem;border-radius:0 0 8px 0;z-index:1200}
.skip-link:focus{left:0;color:#fff}

/* ---------- Buttons ---------- */
.btn-sun{background:var(--c-sun);border:1px solid var(--c-sun);color:#fff;font-weight:600;border-radius:999px;padding:.55rem 1.4rem}
.btn-sun:hover,.btn-sun:focus{background:var(--c-sun-2);border-color:var(--c-sun-2);color:#fff;box-shadow:0 6px 18px rgba(217,131,36,.32)}
.btn-outline-sea{border:1px solid var(--c-sea);color:var(--c-sea);background:transparent;font-weight:600;border-radius:999px;padding:.5rem 1.2rem}
.btn-outline-sea:hover{background:var(--c-sea);color:#fff}

/* =====================================================================
   Splash
   ===================================================================== */
.splash{
    position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 50% 40%,var(--c-sea-2),var(--c-sea) 70%);
    opacity:1;transition:opacity .8s ease,visibility .8s ease;
}
.splash.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.splash__inner{position:relative;text-align:center;animation:splashIn 1s ease both}
.splash__halo{
    position:absolute;left:50%;top:38%;width:280px;height:280px;transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(217,131,36,.55),rgba(217,131,36,0) 65%);
    filter:blur(6px);animation:halo 2.6s ease-in-out infinite;
}
.splash__logo{position:relative;width:150px;height:150px;border-radius:50%;object-fit:cover;
    border:4px solid rgba(255,255,255,.35);box-shadow:0 0 50px rgba(217,131,36,.55)}
.splash__title{position:relative;margin-top:1.1rem;color:#fff;font-family:var(--font-display);font-size:1.5rem;letter-spacing:.5px;text-shadow:0 2px 16px rgba(0,0,0,.35)}
@keyframes splashIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes halo{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}

/* =====================================================================
   Navbar
   ===================================================================== */
.site-header{position:sticky;top:0;z-index:1000}
.site-nav{background:rgba(247,242,233,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-line);padding:.5rem 0}
.brand-mark{border-radius:50%;object-fit:cover;box-shadow:var(--shadow-sm)}
.brand-text{font-family:var(--font-display);font-weight:600;color:var(--c-sea);font-size:1.18rem;line-height:1.2}
.site-nav .nav-link{color:var(--c-ink-soft);font-weight:500;padding:.5rem .9rem;border-radius:8px}
.site-nav .nav-link:hover,.site-nav .nav-link.active{color:var(--c-sea);background:rgba(44,122,123,.10)}
.nav-search{gap:.4rem}
.nav-search .form-control{border-radius:999px;border-color:var(--c-line);min-width:170px}
.nav-search .form-control:focus{border-color:var(--c-tide);box-shadow:0 0 0 .2rem rgba(44,122,123,.15)}
.dropdown-menu{border:1px solid var(--c-line);box-shadow:var(--shadow-md);border-radius:12px}
.dropdown-item:active{background:var(--c-tide)}

/* =====================================================================
   Hero
   ===================================================================== */
.hero{position:relative;padding:4rem 0 5.5rem;background:linear-gradient(160deg,#fbf7ee 0%,#f1e7d2 100%);overflow:hidden}
.hero__bg{position:absolute;inset:0;background:
    radial-gradient(closest-side at 80% 20%,rgba(44,122,123,.18),transparent 60%),
    radial-gradient(closest-side at 12% 80%,rgba(217,131,36,.16),transparent 60%);pointer-events:none}
.hero__eyebrow{text-transform:uppercase;letter-spacing:3px;color:var(--c-tide);font-weight:600;font-size:.8rem;margin-bottom:.4rem}
.hero__name{font-size:clamp(2.1rem,5vw,3.4rem);margin:0 0 1rem;color:var(--c-sea)}
.hero__bio{font-family:var(--font-display);font-size:1.12rem;color:var(--c-ink-soft);max-width:42ch;margin-bottom:1.6rem}
.hero__search{display:flex;gap:.5rem;max-width:480px;margin-bottom:1.1rem}
.hero__search .form-control{border-radius:999px;padding:.7rem 1.2rem;border-color:var(--c-line)}
.hero__search .form-control:focus{border-color:var(--c-tide);box-shadow:0 0 0 .2rem rgba(44,122,123,.15)}
.hero__links{display:flex;gap:.6rem;flex-wrap:wrap}
.hero__portrait{position:relative;display:inline-block}
.hero__portrait::before{content:"";position:absolute;inset:-12px;border-radius:50%;
    background:radial-gradient(circle,rgba(217,131,36,.30),transparent 68%);filter:blur(8px)}
.hero__photo{position:relative;width:min(340px,80vw);aspect-ratio:1/1.18;object-fit:cover;border-radius:24px;
    box-shadow:var(--shadow-lg);border:6px solid #fff}
.hero__wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0}
.hero__wave svg{width:100%;height:90px;display:block}
.hero__wave path{fill:var(--c-paper)}

/* =====================================================================
   Sections & cards
   ===================================================================== */
.section{padding:3.2rem 0}
.section--alt{background:linear-gradient(180deg,#fff 0%,#fbf7ef 100%)}
.section--contact{background:var(--c-sand);background:linear-gradient(180deg,#f1e7d2,#eadfc8)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.6rem}
.section-title{position:relative;font-size:clamp(1.4rem,3vw,1.9rem);margin:0;padding-bottom:.5rem}
.section-title::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:4px;border-radius:4px;background:var(--c-sun)}
.section-more{font-weight:600;color:var(--c-tide);white-space:nowrap}

.song-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--c-line);
    border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.song-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--c-sand-2)}
.song-card__body{display:block;padding:1.15rem 1.2rem .6rem;color:inherit;flex:1}
.song-card__body:hover{color:inherit}
.song-card__title{font-size:1.16rem;margin:0 0 .55rem;color:var(--c-sea)}
.song-card:hover .song-card__title{color:var(--c-tide)}
.song-card__badge{display:inline-block;background:rgba(44,122,123,.12);color:var(--c-tide);font-size:.74rem;font-weight:600;
    padding:.18rem .6rem;border-radius:999px;margin-bottom:.5rem}
.song-card__excerpt{font-family:var(--font-display);color:var(--c-ink-soft);font-size:.96rem;margin:0}
.song-card__meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem 1.2rem 1rem;
    color:var(--c-ink-soft);font-size:.82rem;border-top:1px dashed var(--c-line);margin-top:.4rem}
.song-card__stats{display:flex;gap:.7rem}

.empty-state{text-align:center;padding:2.6rem 1rem;color:var(--c-ink-soft);background:#fff;border:1px dashed var(--c-line);border-radius:var(--radius)}
.empty-state .section-title{display:inline-block}

/* ---------- Contact cards ---------- */
.contact-card{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);padding:1.6rem 1.3rem;text-align:center;height:100%;box-shadow:var(--shadow-sm)}
.contact-card__icon{font-size:1.8rem;margin-bottom:.5rem}
.contact-card__label{font-size:1rem;color:var(--c-tide);margin:0 0 .3rem}
.contact-card__value{margin:0;font-weight:500;color:var(--c-ink);word-break:break-word}

/* =====================================================================
   Page heads (category / search / error)
   ===================================================================== */
.page-head{position:relative;background:linear-gradient(150deg,var(--c-sea) 0%,var(--c-sea-2) 100%);color:#fff;padding:3rem 0 4rem;text-align:center}
.page-head__eyebrow{text-transform:uppercase;letter-spacing:3px;color:var(--c-sand);font-size:.78rem;font-weight:600;margin-bottom:.3rem}
.page-head__title{color:#fff;font-size:clamp(1.8rem,4vw,2.7rem);margin:0}
.page-head__count{color:var(--c-sand);margin:.5rem 0 0}
.page-head__wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0}
.page-head__wave svg{width:100%;height:70px;display:block}
.page-head__wave path{fill:var(--c-paper)}
.search-form{display:flex;flex-wrap:wrap;gap:.6rem;max-width:760px;margin:1.4rem auto 0}
.search-form .form-control,.search-form .form-select{border-radius:999px;border:none;padding:.7rem 1.2rem}
.search-form .form-control{flex:1 1 260px}
.search-form .form-select{flex:0 1 220px}
.search-summary{font-size:1.05rem;margin-bottom:1.4rem;color:var(--c-ink-soft)}

/* =====================================================================
   Song detail
   ===================================================================== */
.song-hero{background:linear-gradient(150deg,var(--c-sea) 0%,var(--c-sea-2) 100%);color:#fff;padding:2.4rem 0 2.6rem}
.song-crumbs{font-size:.86rem;color:var(--c-sand);margin-bottom:1rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.song-crumbs a{color:var(--c-sand)}
.song-crumbs a:hover{color:#fff}
.song-crumbs .current{color:#fff;font-weight:500}
.song-title{color:#fff;font-size:clamp(1.7rem,4vw,2.6rem);margin:0 0 1rem}
.song-attrs{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center}
.song-attr{display:inline-flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
    color:#fff;border-radius:999px;padding:.3rem .85rem;font-size:.85rem}
.song-attr--cat{background:var(--c-sun);border-color:var(--c-sun);font-weight:600}
.song-attr--cat:hover{background:var(--c-sun-2);color:#fff}
.song-body{padding:2.4rem 0 1rem}

.block-title{font-size:1.25rem;margin:0 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--c-sand-2);color:var(--c-sea)}
.lyrics-sheet{background:#fff;border:1px solid var(--c-line);border-left:5px solid var(--c-sun);border-radius:var(--radius);
    padding:1.8rem 1.8rem;box-shadow:var(--shadow-sm)}
.lyrics-text{font-family:var(--font-display);font-size:1.22rem;line-height:2.15;color:var(--c-ink);white-space:pre-line}
.video-block{margin-top:2rem}
.video-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);background:#000}

.audio-card{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm);position:sticky;top:90px}
.audio-player__el{width:100%}
.audio-ui{display:flex;align-items:center;gap:.7rem;background:var(--c-sand);border-radius:var(--radius-sm);padding:.7rem .8rem}
.audio-ui__play{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:none;background:var(--c-sea);color:#fff;font-size:1rem;cursor:pointer;display:grid;place-items:center;transition:background .18s ease}
.audio-ui__play:hover{background:var(--c-tide)}
.audio-ui__main{flex:1;min-width:0}
.audio-ui__seek{width:100%;accent-color:var(--c-sun);cursor:pointer}
.audio-ui__time{display:flex;justify-content:space-between;font-size:.74rem;color:var(--c-ink-soft);margin-top:.2rem}
.audio-ui__vol{display:flex;align-items:center;gap:.3rem}
.audio-ui__volume{width:70px;accent-color:var(--c-tide);cursor:pointer}

.lyricist-mini{display:flex;align-items:center;gap:.75rem;margin-top:1.4rem;padding-top:1.2rem;border-top:1px dashed var(--c-line)}
.lyricist-mini__photo{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--c-sand-2)}
.lyricist-mini__label{display:block;font-size:.74rem;color:var(--c-tide);text-transform:uppercase;letter-spacing:1px}
.lyricist-mini__name{display:block;font-weight:600;font-family:var(--font-display);color:var(--c-sea)}
.song-foot{padding:1.5rem 0 3rem}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer{position:relative;background:var(--c-sea);color:#d7e1ea;padding:3.5rem 0 1.6rem;margin-top:1rem}
.footer-wave{position:absolute;left:0;right:0;top:-1px;line-height:0;transform:translateY(-99%)}
.footer-wave svg{width:100%;height:80px;display:block}
.footer-wave path{fill:var(--c-sea)}
.footer-brand{font-family:var(--font-display);font-size:1.18rem;color:#fff;font-weight:600}
.footer-about{color:#aebccb;font-family:var(--font-display);margin:0;max-width:46ch}
.footer-title{font-size:1rem;color:#fff;margin:0 0 .8rem;letter-spacing:.4px}
.footer-text{color:#cdd8e2;margin:0}
.footer-text a,.footer-contact a{color:var(--c-sand)}
.footer-text a:hover,.footer-contact a:hover{color:#fff}
.footer-contact li{margin-bottom:.45rem}
.footer-contact__label{color:#8ea2b5;margin-right:.25rem}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-top:2.4rem;padding-top:1.2rem;
    border-top:1px solid rgba(255,255,255,.10);font-size:.85rem;color:#9fb0c0}

/* =====================================================================
   Error pages
   ===================================================================== */
.error-section{padding:5rem 0}
.error-box{text-align:center;max-width:540px;margin:0 auto}
.error-code{font-family:var(--font-display);font-size:clamp(4rem,14vw,7rem);color:var(--c-sun);line-height:1}
.error-title{font-size:1.7rem;margin:.4rem 0 .8rem}
.error-text{color:var(--c-ink-soft);margin-bottom:1.6rem}
.error-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* =====================================================================
   Auth (login / apply) — Bengali
   ===================================================================== */
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 20% 20%,#1E4664,#15314B 70%);padding:2rem 1rem}
.auth-wrap{width:100%;max-width:440px}
.auth-card{background:var(--c-paper);border-radius:20px;box-shadow:var(--shadow-lg);padding:2.2rem 2rem}
.auth-brand{display:flex;align-items:center;gap:.7rem;justify-content:center;margin-bottom:1.4rem;color:var(--c-sea)}
.auth-brand span{font-family:var(--font-display);font-weight:600;font-size:1.12rem}
.auth-title{text-align:center;font-size:1.6rem;margin:0 0 .2rem}
.auth-subtitle{text-align:center;color:var(--c-ink-soft);font-size:.95rem;margin-bottom:1.5rem}
.auth-card .form-control{border-radius:10px;border-color:var(--c-line);padding:.6rem .9rem}
.auth-card .form-control:focus{border-color:var(--c-tide);box-shadow:0 0 0 .2rem rgba(44,122,123,.15)}
.auth-card .form-label{font-weight:500;color:var(--c-ink)}
.auth-divider{position:relative;text-align:center;margin:1.4rem 0}
.auth-divider::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--c-line)}
.auth-divider span{position:relative;background:var(--c-paper);padding:0 .8rem;color:var(--c-ink-soft);font-size:.85rem}
.auth-alt{text-align:center;color:var(--c-ink-soft)}
.auth-alt a{font-weight:600;color:var(--c-sun)}
.auth-foot{text-align:center;margin-top:1.2rem}
.auth-foot a{color:#cdd8e2}
.auth-foot a:hover{color:#fff}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:991.98px){
    .nav-search{margin-top:.6rem}
    .audio-card{position:static}
    .section-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:575.98px){
    .hero{padding:2.6rem 0 4rem}
    .lyrics-sheet{padding:1.3rem}
    .lyrics-text{font-size:1.12rem;line-height:2}
    .footer-bottom{justify-content:center;text-align:center}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
    .splash__halo{animation:none}
}