@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Nunito+Sans:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --panel: #ffffff;
  --page: #f8fafc;
  --nav: #0f172a;
  --nav-soft: #1e293b;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --teal: #0f766e;
  --accent: #7c3aed;
  --danger: #b42318;
}

body.app-booting main {
  visibility: hidden;
}

body.app-booting::before {
  content: "Loading BOAT...";
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #f8fafc;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 900;
}

/* Premium single-screen marketing experience */
body:has(.marketing-page:not(.hidden)) {
  height: 100vh;
  overflow: hidden;
}

main:has(.marketing-page:not(.hidden)) {
  height: 100vh;
  overflow: hidden;
}

.marketing-shell {
  --marketing-bg: #eef5ff;
  --marketing-ink: #06112b;
  --marketing-muted: #61708a;
  --marketing-line: rgba(130, 150, 180, 0.26);
  --theme-accent: #1f64ff;
  --theme-accent-2: #13c8dc;
  --theme-accent-soft: rgba(31, 100, 255, 0.12);
  --theme-aura: rgba(19, 200, 220, 0.12);
  --theme-page-start: #ffffff;
  --theme-page-end: #eef5ff;
  --theme-sidebar-bg: rgba(255, 255, 255, 0.86);
  --theme-topbar-bg: rgba(255, 255, 255, 0.82);
  --theme-panel-bg: rgba(255, 255, 255, 0.88);
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 8%, var(--theme-aura), transparent 30%),
    radial-gradient(circle at 85% 10%, var(--theme-accent-soft), transparent 28%),
    linear-gradient(135deg, var(--theme-page-start) 0%, var(--theme-page-end) 100%);
}

.marketing-shell[data-theme="emerald"] {
  --marketing-bg: #e9fff7;
  --marketing-ink: #042f2e;
  --marketing-muted: #486a64;
  --marketing-line: rgba(15, 118, 110, 0.18);
  --theme-accent: #0f766e;
  --theme-accent-2: #84cc16;
  --theme-accent-soft: rgba(20, 184, 166, 0.24);
  --theme-aura: rgba(190, 242, 100, 0.34);
  --theme-page-start: #f7fee7;
  --theme-page-end: #d9fff3;
  --theme-sidebar-bg: rgba(236, 253, 245, 0.9);
  --theme-topbar-bg: rgba(240, 253, 250, 0.86);
  --theme-panel-bg: rgba(255, 255, 255, 0.78);
}

.marketing-shell[data-theme="midnight"] {
  --marketing-bg: #10172a;
  --marketing-ink: #f8fafc;
  --marketing-muted: #cbd5e1;
  --marketing-line: rgba(148, 163, 184, 0.24);
  --theme-accent: #7c3aed;
  --theme-accent-2: #22d3ee;
  --theme-accent-soft: rgba(124, 58, 237, 0.34);
  --theme-aura: rgba(34, 211, 238, 0.2);
  --theme-page-start: #07111f;
  --theme-page-end: #1f1644;
  --theme-sidebar-bg: rgba(8, 17, 31, 0.88);
  --theme-topbar-bg: rgba(15, 23, 42, 0.74);
  --theme-panel-bg: rgba(15, 23, 42, 0.72);
}

.marketing-sidebar {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-right: 1px solid rgba(7, 24, 46, 0.08);
  background: var(--theme-sidebar-bg);
  backdrop-filter: blur(16px);
}

.marketing-brand {
  min-height: 76px;
  padding: 16px 14px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-bottom: 1px solid var(--marketing-line);
}

.marketing-brand .brand-logo {
  width: 160px;
}

.marketing-nav {
  min-height: 0;
  padding: 14px 12px;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
}

.marketing-nav-item {
  min-height: 42px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--marketing-muted);
  box-shadow: none;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 850;
}