:root{--b:gold}
*{box-sizing:border-box}body{margin:0;font-family:Segoe UI;background:#eef2f7}
.app{height:100vh;display:flex;flex-direction:column}
.header,.footer{background:var(--b);color:#000;padding:12px 16px;display:flex;justify-content:space-between}
.content{flex:1;display:grid;grid-template-columns:300px 1fr}
.left{padding:16px;background:#fff;border-right:1px solid #ddd}
.right{padding:2px;overflow:auto}
input,button{width:100%;padding:10px;margin:8px 0}
table{width:100%;border-collapse:collapse}
th,td{border:1px solid #ddd;padding:0px}th{background:var(--b);color:#fff}
@media(max-width:768px){.content{grid-template-columns:1fr;grid-template-rows:auto 1fr}}