/* ================================================================
   Base — Reset, body, scrollbar, shell layout, page transitions
   ================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .18); }

/* App shell */
.shell { display: flex; min-height: 100vh; }

/* Main content area */
.main {
  margin-left: 260px;
  flex: 1;
  padding: 28px 36px 40px;
  max-width: 1000px;
}

/* Page container */
.page { display: none; }
.page.on {
  display: block;
  animation: fadeUp .3s cubic-bezier(.4, 0, .2, 1);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Page header */
.pg-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.4px;
  margin-bottom: 6px;
  color: var(--text);
}
.pg-desc {
  font-size: 15px;
  color: var(--text-3);
  margin-bottom: 32px;
}