@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root {
  --pp-ink: #12241c;
  --pp-muted: #5b6f66;
  --pp-line: rgba(15, 40, 30, 0.08);
  --pp-card: #ffffff;
  --pp-wash: #eef6f1;
  --pp-teal: #0f6e62;
  --pp-teal-2: #1a8a76;
  --pp-gold: #c4a15a;
  --shadow-card: 0 1px 2px rgba(16, 36, 28, 0.04), 0 10px 28px rgba(16, 36, 28, 0.06);
}

html, body {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  color: var(--pp-ink);
  background: var(--pp-wash);
  letter-spacing: -0.011em;
}

h1, h2, .pp-serif {
  font-family: Fraunces, Georgia, serif;
  letter-spacing: -0.02em;
}

#app {
  background:
    radial-gradient(1200px 420px at 50% -80px, rgba(20, 120, 100, 0.16), transparent 60%),
    #f4faf6;
}

header {
  background: linear-gradient(135deg, #0c4f48 0%, #0f6e62 52%, #3d6a32 100%) !important;
  box-shadow: 0 8px 24px rgba(12, 79, 72, 0.22);
  backdrop-filter: blur(10px);
}

header .font-bold {
  font-family: Fraunces, Georgia, serif;
  font-weight: 650;
}

.nav-btn {
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.nav-btn:hover { color: var(--pp-teal); background: #ecfdf5; }
.nav-btn:active { transform: scale(0.97); }
.nav-btn[data-view].text-teal-700 {
  background: #d7f3eb;
  border-radius: 1rem;
  color: #0b4f47 !important;
}

#tabnav {
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.92) !important;
  border-top: 1px solid var(--pp-line);
}

.zone-grid { display: grid; gap: 1.15rem; }
@media (min-width: 768px) {
  .zone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 1024px) {
  .zone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

#main .bg-white,
#main .rounded-3xl,
#main .rounded-2xl {
  box-shadow: var(--shadow-card);
  border-color: var(--pp-line);
}

#main button,
#main [role="button"] {
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
#main button:active,
#main [role="button"]:active {
  transform: scale(0.985);
}

.pp-progress { height: 8px; background: #d7f3eb; border-radius: 999px; overflow: hidden; }
.pp-progress > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #0f6e62, #2dd4bf);
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(.22,.8,.28,1);
}
.pp-pulse { animation: ppPulse 1.4s ease-in-out infinite; }
@keyframes ppPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

.view-enter {
  animation: viewIn 0.28s cubic-bezier(.22,.8,.28,1);
}
@media (prefers-reduced-motion: reduce) {
  .view-enter, .pp-pulse, .pp-progress > span, #toast { animation: none !important; transition: none !important; }
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

#toast {
  background: #12241c !important;
  color: #f6fbf7 !important;
  border-radius: 999px !important;
  padding: 0.7rem 1.1rem !important;
  box-shadow: 0 12px 32px rgba(18, 36, 28, 0.28);
  transform: translate(-50%, 8px);
  transition: opacity 0.28s ease, transform 0.28s ease !important;
}
#toast.show {
  opacity: 1 !important;
  transform: translate(-50%, 0);
}

.safe-bottom { padding-bottom: max(0.55rem, env(safe-area-inset-bottom)); }

@media (min-width: 768px) and (max-width: 1023px) {
  body { background: #dfeae3; }
  #app {
    max-width: 56rem;
    border-radius: 1.25rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    min-height: calc(100vh - 1.5rem);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(16, 36, 28, 0.12);
  }
}
@media (min-width: 1024px) {
  html, body { height: 100%; }
  body { background: #e6efe9; }
  #app {
    display: grid !important;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "head head" "side main";
    max-width: none !important;
    width: 100%;
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
    height: 100vh;
    box-shadow: none;
  }
  header { grid-area: head; }
  nav#tabnav {
    grid-area: side;
    position: static;
    height: 100%;
    border-top: 0;
    border-right: 1px solid var(--pp-line);
    box-shadow: none;
    padding: 1rem 0.75rem 1.25rem;
    background: rgba(255,255,255,0.86) !important;
  }
  nav#tabnav > div { display: flex; flex-direction: column; gap: 0.4rem; max-width: none; }
  nav#tabnav .nav-btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    border-radius: 0.9rem;
    text-align: left;
  }
  nav#tabnav .nav-btn span:first-child { font-size: 1.25rem; }
  #main { grid-area: main; padding-bottom: 1.5rem; }
}