/* ==========================================================
   HASHVIX DASHBOARD
========================================================== */


/* ==========================================================
   DASHBOARD PAGE
========================================================== */

.hx-dashboard{

min-height:100vh;

background:var(--hx-bg);

padding:40px 0 100px;

}


/* ==========================================================
   HEADER
========================================================== */

.hx-dashboard-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:40px;

gap:20px;

flex-wrap:wrap;

}

.hx-dashboard-title h1{

font-size:42px;

font-weight:900;

margin-bottom:8px;

}

.hx-dashboard-title p{

color:var(--hx-text-muted);

}


/* ==========================================================
   TOP GRID
========================================================== */

.hx-dashboard-top{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-bottom:40px;

}


/* ==========================================================
   OVERVIEW CARD
========================================================== */

.hx-overview{

padding:28px;

border-radius:28px;

background:var(--hx-surface);

border:1px solid rgba(255,255,255,.05);

transition:.35s;

position:relative;

overflow:hidden;

}

.hx-overview:hover{

transform:translateY(-8px);

box-shadow:

0 25px 60px rgba(0,0,0,.35);

}

.hx-overview-icon{

width:64px;

height:64px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

background:var(--hx-gradient-primary);

font-size:28px;

color:white;

margin-bottom:22px;

}

.hx-overview-value{

font-size:40px;

font-weight:900;

margin-bottom:8px;

}

.hx-overview-label{

color:var(--hx-text-muted);

font-size:15px;

}


/* ==========================================================
   GROWTH
========================================================== */

.hx-growth{

display:inline-flex;

align-items:center;

gap:8px;

margin-top:20px;

padding:8px 14px;

border-radius:999px;

background:rgba(16,185,129,.12);

color:#10B981;

font-size:13px;

font-weight:700;

}


/* ==========================================================
   MAIN GRID
========================================================== */

.hx-dashboard-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:30px;

}


/* ==========================================================
   PANEL
========================================================== */

.hx-dashboard-panel{

background:var(--hx-surface);

border-radius:30px;

border:1px solid rgba(255,255,255,.05);

padding:30px;

}


/* ==========================================================
   PANEL HEADER
========================================================== */

.hx-panel-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.hx-panel-header h3{

font-size:24px;

font-weight:800;

}

.hx-panel-header a{

color:var(--hx-primary);

font-size:14px;

}


/* ==========================================================
   QUICK ACTIONS
========================================================== */

.hx-actions{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.hx-action{

display:flex;

align-items:center;

gap:16px;

padding:20px;

background:rgba(255,255,255,.04);

border-radius:20px;

transition:.3s;

cursor:pointer;

}

.hx-action:hover{

background:rgba(255,255,255,.07);

transform:translateY(-4px);

}

.hx-action i{

font-size:26px;

color:var(--hx-primary);

}

.hx-action h4{

font-size:16px;

margin-bottom:4px;

}

.hx-action span{

font-size:13px;

color:var(--hx-text-muted);

}


/* ==========================================================
   ANALYTICS PANEL
========================================================== */

.hx-analytics{

display:flex;

flex-direction:column;

gap:25px;

}

.hx-chart{

width:100%;

height:340px;

border-radius:24px;

background:

linear-gradient(

180deg,

rgba(255,255,255,.04),

rgba(255,255,255,.02));

border:1px solid rgba(255,255,255,.05);

display:flex;

align-items:center;

justify-content:center;

color:var(--hx-text-muted);

font-size:15px;

}


/* ==========================================================
   CREDIT CARD
========================================================== */

.hx-credit-card{

padding:32px;

border-radius:30px;

background:

linear-gradient(

135deg,

#2563eb,

#7c3aed);

color:white;

position:relative;

overflow:hidden;

box-shadow:

0 25px 60px rgba(37,99,235,.35);

}

.hx-credit-card::before{

content:"";

position:absolute;

top:-80px;

right:-80px;

width:220px;

height:220px;

border-radius:50%;

background:rgba(255,255,255,.08);

}

.hx-credit-label{

font-size:15px;

opacity:.85;

margin-bottom:10px;

}

.hx-credit-value{

font-size:52px;

font-weight:900;

margin-bottom:8px;

}

.hx-credit-small{

opacity:.75;

font-size:14px;

}


/* ==========================================================
   PREMIUM PANEL
========================================================== */

.hx-premium{

padding:30px;

border-radius:28px;

background:

linear-gradient(

135deg,

rgba(255,215,0,.10),

rgba(255,255,255,.05));

border:1px solid rgba(255,215,0,.18);

}

.hx-premium h3{

margin-bottom:12px;

font-size:24px;

}

.hx-premium p{

color:var(--hx-text-light);

margin-bottom:22px;

}


/* ==========================================================
   RECENT TRACKS
========================================================== */

.hx-track-list{

display:flex;

flex-direction:column;

gap:18px;

}

.hx-track-row{

display:flex;

align-items:center;

justify-content:space-between;

gap:18px;

padding:18px;

background:rgba(255,255,255,.03);

border-radius:20px;

transition:.3s;

}

.hx-track-row:hover{

background:rgba(255,255,255,.06);

}

.hx-track-left{

display:flex;

align-items:center;

gap:16px;

}

.hx-track-cover{

width:70px;

height:70px;

border-radius:16px;

overflow:hidden;

flex-shrink:0;

}

.hx-track-cover img{

width:100%;

height:100%;

object-fit:cover;

}

.hx-track-name{

font-size:17px;

font-weight:700;

margin-bottom:4px;

}

.hx-track-meta{

font-size:13px;

color:var(--hx-text-muted);

}


/* ==========================================================
   TRACK STATS
========================================================== */

.hx-track-stats{

display:flex;

gap:24px;

align-items:center;

font-size:14px;

color:var(--hx-text-muted);

}

.hx-track-stats span{

display:flex;

align-items:center;

gap:8px;

}


/* ==========================================================
   FOLLOWERS PANEL
========================================================== */

.hx-followers{

display:flex;

flex-direction:column;

gap:18px;

}

.hx-follower{

display:flex;

align-items:center;

justify-content:space-between;

padding:16px;

background:rgba(255,255,255,.03);

border-radius:18px;

}

.hx-follower-left{

display:flex;

align-items:center;

gap:14px;

}

.hx-follower-left img{

width:52px;

height:52px;

border-radius:50%;

object-fit:cover;

}

.hx-follower-name{

font-weight:700;

}

.hx-follower-time{

font-size:13px;

color:var(--hx-text-muted);

}


/* ==========================================================
   GENERATE PANEL
========================================================== */

.hx-generate{

padding:32px;

border-radius:30px;

background:

linear-gradient(

135deg,

rgba(79,140,255,.12),

rgba(0,212,255,.08));

border:1px solid rgba(79,140,255,.10);

}

.hx-generate h2{

margin-bottom:10px;

}

.hx-generate p{

margin-bottom:25px;

color:var(--hx-text-light);

}


/* ==========================================================
   EMPTY PANEL
========================================================== */

.hx-empty-panel{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

padding:60px;

text-align:center;

}

.hx-empty-panel i{

font-size:60px;

margin-bottom:20px;

color:var(--hx-primary);

opacity:.5;

}

.hx-empty-panel h4{

margin-bottom:12px;

}

/* ==========================================================
   TOP COUNTRIES
========================================================== */

.hx-country-list{

display:flex;

flex-direction:column;

gap:18px;

}

.hx-country{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 20px;

border-radius:20px;

background:rgba(255,255,255,.04);

transition:var(--hx-normal);

}

.hx-country:hover{

background:rgba(255,255,255,.07);

transform:translateX(6px);

}

.hx-country-left{

display:flex;

align-items:center;

gap:14px;

}

.hx-country-left img{

width:36px;

height:36px;

border-radius:50%;

object-fit:cover;

}

.hx-country-percent{

font-weight:700;

color:var(--hx-primary);

}


/* ==========================================================
   TOP GENRES
========================================================== */

.hx-genre-list{

display:flex;

flex-wrap:wrap;

gap:12px;

}

.hx-genre-chip{

padding:10px 18px;

border-radius:999px;

background:rgba(79,140,255,.12);

border:1px solid rgba(79,140,255,.18);

color:#58a6ff;

font-weight:600;

font-size:13px;

transition:.3s;

}

.hx-genre-chip:hover{

background:var(--hx-primary);

color:white;

}


/* ==========================================================
   LIVE ACTIVITY
========================================================== */

.hx-live{

display:flex;

flex-direction:column;

gap:18px;

}

.hx-live-item{

display:flex;

align-items:center;

gap:16px;

padding:18px;

border-radius:20px;

background:rgba(255,255,255,.03);

transition:.3s;

}

.hx-live-item:hover{

background:rgba(255,255,255,.06);

}

.hx-live-dot{

width:12px;

height:12px;

border-radius:50%;

background:#10B981;

box-shadow:

0 0 20px rgba(16,185,129,.45);

animation:hxPulse 2s infinite;

}


/* ==========================================================
   GOALS
========================================================== */

.hx-goals{

display:flex;

flex-direction:column;

gap:24px;

}

.hx-goal{

display:flex;

flex-direction:column;

gap:10px;

}

.hx-goal-top{

display:flex;

justify-content:space-between;

font-size:14px;

}

.hx-progress{

height:10px;

border-radius:999px;

background:rgba(255,255,255,.06);

overflow:hidden;

}

.hx-progress-bar{

height:100%;

border-radius:999px;

background:var(--hx-gradient-primary);

}


/* ==========================================================
   ACHIEVEMENTS
========================================================== */

.hx-dashboard-achievements{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.hx-dashboard-achievement{

padding:22px;

text-align:center;

background:rgba(255,255,255,.04);

border-radius:22px;

transition:.3s;

}

.hx-dashboard-achievement:hover{

transform:translateY(-6px);

}

.hx-dashboard-achievement i{

font-size:36px;

margin-bottom:12px;

color:#FFD700;

}


/* ==========================================================
   RECENT COMMENTS
========================================================== */

.hx-comments{

display:flex;

flex-direction:column;

gap:18px;

}

.hx-comment-row{

display:flex;

gap:16px;

align-items:flex-start;

padding:18px;

border-radius:20px;

background:rgba(255,255,255,.03);

}

.hx-comment-row img{

width:48px;

height:48px;

border-radius:50%;

object-fit:cover;

}


/* ==========================================================
   QUICK STATS
========================================================== */

.hx-quick-stats{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:18px;

margin-top:30px;

}

.hx-quick-stat{

padding:20px;

text-align:center;

border-radius:22px;

background:rgba(255,255,255,.04);

}

.hx-quick-stat strong{

display:block;

font-size:30px;

margin-bottom:6px;

}


/* ==========================================================
   FLOAT CARD
========================================================== */

.hx-float-card{

transition:.35s;

}

.hx-float-card:hover{

transform:translateY(-8px);

box-shadow:

0 25px 70px rgba(79,140,255,.15);

}


/* ==========================================================
   DASHBOARD ANIMATION
========================================================== */

@keyframes hxPulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.35);

opacity:.5;

}

100%{

transform:scale(1);

opacity:1;

}

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1200px){

.hx-dashboard-top{

grid-template-columns:repeat(2,1fr);

}

.hx-dashboard-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.hx-dashboard{

padding:25px 0 80px;

}

.hx-dashboard-header{

flex-direction:column;

align-items:flex-start;

}

.hx-dashboard-title h1{

font-size:34px;

}

.hx-dashboard-top{

grid-template-columns:1fr;

}

.hx-actions{

grid-template-columns:1fr;

}

.hx-quick-stats{

grid-template-columns:1fr;

}

.hx-dashboard-achievements{

grid-template-columns:1fr;

}

.hx-track-row{

flex-direction:column;

align-items:flex-start;

}

}

@media(max-width:480px){

.hx-credit-value{

font-size:40px;

}

.hx-overview-value{

font-size:32px;

}

}