/* ─── BARITU VERTICALES — Layout ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── App shell — no sidebar, full width ── */
.app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ── Topbar ── */
.topbar {
  height: var(--topbar-h); flex-shrink: 0;
  background: var(--bg-elevated); border-bottom: 1px solid var(--border-warm);
  display: flex; align-items: center; padding: 0 24px; gap: 12px;
}

/* ── Tab navigation ── */
.tab-nav {
  display: flex; gap: 2px; padding: 0 24px;
  background: var(--bg-elevated); border-bottom: 1px solid var(--border-warm);
  flex-shrink: 0;
}
.tab-item {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px; font-size: 12.5px; font-weight: 450;
  color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.tab-item:hover { color: var(--text-secondary); }
.tab-item.active { color: var(--text-primary); border-bottom-color: var(--p); }
.tab-item svg { width: 13px; height: 13px; opacity: .6; }
.tab-item.active svg { opacity: 1; color: var(--p-text); }

/* ── Content ── */
.content {
  flex: 1; overflow-y: auto; padding: 24px;
  display: flex; flex-direction: column; gap: 20px;
}

/* ── Grids ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.col-span-2 { grid-column: span 2; }

/* ── Views ── */
.view { display: none; flex-direction: column; gap: 20px; }
.view.active { display: flex; animation: view-enter var(--dur-md) var(--ease-soft); }
@keyframes view-enter {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Page header ── */
.page-title { font-size: 17px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.025em; }
.page-sub   { font-size: 11px; color: var(--text-muted); font-family: var(--mono); margin-top: 2px; letter-spacing: .02em; }

/* ── Split layout (generate view) ── */
.split { display: grid; grid-template-columns: 420px 1fr; gap: 20px; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }