*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

background:#f5f7fb;

color:#1f2937;

min-height:100vh;

}

/* ================= BACK BUTTON ================= */

.top-back{

position:fixed;

top:20px;

left:20px;

z-index:999;

}

.back-btn{

text-decoration:none;

padding:12px 22px;

border-radius:50px;

background:#d4af37;

color:#111827;

font-weight:600;

transition:.3s;

box-shadow:0 8px 25px rgba(212,175,55,.30);

}

.back-btn:hover{

background:#f3c74b;

transform:translateY(-3px);

}

/* ================= CONTAINER ================= */

.container{
    width:min(95%,1400px);
    margin:0 auto;
    padding:20px;
}

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

.page-header{

margin-bottom:35px;

}

.page-header h1{

font-size:38px;

font-weight:700;

color:#111827;

margin-bottom:8px;

}

.page-header p{

color:#6b7280;

font-size:16px;

}

/* ================= KPI GRID ================= */

.stats-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-bottom:35px;

}

.card{

background:#fff;

padding:28px;

border-radius:22px;

border:1px solid #ececec;

box-shadow:0 12px 35px rgba(0,0,0,.06);

transition:.35s;

position:relative;

overflow:hidden;

}

.card::before{

content:"";

position:absolute;

left:0;

top:0;

width:6px;

height:100%;

background:#d4af37;

}

.card:hover{

transform:translateY(-6px);

box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.card h5{

font-size:14px;

color:#6b7280;

margin-bottom:15px;

font-weight:500;

}

.card h2{

font-size:38px;

color:#111827;

font-weight:700;

}

/* ================= CHART GRID ================= */

.charts-grid{

display:grid;

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

gap:25px;

margin-bottom:35px;

}

.chart-card{

background:#fff;

padding:25px;

border-radius:22px;

border:1px solid #ececec;

box-shadow:0 12px 35px rgba(0,0,0,.06);

transition:.3s;

}

.chart-card:hover{

transform:translateY(-4px);

}

.chart-card h3{

font-size:20px;

margin-bottom:20px;

color:#111827;

}

.chart-card canvas{

width:100% !important;

height:320px !important;

}

/* ================= TABLE SECTION ================= */

.table-grid{

display:grid;

grid-template-columns:1.3fr .7fr;

gap:25px;

margin-bottom:35px;

}

.table-card{

background:#fff;

padding:25px;

border-radius:22px;

border:1px solid #ececec;

box-shadow:0 12px 35px rgba(0,0,0,.06);

overflow:hidden;

}

.table-card h3{

margin-bottom:20px;

font-size:20px;

color:#111827;

}

table{

width:100%;

border-collapse:collapse;

}

thead{

background:#111827;

color:#fff;

}

thead th{

padding:15px;

font-size:14px;

font-weight:600;

text-align:left;

}

tbody td{

padding:16px;

border-bottom:1px solid #eee;

font-size:14px;

}

tbody tr{

transition:.25s;

}

tbody tr:hover{

background:#faf8ef;

}


/* ================= HEALTH SCORE ================= */

.health-card{

background:linear-gradient(135deg,#111827,#1f2937);

color:white;

padding:40px;

border-radius:25px;

margin-bottom:30px;

box-shadow:0 20px 45px rgba(0,0,0,.12);

text-align:center;

position:relative;

overflow:hidden;

}

.health-card::before{

content:"";

position:absolute;

width:220px;

height:220px;

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

border-radius:50%;

right:-80px;

top:-80px;

}

.health-card h2{

font-size:30px;

margin-bottom:18px;

font-weight:600;

}

.health-score{

font-size:72px;

font-weight:700;

color:#FFD700;

margin-bottom:12px;

}

.health-card p{

font-size:17px;

opacity:.9;

}

/* ================= AI INSIGHTS ================= */

.insights-card{

background:#fff;

padding:30px;

border-radius:25px;

border:1px solid #ececec;

box-shadow:0 12px 35px rgba(0,0,0,.06);

margin-bottom:30px;

}

.insights-card h2{

margin-bottom:20px;

font-size:28px;

color:#111827;

}

.insights-card ul{

list-style:none;

}

.insights-card li{

padding:16px 18px;

margin-bottom:14px;

background:#fafafa;

border-left:5px solid #d4af37;

border-radius:12px;

font-size:15px;

transition:.3s;

}

.insights-card li:hover{

background:#fff8e6;

transform:translateX(5px);

}

/* ================= RECENT ACTIVITY ================= */

#recentActivity{

max-height:420px;

overflow-y:auto;

padding-right:6px;

}

.activity-item{

display:flex;

gap:12px;

align-items:flex-start;

padding:14px;

margin-bottom:14px;

border-radius:14px;

background:#fafafa;

transition:.3s;

}

.activity-item:hover{

background:#fff8e6;

}

.activity-dot{

width:12px;

height:12px;

background:#16a34a;

border-radius:50%;

margin-top:6px;

flex-shrink:0;

}

.activity-content h4{

font-size:15px;

margin-bottom:4px;

color:#111827;

}

.activity-content p{

font-size:13px;

color:#6b7280;

}

/* ================= SCROLLBAR ================= */

::-webkit-scrollbar{

width:8px;

height:8px;

}

::-webkit-scrollbar-thumb{

background:#d4af37;

border-radius:50px;

}

::-webkit-scrollbar-track{

background:#ececec;

}

/* ================= CARD ANIMATION ================= */

.card,
.chart-card,
.table-card,
.health-card,
.insights-card{

animation:fadeUp .6s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

@media(max-width:1200px){

.charts-grid{

grid-template-columns:1fr;

}

.table-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.container{

padding:90px 18px 25px;

}

.page-header{

text-align:center;

}

.page-header h1{

font-size:30px;

}

.page-header p{

font-size:14px;

}

.stats-grid{

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

gap:15px;

}

.card{

padding:22px;

}

.card h2{

font-size:28px;

}

.chart-card{

padding:18px;

}

.chart-card canvas{

height:240px !important;

}

.health-card{

padding:30px 20px;

}

.health-score{

font-size:54px;

}

.insights-card{

padding:22px;

}

.top-back{

top:15px;

left:15px;

}

.back-btn{

padding:10px 18px;

font-size:14px;

}

}

@media(max-width:520px){

.stats-grid{

grid-template-columns:1fr;

}

.page-header h1{

font-size:26px;

}

.health-score{

font-size:46px;

}

.card h2{

font-size:26px;

}

.chart-card h3{

font-size:18px;

}

.table-card{

overflow-x:auto;

}

table{

min-width:600px;

}

}