
:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --text:#172033;
  --muted:#718096;
  --line:#e5eaf1;
  --blue:#2563eb;
  --blue2:#3b82f6;
  --cyan:#06b6d4;
  --green:#10b981;
  --shadow:0 10px 28px rgba(30,55,90,.08);
  --shadow-hover:0 16px 34px rgba(30,55,90,.13);
  --radius:18px;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
header,.header{
  background:#fff!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:0 3px 14px rgba(25,45,75,.06)!important;
}
main,.main,.content{
  background:var(--bg)!important;
}
h1,h2,h3{color:var(--text)}
/* New monitor layout */
.monitor-grid,.stats-grid,.cards-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.monitor-card,.stat-card,.metric-card,.earnings-card{
  position:relative;
  overflow:hidden;
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow)!important;
  padding:24px!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.monitor-card:hover,.stat-card:hover,.metric-card:hover,.earnings-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover)!important;
  border-color:#cbd8ee!important;
}
.monitor-card:before,.stat-card:before,.metric-card:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--blue),var(--cyan));
}
.monitor-card .label,.stat-card .label,.metric-card .label{
  color:var(--muted)!important;
  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;
}
.monitor-card .value,.stat-card .value,.metric-card .value{
  display:block;
  margin-top:9px;
  color:var(--text)!important;
  font-size:30px!important;
  line-height:1.1;
  font-weight:800!important;
  letter-spacing:-.7px;
}
.monitor-card .meta,.stat-card .meta,.metric-card .meta{
  margin-top:12px;
  color:var(--muted)!important;
  font-size:13px;
}
.monitor-card .trend,.stat-card .trend,.metric-card .trend{
  color:var(--green)!important;
  font-weight:700;
}
/* Total earnings becomes a clean hero monitor */
.total-earnings,.total-card{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:#111827!important;
  color:#fff!important;
  border:0!important;
  border-radius:22px!important;
  box-shadow:0 14px 34px rgba(17,24,39,.16)!important;
  padding:25px 30px!important;
}
.total-earnings *,.total-card *{color:inherit}
.total-earnings .value,.total-card .value{
  color:#7dd3fc!important;
  font-size:34px!important;
  font-weight:850!important;
}
/* Dashboard section cards */
.panel,.analytics-panel,.chart-card,.section-card{
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  box-shadow:var(--shadow)!important;
}
/* Buttons */
button,.btn{
  border:1px solid #d8e1ef!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#243047!important;
  box-shadow:0 4px 12px rgba(30,55,90,.06)!important;
  font-weight:650;
}
button:hover,.btn:hover{
  border-color:#b8c9e4!important;
  box-shadow:0 7px 17px rgba(30,55,90,.1)!important;
}
.primary,.btn-primary{
  background:linear-gradient(135deg,#2563eb,#3b82f6)!important;
  color:#fff!important;
  border-color:transparent!important;
}
/* Navigation */
nav,.sidebar{
  background:#fff!important;
  border-right:1px solid var(--line)!important;
}
nav a,.sidebar a{
  color:#4b5870!important;
  border-radius:11px!important;
}
nav a:hover,.sidebar a:hover,.active{
  background:#eff6ff!important;
  color:#2563eb!important;
}
/* Tables */
table{
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  overflow:hidden;
}
th{
  background:#f8fafc!important;
  color:#66758c!important;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
td{border-color:var(--line)!important;color:#27344b!important}
/* Responsive */
@media(max-width:900px){
  .monitor-grid,.stats-grid,.cards-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .monitor-grid,.stats-grid,.cards-grid{grid-template-columns:1fr}
  .monitor-card,.stat-card,.metric-card,.earnings-card{padding:20px!important}
  .total-earnings,.total-card{padding:21px!important;align-items:flex-start;flex-direction:column}
}
