/* ============================================================
   AIRLINKS — BASE STYLES
   Reset, typography, container layouts, basic utilities.
   Loaded everywhere. No page-specific selectors here.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s, color 0.2s;
  line-height: 1.5;
}
a { color: var(--color-text-info); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

main { min-height: calc(100vh - var(--header-height) - 240px); }
.container { max-width: var(--container); margin: 0 auto; padding: 32px 24px; }
.container-narrow { max-width: 800px; margin: 0 auto; padding: 32px 24px; }
.container-form { max-width: 480px; margin: 0 auto; padding: 48px 24px; }

h1, h2, h3 { color: var(--color-text-primary); }
h1 { font-size: 32px; font-weight: 600; margin: 0 0 8px; line-height: 1.2; }
h2 { font-size: 22px; font-weight: 600; margin: 0 0 12px; }
h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.subtitle { color: var(--color-text-secondary); font-size: 16px; margin: 0 0 32px; }
.muted { color: var(--color-text-secondary); font-size: 14px; }
.small { font-size: 13px; color: var(--color-text-secondary); }

.back-link {
  background: none; border: none; cursor: pointer;
  color: var(--color-text-secondary); font-size: 14px;
  padding: 0; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 4px;
}
.back-link:hover { color: var(--color-text-primary); }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.layout-sidebar { display: grid; grid-template-columns: 280px 1fr; gap: 32px; }
.layout-detail { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }