@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Abril+Fatface:wght@400&display=swap');

:root{
  --background:36 33% 98%;
  --foreground:220 10% 12%;
  --card:0 0% 100%;
  --card-foreground:220 10% 12%;
  --primary:204 100% 50%;
  --primary-foreground:0 0% 100%;
  --secondary:220 14% 94%;
  --secondary-foreground:220 10% 18%;
  --muted:220 14% 94%;
  --muted-foreground:220 8% 45%;
  --accent:36 42% 78%;
  --accent-foreground:30 20% 15%;
  --destructive:0 72% 51%;
  --destructive-foreground:0 0% 98%;
  --border:220 14% 88%;
  --input:220 14% 90%;
  --ring:204 100% 50%;
  --radius:0.75rem;
  --font-heading:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  padding-bottom:88px; /* hapësirë për mini-player */
}
h1,h2,h3,h4,h5,.font-heading{font-family:var(--font-heading);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
::selection{background:hsl(var(--primary)/.25);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:hsl(var(--background));}
::-webkit-scrollbar-thumb{background:hsl(var(--border));border-radius:10px;}

.wrap{max-width:1280px;margin:0 auto;padding:0 1.25rem;}
@media(min-width:640px){.wrap{padding:0 1.5rem;}}
@media(min-width:1024px){.wrap{padding:0 2rem;}}

/* ---------- HEADER / NAVBAR ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .4s ease;background:hsla(36,33%,98%,.92);backdrop-filter:blur(14px);box-shadow:0 2px 24px rgba(0,0,0,.06);border-bottom:1px solid hsl(var(--border));}
.site-header.scrolled{background:hsla(36,33%,98%,.97);box-shadow:0 2px 24px rgba(0,0,0,.09);}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 1.25rem;height:72px;display:flex;align-items:center;justify-content:space-between;}
@media(min-width:640px){.nav-inner{height:80px;padding:0 1.5rem;}}
.brand{display:flex;align-items:center;gap:.75rem;}
.brand-chip{background:#000;border-radius:.75rem;padding:.4rem;display:flex;}
.brand-chip img{width:34px;height:34px;object-fit:contain;}
.brand-name{font-family:var(--font-heading);font-weight:700;letter-spacing:.03em;font-size:1.05rem;}
.brand-name span{color:hsl(var(--primary));}
.nav-links{display:none;align-items:center;gap:.25rem;}
@media(min-width:1024px){.nav-links{display:flex;}}
.nav-links a{padding:.5rem 1rem;font-size:.9rem;font-weight:500;border-radius:999px;color:hsl(var(--muted-foreground));position:relative;transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:hsl(var(--foreground));}
.nav-links a.active::after{content:"";position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:hsl(var(--primary));}
.nav-actions{display:flex;align-items:center;gap:.25rem;}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:999px;color:hsl(var(--muted-foreground));position:relative;border:none;background:transparent;}
.icon-btn:hover{background:hsl(var(--foreground)/.05);color:hsl(var(--foreground));}
.cart-badge{position:absolute;top:-2px;right:-2px;background:hsl(var(--accent));color:hsl(var(--accent-foreground));font-size:10px;font-weight:700;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;}
.account-link{display:none;align-items:center;gap:.4rem;padding:0 .75rem;height:40px;border-radius:999px;font-size:.875rem;font-weight:500;color:hsl(var(--muted-foreground));}
@media(min-width:640px){.account-link{display:flex;}}
.account-link:hover{background:hsl(var(--foreground)/.05);color:hsl(var(--foreground));}
.mobile-toggle{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:transparent;border:none;color:hsl(var(--foreground));}
@media(min-width:1024px){.mobile-toggle{display:none;}}
.mobile-menu{display:none;background:hsla(36,33%,98%,.97);backdrop-filter:blur(14px);border-top:1px solid hsl(var(--border));}
.mobile-menu.open{display:block;}
.mobile-menu .wrap{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.25rem;}
.mobile-menu a{padding:.75rem 1rem;border-radius:.75rem;font-weight:500;color:hsl(var(--muted-foreground));}
.mobile-menu a.active{background:hsl(var(--primary)/.1);color:hsl(var(--primary));}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:.9rem;padding:.75rem 1.5rem;border-radius:999px;border:none;transition:all .2s;}
.btn-primary{background:hsl(var(--foreground));color:hsl(var(--background));}
.btn-primary:hover{background:hsl(var(--primary));color:#fff;transform:translateY(-1px);}
.btn-outline{background:transparent;border:1.5px solid hsl(var(--border));color:hsl(var(--foreground));}
.btn-outline:hover{border-color:hsl(var(--primary));color:hsl(var(--primary));}
.btn-accent{background:hsl(var(--primary));color:#fff;}
.btn-accent:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn-block{width:100%;}
.btn-sm{padding:.5rem 1rem;font-size:.8rem;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;background:#0b0d10;}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,12,.35) 0%,rgba(8,10,12,.55) 55%,rgba(8,10,12,.92) 100%);}
.hero-content{position:relative;z-index:2;color:#fff;padding:8rem 0 5rem;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:hsl(36 42% 78%);margin-bottom:1.25rem;}
.hero h1{font-size:clamp(2.6rem,7vw,5.5rem);line-height:.98;font-weight:800;margin:0 0 1rem;}
.hero h1 em{font-style:italic;font-family:'Abril Fatface',serif;font-weight:400;color:hsl(36 42% 78%);}
.hero p{max-width:34rem;font-size:1.1rem;color:rgba(255,255,255,.8);margin-bottom:2rem;line-height:1.6;}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;}

/* ---------- SECTIONS ---------- */
section{padding:5rem 0;}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2.5rem;}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:hsl(var(--primary));margin-bottom:.5rem;display:block;}
.section-head h2{font-size:clamp(1.8rem,3.5vw,2.75rem);font-weight:800;margin:0;}
.section-sub{color:hsl(var(--muted-foreground));max-width:36rem;margin-top:.5rem;}

/* ---------- GRIDS / CARDS ---------- */
.grid{display:grid;gap:1.5rem;}
.grid-2{grid-template-columns:repeat(1,1fr);}
.grid-3{grid-template-columns:repeat(1,1fr);}
.grid-4{grid-template-columns:repeat(2,1fr);}
@media(min-width:640px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-2{grid-template-columns:repeat(2,1fr);}}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr);}.grid-4{grid-template-columns:repeat(4,1fr);}}

.card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:1.25rem;overflow:hidden;transition:all .25s;}
.card:hover{box-shadow:0 12px 32px rgba(0,0,0,.08);transform:translateY(-3px);border-color:hsl(var(--primary)/.3);}

.song-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:1.25rem;overflow:hidden;transition:all .25s;display:flex;flex-direction:column;}
.song-card:hover{box-shadow:0 12px 32px rgba(0,0,0,.08);transform:translateY(-3px);}
.song-art{position:relative;aspect-ratio:1/1;overflow:hidden;background:hsl(var(--secondary));}
.song-art img{width:100%;height:100%;object-fit:cover;}
.play-overlay{position:absolute;inset:0;background:rgba(8,10,12,.35);opacity:0;display:grid;place-items:center;transition:opacity .2s;}
.song-art:hover .play-overlay{opacity:1;}
.play-btn{width:52px;height:52px;border-radius:50%;background:hsl(var(--primary));color:#fff;display:grid;place-items:center;border:none;box-shadow:0 6px 20px rgba(0,0,0,.25);}
.song-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;flex:1;}
.song-title{font-weight:700;font-size:.98rem;}
.song-sub{font-size:.82rem;color:hsl(var(--muted-foreground));}
.song-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem;}
.price-tag{font-weight:700;font-family:var(--font-heading);}

.album-card{position:relative;border-radius:1.5rem;overflow:hidden;background:#0b0d10;color:#fff;aspect-ratio:4/5;}
.album-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.album-card:hover img{transform:scale(1.06);}
.album-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;}
.album-card-overlay .badge{align-self:flex-start;margin-bottom:.5rem;}
.album-card-overlay h3{font-size:1.3rem;margin:0 0 .25rem;}
.album-card-overlay p{font-size:.82rem;color:rgba(255,255,255,.7);margin:0;}

.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;background:hsl(var(--primary)/.12);color:hsl(var(--primary));}
.badge-accent{background:hsl(var(--accent)/.25);color:hsl(var(--accent-foreground));}
.badge-dark{background:rgba(255,255,255,.15);color:#fff;backdrop-filter:blur(6px);}

/* ---------- FORMS ---------- */
.form-group{margin-bottom:1.15rem;}
.form-group label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.4rem;}
.form-control{width:100%;padding:.75rem 1rem;border-radius:.75rem;border:1.5px solid hsl(var(--border));background:hsl(var(--card));font-family:inherit;font-size:.95rem;color:hsl(var(--foreground));}
.form-control:focus{outline:none;border-color:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary)/.15);}
textarea.form-control{resize:vertical;min-height:110px;}
.auth-card{max-width:440px;margin:9rem auto 5rem;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:1.5rem;padding:2.5rem;box-shadow:0 20px 60px rgba(0,0,0,.06);}
.auth-card h1{font-size:1.6rem;margin:0 0 .4rem;}
.auth-card .muted{color:hsl(var(--muted-foreground));font-size:.9rem;margin-bottom:1.75rem;}
.alert{padding:.85rem 1rem;border-radius:.75rem;font-size:.88rem;margin-bottom:1.25rem;}
.alert-error{background:hsl(var(--destructive)/.1);color:hsl(var(--destructive));border:1px solid hsl(var(--destructive)/.25);}
.alert-success{background:hsl(150 60% 92%);color:hsl(150 60% 25%);border:1px solid hsl(150 40% 70%);}

/* ---------- FOOTER ---------- */
.site-footer{margin-top:6rem;border-top:1px solid hsl(var(--border));background:hsl(var(--secondary)/.4);}
.footer-grid{display:grid;gap:2.5rem;padding:3.5rem 0;grid-template-columns:1fr;}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr;}}
.footer-grid h4{font-family:var(--font-heading);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem;}
.footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem;font-size:.9rem;color:hsl(var(--muted-foreground));}
.footer-grid ul a:hover{color:hsl(var(--primary));}
.footer-desc{color:hsl(var(--muted-foreground));font-size:.9rem;line-height:1.6;max-width:26rem;margin:1rem 0 1.25rem;}
.social-row{display:flex;gap:.75rem;}
.social-row a{
  width:42px;height:42px;border-radius:50%;
  border:1px solid hsl(var(--border));
  background:hsl(var(--secondary)/.6);
  display:grid;place-items:center;
  color:hsl(var(--muted-foreground));
  position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.social-row a::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  opacity:0;transform:scale(.5);
  transition:opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  z-index:0;
}
.social-row a svg{position:relative;z-index:1;transition:transform .3s ease;}
.social-row a:hover{transform:translateY(-4px) scale(1.08);color:#fff;border-color:transparent;box-shadow:0 8px 20px -6px rgba(0,0,0,.35);}
.social-row a:hover svg{transform:scale(1.08);}
.social-row a:hover::before{opacity:1;transform:scale(1);}
.social-row a.social-ig::before{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);}
.social-row a.social-fb::before{background:#1877F2;}
.social-row a.social-yt::before{background:#FF0000;}
.social-row a.social-tt::before{background:linear-gradient(135deg,#25F4EE,#000 45%,#FE2C55 90%);}
.footer-bottom{border-top:1px solid hsl(var(--border));padding:1.25rem 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;font-size:.78rem;color:hsl(var(--muted-foreground));}

/* ---------- MINI PLAYER ---------- */
.mini-player{position:fixed;bottom:0;left:0;right:0;z-index:60;background:#0b0d10;color:#fff;border-top:1px solid rgba(255,255,255,.08);transform:translateY(100%);transition:transform .3s ease;}
.mini-player.active{transform:translateY(0);}
.mini-player-inner{max-width:1280px;margin:0 auto;padding:.6rem 1.25rem;display:flex;align-items:center;gap:1rem;}
.mp-art{width:46px;height:46px;border-radius:.6rem;overflow:hidden;flex-shrink:0;background:#222;}
.mp-art img{width:100%;height:100%;object-fit:cover;}
.mp-info{min-width:0;flex-shrink:0;width:150px;}
.mp-info .t{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mp-info .s{font-size:.72rem;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mp-controls{display:flex;align-items:center;gap:.75rem;}
.mp-controls button{background:transparent;border:none;color:#fff;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;}
.mp-controls button:hover{background:rgba(255,255,255,.1);}
.mp-controls .play{background:#fff;color:#0b0d10;width:38px;height:38px;}
.mp-controls .play:hover{background:hsl(var(--primary));color:#fff;}
.mp-progress{flex:1;display:flex;align-items:center;gap:.6rem;min-width:0;}
.mp-progress .time{font-size:.7rem;color:rgba(255,255,255,.55);width:34px;text-align:center;flex-shrink:0;}
.mp-bar{flex:1;height:4px;background:rgba(255,255,255,.15);border-radius:99px;position:relative;cursor:pointer;}
.mp-bar-fill{position:absolute;left:0;top:0;bottom:0;background:hsl(var(--primary));border-radius:99px;width:0%;}
.mp-preview-note{font-size:.68rem;color:hsl(36 42% 78%);white-space:nowrap;}
.mp-buy{flex-shrink:0;}

/* ---------- MISC ---------- */
.container-narrow{max-width:840px;margin:0 auto;}
.muted{color:hsl(var(--muted-foreground));}
.center{text-align:center;}
.split{display:grid;gap:3rem;grid-template-columns:1fr;align-items:center;}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;}}
.rounded-img{border-radius:1.5rem;overflow:hidden;}
.stat-row{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:2rem;}
.stat-row div b{display:block;font-family:var(--font-heading);font-size:1.8rem;}
.stat-row div span{font-size:.8rem;color:hsl(var(--muted-foreground));}
table.data-table{width:100%;border-collapse:collapse;font-size:.9rem;}
table.data-table th,table.data-table td{padding:.75rem 1rem;border-bottom:1px solid hsl(var(--border));text-align:left;}
table.data-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--muted-foreground));}
.empty-state{text-align:center;padding:4rem 1rem;color:hsl(var(--muted-foreground));}
.breadcrumb{font-size:.85rem;color:hsl(var(--muted-foreground));margin:6.5rem 0 1.5rem;}
.breadcrumb a:hover{color:hsl(var(--primary));}
.page-head{padding:8.5rem 0 3rem;}
.page-head h1{font-size:clamp(2rem,4.5vw,3rem);margin:0 0 .5rem;}