:root{
  --primary-color:#e67e22;
  --primary-dark:#d35400;
  --secondary:#2c3e50;
  --bg:#f4f6f9;
  --sidebar:260px;
}

html, body { height:100%; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  overflow-x:hidden;
}

/* Topbar */
.topbar{
  position:fixed; top:0; left:0; right:0;
  height:70px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  background:#fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  z-index:1000;
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800;
  letter-spacing:.3px;
  color:var(--secondary);
}
.brand i { color: var(--primary-color); font-size: 1.35rem; }

.badge-demo{
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
}

/* Sidebar */
.sidebar{
  position:fixed;
  top:0; left:0;
  width: var(--sidebar);
  height:100vh;
  background:#fff;
  padding-top: 85px;
  box-shadow: 2px 0 10px rgba(0,0,0,.05);
  z-index: 999;
  transition: transform .25s ease;
}

.sidebar .nav-link{
  color:#64748b;
  padding: 14px 18px;
  font-weight:600;
  display:flex; align-items:center; gap:10px;
  border-right:4px solid transparent;
}
.sidebar .nav-link i { font-size:1.2rem; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active{
  color: var(--primary-color);
  background:#fff8f3;
  border-right-color: var(--primary-color);
}

/* Main */
.main{
  margin-left: var(--sidebar);
  padding: 90px 18px 24px;
  transition: margin-left .25s ease;
}

.kpi{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  height:100%;
}
.kpi-accent{
  border-color: rgba(230,126,34,.35);
  background: rgba(230,126,34,.08);
}
.kpi-label{
  font-size:.78rem;
  text-transform: uppercase;
  letter-spacing:.5px;
  font-weight:800;
  color:#64748b;
}
.kpi-accent .kpi-label{ color: var(--primary-dark); }
.kpi-value{
  font-size: 1.65rem;
  font-weight: 900;
  color: var(--secondary);
}
.kpi-accent .kpi-value{ color: var(--primary-color); }
.kpi-sub{ color:#64748b; font-size:.85rem; }

.media-breadcrumb{
  display:flex;
  gap: 6px;
  align-items:center;
  color:#64748b;
  font-size:.9rem;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.media-breadcrumb span{
  cursor:pointer;
}
.media-breadcrumb span:hover{
  text-decoration: underline;
  color: var(--primary-color);
}
.media-breadcrumb .active{
  color: var(--secondary);
  font-weight: 800;
  cursor: default;
  text-decoration:none;
}

@media (max-width: 768px){
  .sidebar{ transform: translateX(-100%); }
  .sidebar.open{ transform: translateX(0); }
  .main{ margin-left:0; }
}