/* ─── Universal Page Container ──────────────────────── */
/*
 * Add class="page-container" to the outermost content wrapper
 * on every page (app.php, about.php, contact.php, history.php).
 * Replaces the inconsistent mix of .app / .section-inner widths.
 */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 40px 80px;
}

/* ─── Layout (app.php issuances shell) ──────────────── */
.app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 32px 64px;
}

/* ─── Align all section containers to the same max-width ─── */
.section-inner,
.hp-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ─── Section Tabs ──────────────────────────────────── */
.tabs-wrap { margin-bottom: 20px; }
.tabs {
  display: inline-flex; gap: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  box-shadow: inset 0 1px 3px rgba(26,61,43,0.06);
}
.tab {
  padding: 9px 22px; border-radius: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--text-dim);
  background: none; border: none; cursor: pointer;
  transition: all var(--transition);
}
.tab:hover { color: var(--text); background: rgba(255,255,255,0.7); }
.tab.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(184,146,42,0.18);
}

/* ─── Content wrapper — card styling lives in .ipanel-card ── */
.content {
  position: relative;
}

/* ─── Panels ────────────────────────────────────────── */
.panel { display: none; animation: fadeUp 260ms ease; }
.panel.active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Page Chrome ───────────────────────────────────── */
.page-chrome {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 16px;
}
.page-chrome-tabs { flex: 1; }
.content hr { border: none; border-top: 1px solid var(--border); margin: 28px 0; }

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .content                        { padding: 20px 16px; border-radius: 14px; }
  .app                            { padding: 20px 20px 60px; }
  .page-container                 { padding: 24px 20px 60px; }
  .section-inner, .hp-section-inner { padding: 0 20px; }
}
@media (max-width: 480px) {
  .app                            { padding: 16px 16px 48px; }
  .page-container                 { padding: 16px 16px 48px; }
  .section-inner, .hp-section-inner { padding: 0 16px; }
}