/* ===========================
   base.css
   Purpose: Global reset + basic layout helpers used across all pages.
   =========================== */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html,
body {
   height: 100%;
}

body {
   font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   line-height: 1.6;
   background: var(--bg-dark);
   color: var(--text-main);
}

.container {
   max-width: 1280px;
   margin: 0 auto;
   padding: 20px;
}

.mt-16 {
   margin-top: 16px;
}

.mt-24 {
   margin-top: 24px;
}

.mb-16 {
   margin-bottom: 16px;
}

.mb-24 {
   margin-bottom: 24px;
}

.grid-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
}

.grid-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
}

.hidden {
   display: none !important;
}