* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
header { background: #2c3e50; color: #fff; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem; gap: 1rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 1rem; }
.brand img { height: 50px; }
.brand h1 { margin: 0; font-size: 1.8rem; }

.nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: .5rem 1rem; font-size: 1rem;
  background: #e67e22; color: #fff; border: none; border-radius: 5px;
  cursor: pointer; text-decoration: none;
}
.btn:focus { outline: 2px solid #fff3; outline-offset: 2px; }
.btn.active { background: #cf6d11; }

.main { width: 100%; height: calc(100vh - 120px); padding-top: 10px; }
.main iframe { width: 100%; height: 100%; border: none; }