:root {
  --navy: #12213D;
  --navy-light: #1C3159;
  --gold: #C89B3C;
  --ivory: #F5F3EE;
  --white: #FFFFFF;
  --text-muted: #75726C;
  --border: #ECE9DF;
  --green: #3A7D57;
  --red: #C1443C;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Public Sans', -apple-system, sans-serif;
  background: var(--ivory);
  color: var(--navy);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

.screen {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.hero {
  background: var(--navy);
  padding: calc(env(safe-area-inset-top, 0px) + 28px) 24px 20px;
  border-radius: 0 0 24px 24px;
  color: var(--white);
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px;
}

.btn {
  height: 50px;
  border-radius: 14px;
  border: none;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary { background: var(--gold); color: var(--navy); }
.btn-dark { background: var(--navy); color: var(--white); }
.btn-outline { background: transparent; border: 1.5px solid #D8D4C8; color: var(--navy); }

input, textarea, select {
  font-family: inherit;
  height: 50px;
  border-radius: 12px;
  border: 1.5px solid #E4E1D8;
  background: var(--ivory);
  padding: 0 16px;
  font-size: 15px;
  color: var(--navy);
  width: 100%;
}

.label { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; display: block; }

.error-box {
  background: #FBEEED;
  color: var(--red);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
}

.content { flex-grow: 1; overflow-y: auto; padding: 16px 20px 100px; }

.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: 480px;
  margin: 0 auto;
  height: 76px;
  background: var(--white);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: #B8B4A8; font-size: 10px;
}
.tabbar a.active { color: var(--navy); font-weight: 700; }

.spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }