/* ============================================================
   MIDDLE — the tabbed content region between header and footer.
   Mirrors the toolkit's header/middle(tabs)/footer split: header
   and footer never move, only this region swaps content when a
   tab is clicked.
   ============================================================ */

.tab-bar{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  background:var(--gold-soft);
  border-bottom:2px solid var(--teal);
  overflow-x:auto;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}
.tab-bar .tab-btn{
  flex-shrink:0;
  background:var(--gold-soft);
  color:var(--gold-deep);
  border:none;
  border-right:1px solid var(--teal);
  padding:12px 25px;
  font-size:0.9em;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  display:inline-block;
  text-align:center;
}
.tab-bar .tab-btn:last-child{ border-right:none; }
.tab-bar .tab-btn:hover{ background:var(--gold); color:#333; }
.tab-bar .tab-btn.active{
  background:var(--teal);
  color:#fff;
  border-bottom:2px solid #ffd966;
}

@media (max-width:700px){
  .tab-bar{ justify-content:flex-start; }
  .tab-bar .tab-btn{ padding:10px 18px; font-size:0.85em; }
}

.tab-panes{
  max-width:820px;
  margin:10px auto 0;
  padding:24px 18px 40px;
  background:var(--surface);
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.tab-pane{ display:none; }
.tab-pane.active{ display:block; }

.tab-placeholder{
  text-align:center;
  padding:40px 20px;
  border:2px dashed var(--line);
  border-radius:var(--radius);
  color:var(--muted);
}
.tab-placeholder h2{ color:var(--teal-deep); margin-bottom:8px; }