/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Inter',sans-serif;
    background:#0f172a;
    color:#e2e8f0;
    overflow-x:hidden;
}

/* 🌈 BACKGROUND GLOW */
body::before{
    content:"";
    position:fixed;
    width:500px;
    height:500px;
    background:radial-gradient(circle,#3b82f6,transparent);
    filter:blur(120px);
    top:-100px;
    right:-100px;
    z-index:-1;
}

/* ================= HEADER ================= */
.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 25px;
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.header .center{
    font-weight:600;
    font-size:18px;
}

/* SEARCH */
.header input{
    background:rgba(255,255,255,0.08);
    border:none;
    padding:8px 12px;
    border-radius:10px;
    color:white;
}

/* TAGS */
.tags span{
    background:rgba(255,255,255,0.1);
    padding:5px 10px;
    margin-left:5px;
    border-radius:8px;
    cursor:pointer;
    transition:0.3s;
}

.tags span:hover{
    background:#3b82f6;
}

/* ================= SIDEBAR ================= */
.sidebar{
    position:fixed;
    width:240px;
    height:100vh;
    left:-240px;
    top:0;
    background:rgba(2,6,23,0.9);
    backdrop-filter:blur(20px);
    padding:20px;
    transition:0.3s;
}

.sidebar.active{
    left:0;
}

.sidebar p{
    padding:10px;
    margin:8px 0;
    border-radius:10px;
    transition:0.3s;
    cursor:pointer;
}

.sidebar p:hover{
    background:rgba(59,130,246,0.2);
}

/* ================= MAIN ================= */
.main{
    padding:25px;
}

/* ================= CARD ================= */
.card{
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(20px);
    border-radius:15px;
    padding:20px;
    margin:15px 0;
    border:1px solid rgba(255,255,255,0.08);
    transition:0.3s;
}

.card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 40px rgba(0,0,0,0.4);
}

/* ================= GRID ================= */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
}

/* ================= KPI ================= */
.kpi h2{
    font-size:28px;
    margin-top:5px;
}

.kpi-title{
    opacity:0.7;
    font-size:13px;
}

/* ================= BUTTON ================= */
button{
    background:linear-gradient(135deg,#3b82f6,#6366f1);
    border:none;
    padding:10px 14px;
    border-radius:10px;
    color:white;
    cursor:pointer;
    transition:0.3s;
}

button:hover{
    transform:scale(1.05);
    box-shadow:0 0 15px #3b82f6;
}

/* EXPORT */
.export-btn{
    background:linear-gradient(135deg,#22c55e,#16a34a);
}

/* ================= CHART ================= */
.chart-card{
    display:flex;
    gap:30px;
    align-items:center;
}

.chart-left{
    width:150px;
}

.chart-right{
    flex:1;
}

.insight{
    display:flex;
    justify-content:space-between;
    padding:8px 10px;
    margin:5px 0;
    border-radius:8px;
    font-size:13px;
}

.insight.positive{background:rgba(34,197,94,0.15);}
.insight.negative{background:rgba(239,68,68,0.15);}
.insight.neutral{background:rgba(59,130,246,0.15);}

/* ================= REVIEWS ================= */
.review{
    padding:12px;
    border-radius:10px;
    margin-top:10px;
    transition:0.3s;
}

.review:hover{
    transform:scale(1.02);
}

.review.positive{background:rgba(34,197,94,0.15);}
.review.negative{background:rgba(239,68,68,0.15);}

/* ================= MODAL ================= */
.modal{
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    justify-content:center;
    align-items:center;
}

.modal-content{
    background:#1e293b;
    padding:20px;
    border-radius:12px;
    width:320px;
}

.close{
    float:right;
    cursor:pointer;
}

/* ================= ALERT ================= */
#alertBox{
    border-left:4px solid #ef4444;
    animation:pulse 1s infinite;
}

@keyframes pulse{
    0%{opacity:1;}
    50%{opacity:0.6;}
    100%{opacity:1;}
}

/* ================= MOBILE ================= */
@media(max-width:768px){
    .chart-card{
        flex-direction:column;
    }
}
.trend-card{
    display:flex;
    gap:25px;
    align-items:center;
}

/* SMALL GRAPH */
.trend-left{
    width:200px;
}

/* RIGHT SIDE */
.trend-right{
    flex:1;
    font-size:14px;
}

/* PROGRESS BARS */
.bar{
    margin-top:8px;
}

.progress{
    height:6px;
    background:rgba(255,255,255,0.1);
    border-radius:5px;
    overflow:hidden;
}

.progress div{
    height:100%;
    border-radius:5px;
}

#trendPos{
    background:#22c55e;
}

#trendNeg{
    background:#ef4444;
}

/* MOBILE */
@media(max-width:768px){
    .trend-card{
        flex-direction:column;
    }
}