:root{
  --sidebar-bg:#2c3e50;
  --accent:#e67e22;
  --text:#ecf0f1;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Segoe UI,Roboto,Arial,sans-serif;color:#222}
body{display:flex}
.sidebar{
  width:240px;
  background:var(--sidebar-bg);
  color:var(--text);
  height:100vh;
  position:fixed;
  left:0;top:0;overflow:auto;
  display:flex;flex-direction:column
}
.sidebar .brand{font-weight:700;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,0.05)}
.menu{list-style:none;padding:8px 0;margin:0;flex:1}
.menu-item{padding:12px 20px;border-left:4px solid transparent}
.menu-item a{color:inherit;text-decoration:none;display:block}
.menu-item:hover{background:rgba(255,255,255,0.02)}
.menu-item.active{background:linear-gradient(90deg,rgba(255,255,255,0.03),transparent);border-left-color:var(--accent)}
.content{margin-left:240px;padding:28px;flex:1}
.panel{background:#fff;border-radius:8px;padding:18px;box-shadow:0 1px 4px rgba(0,0,0,0.06)}

@media (max-width:720px){
  .sidebar{position:relative;width:100%;height:auto}
  .content{margin-left:0}
}