/* =========================================================================
   Siberian — site stylesheet
   Inspired by Airtable Design System (clean, enterprise, Swiss-precision):
     • White canvas, deep navy text
     • Airtable Blue (#1b61c9) as primary accent (works for "Siberian frost" too)
     • Inter (Haas substitute) with positive letter-spacing
     • 12px radius buttons, 16–24px radius cards, soft blue-tinted shadows
   ========================================================================= */

:root {
  /* ---- Brand & semantics ---- */
  --color-text:           #181d26;
  --color-text-weak:      rgba(4, 14, 32, 0.69);
  --color-text-soft:      #5a6377;
  --color-bg:             #ffffff;
  --color-bg-soft:        #f8fafc;
  --color-bg-frost:       #eef4fc;       /* subtle Siberian-blue surface */
  --color-border:         #e0e2e6;
  --color-border-strong:  #c8ccd5;

  --color-blue:           #1b61c9;       /* Airtable Blue / Siberian Frost */
  --color-blue-strong:    #144aa1;
  --color-blue-soft:      #e8f1fc;
  --color-blue-tint:      rgba(45, 127, 249, 0.10);

  --color-success:        #006400;
  --color-warn:           #b15c00;
  --color-danger:         #b00020;

  /* ---- Shadows ---- */
  --shadow-card:          rgba(0, 0, 0, 0.32) 0 0 1px,
                          rgba(0, 0, 0, 0.08) 0 0 2px,
                          rgba(45, 127, 249, 0.28) 0 1px 3px,
                          rgba(0, 0, 0, 0.06) 0 0 0 0.5px inset;
  --shadow-soft:          rgba(15, 48, 106, 0.05) 0 0 20px;
  --shadow-elev:          rgba(15, 48, 106, 0.12) 0 8px 24px;

  /* ---- Radius ---- */
  --radius-xs:  2px;
  --radius-sm:  8px;
  --radius-md:  12px;     /* buttons */
  --radius-lg:  16px;     /* cards */
  --radius-xl:  24px;     /* sections / hero */
  --radius-pill: 999px;

  /* ---- Spacing (8px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Type ---- */
  --font-sans: "Inter", -apple-system, system-ui, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.08px;
  font-feature-settings: "ss01", "cv05";
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-blue); text-decoration: none; }
a:hover { color: var(--color-blue-strong); text-decoration: underline; }

/* ---- Layout shell ---- */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}
@media (max-width: 720px) { .container { padding: 0 var(--space-4); } }

/* ---- Header / nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.nav .container {
  display: flex; align-items: center; gap: var(--space-6);
  height: 64px;
}
.brand {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--color-text);
}
.brand:hover { color: var(--color-text); text-decoration: none; }
.brand-dot { color: var(--color-blue); }

.nav nav { display: flex; gap: var(--space-2); margin-left: auto; align-items: center; }
.nav nav a {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.08px;
}
.nav nav a:hover { background: var(--color-bg-soft); text-decoration: none; }
.nav nav a.cta {
  background: var(--color-blue); color: #fff;
}
.nav nav a.cta:hover { background: var(--color-blue-strong); }

/* ---- Hero ---- */
.hero {
  padding: var(--space-16) 0 var(--space-12);
  text-align: center;
  background:
    radial-gradient(ellipse at top, var(--color-blue-soft) 0%, transparent 60%),
    var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}
.hero .sub {
  font-size: 20px; line-height: 1.45;
  color: var(--color-text-weak);
  letter-spacing: 0.18px;
  max-width: 720px; margin: 0 auto var(--space-8);
}
.hero .ctas { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 500;
  letter-spacing: 0.08px;
  background: var(--color-blue); color: #fff;
  cursor: pointer; transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--color-blue-strong); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.ghost {
  background: #fff; color: var(--color-text);
  border-color: var(--color-border);
}
.btn.ghost:hover { background: var(--color-bg-soft); border-color: var(--color-border-strong); }
.btn.small { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--radius-sm); }
.btn.danger { background: var(--color-danger); }
.btn.danger:hover { background: #8a0019; }

/* ---- Cards / sections ---- */
.section {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--color-border);
}
.section:first-child, .section.flush { border-top: none; }
.section h2 {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.2px;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.section .lead { color: var(--color-text-weak); font-size: 18px; max-width: 720px; margin: 0 0 var(--space-8); }

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6);
  box-shadow: var(--shadow-soft);
}
.card + .card { margin-top: var(--space-4); }
.card h3 {
  font-size: 22px; font-weight: 600;
  letter-spacing: 0.12px;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

/* feature grid (3 cols, autoresponsive) */
.grid-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

.feature .icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-blue-soft);
  display: grid; place-items: center;
  color: var(--color-blue);
  font-size: 22px;
  margin-bottom: var(--space-3);
}
.feature p { color: var(--color-text-weak); margin: 0; line-height: 1.5; }

/* ---- Tables ---- */
table.kv, table.grid {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 14px; line-height: 1.4;
}
table.kv td { padding: 10px 0; vertical-align: top; }
table.kv td:first-child { color: var(--color-text-weak); width: 40%; }

table.grid { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
table.grid th, table.grid td { padding: 12px 16px; text-align: left; }
table.grid thead { background: var(--color-bg-soft); }
table.grid th { font-weight: 600; font-size: 13px; color: var(--color-text-soft); letter-spacing: 0.07px; text-transform: uppercase; }
table.grid tbody tr { border-top: 1px solid var(--color-border); }
table.grid tbody tr:hover { background: var(--color-bg-soft); }

/* ---- Forms ---- */
.form { display: grid; gap: var(--space-4); max-width: 420px; }
.form label { display: grid; gap: var(--space-1); font-size: 14px; font-weight: 500; color: var(--color-text); }
.form input, .form select {
  height: 44px; padding: 0 14px;
  font: 500 15px/1.4 var(--font-sans);
  letter-spacing: 0.08px;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color .12s, box-shadow .12s;
}
.form input:focus, .form select:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px var(--color-blue-tint);
}
.form .row-actions { display: flex; gap: var(--space-3); align-items: center; }
.form .help { font-size: 13px; color: var(--color-text-weak); margin: 0; }
.form .err { color: var(--color-danger); font-size: 14px; margin: 0; }
.form .ok { color: var(--color-success); font-size: 14px; margin: 0; }

/* ---- Generic chips / status pills ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.16px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-soft); color: var(--color-text-soft);
  border: 1px solid var(--color-border);
}
.chip.ok      { background: #e9f7ec; color: var(--color-success); border-color: #c4e6cc; }
.chip.bad     { background: #fde8eb; color: var(--color-danger);  border-color: #f4c7ce; }
.chip.warn    { background: #fff1d6; color: var(--color-warn);    border-color: #f4daa6; }
.chip.blue    { background: var(--color-blue-soft); color: var(--color-blue-strong); border-color: #c5d9ee; }

/* ---- Notices ---- */
.notice { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid; font-size: 14px; }
.notice.ok    { background: #e9f7ec; color: var(--color-success); border-color: #c4e6cc; }
.notice.warn  { background: #fff1d6; color: var(--color-warn);    border-color: #f4daa6; }
.notice.err   { background: #fde8eb; color: var(--color-danger);  border-color: #f4c7ce; }

/* ---- Misc helpers ---- */
.muted   { color: var(--color-text-weak); }
.center  { text-align: center; }
.right   { text-align: right; }
.mono    { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
code     { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; padding: 2px 6px; background: var(--color-bg-soft); border-radius: 4px; border: 1px solid var(--color-border); }

.ok      { color: var(--color-success); }
.bad     { color: var(--color-danger); }

.sep { height: 1px; background: var(--color-border); margin: var(--space-8) 0; }

/* ---- Footer ---- */
.footer {
  margin-top: var(--space-16);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-soft);
}
.footer .row { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; justify-content: space-between; }
.footer small { color: var(--color-text-weak); font-size: 13px; letter-spacing: 0.07px; }

/* ---- Admin shell ---- */
.admin {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-8);
  margin-top: var(--space-6);
}
@media (max-width: 900px) { .admin { grid-template-columns: 1fr; } }
.admin aside {
  position: sticky; top: 80px; align-self: start;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-3);
  background: #fff;
}
.admin aside a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500;
  color: var(--color-text);
}
.admin aside a:hover { background: var(--color-bg-soft); text-decoration: none; }
.admin aside a.active { background: var(--color-blue-soft); color: var(--color-blue-strong); }
.admin h1 { font-size: 28px; font-weight: 700; margin: 0 0 var(--space-2); letter-spacing: -0.2px; }
.admin .stat-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: var(--space-4) 0 var(--space-8); }
.admin .stat { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.admin .stat .label { font-size: 12px; color: var(--color-text-soft); text-transform: uppercase; letter-spacing: 0.16px; font-weight: 600; }
.admin .stat .value { font-size: 28px; font-weight: 700; margin-top: 4px; }
.admin .stat .delta { font-size: 12px; color: var(--color-text-weak); margin-top: 2px; }

/* small responsive helpers */
@media (max-width: 640px) {
  .hero { padding: var(--space-10) 0 var(--space-8); }
  .section { padding: var(--space-8) 0; }
}