/* ============================================================
   LAYOUT — app shell, header, tabs, view scaffolding, grids
   ============================================================ */

.app{ max-width:1040px; margin:0 auto; padding:var(--space-5) var(--space-5) 80px; }

header.top{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); padding:14px 4px 26px; flex-wrap:wrap;
}

.brand{ display:flex; align-items:center; gap:10px; }
.brand .mark{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg, var(--color-amber), #d98a1c);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; color:#1a1206; font-size:15px;
  box-shadow:0 4px 14px rgba(244,168,51,0.25);
}
.brand .name{ font-family:var(--font-display); font-weight:800; font-size:var(--text-lg); letter-spacing:0.2px; }
.brand .name small{
  display:block; font-family:var(--font-mono); font-weight:400; font-size:10.5px;
  color:var(--color-text-faint); letter-spacing:1.5px; text-transform:uppercase; margin-top:1px;
}

.tabs{
  display:flex; gap:2px; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-pill); padding:4px;
}
.tabs button{
  border:none; background:transparent; color:var(--color-text-muted);
  font-size:var(--text-sm); font-weight:600; padding:9px 18px; border-radius:var(--radius-pill);
  transition:color var(--dur-base) ease, background var(--dur-base) ease;
}
.tabs button.active{ background:var(--color-amber); color:#1a1206; }
.tabs button:not(.active):hover{ color:var(--color-text); }

.eyebrow{
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:2.5px; text-transform:uppercase;
  color:var(--color-amber); font-weight:600; margin-bottom:var(--space-3); display:flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:''; width:16px; height:2px; background:var(--color-amber); display:inline-block; }

h1.page-title{ font-family:var(--font-display); font-weight:800; font-size:var(--text-xl); margin-bottom:6px; }
p.page-sub{ color:var(--color-text-muted); font-size:var(--text-base); max-width:520px; margin-bottom:var(--space-6); }

section.view{ display:none; animation:fadein var(--dur-slow) ease; }
section.view.active{ display:block; }
@keyframes fadein{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

.colab-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:var(--space-6); margin-top:var(--space-6); align-items:start; }
@media (max-width:860px){ .colab-grid{ grid-template-columns:1fr; } }

.panel{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-6) var(--space-6) 26px;
}
.panel h3{ font-family:var(--font-display); font-size:var(--text-md); font-weight:700; margin-bottom:4px; }
.panel .sub{ color:var(--color-text-muted); font-size:var(--text-sm); margin-bottom:var(--space-5); }

footer.note{ text-align:center; color:var(--color-text-faint); font-size:var(--text-xs); margin-top:40px; }