/* Love Letters from God — extracted from the Claude Design template.
   Color, type, and spacing values are copied verbatim from template.html.
   The only things changed from the mockup: the fixed 390x844 "device"
   frame becomes a fluid container (real phones aren't 390x844 exactly,
   and a real page shouldn't clip its own content), and the fake status
   bar / battery icon are dropped (the real phone already has one). */

html, body {
  margin: 0;
  padding: 0;
  background: #E7E0D3;
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  color: #2E2A24;
}

textarea {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

textarea::placeholder {
  color: #A79D90;
}

textarea:focus {
  outline: none;
  border-color: #9A6A4E;
}

a {
  color: #9A6A4E;
  text-decoration: none;
}

a:hover {
  color: #7E5540;
}

.ll-page {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  background: #E7E0D3;
}

.ll-device {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  background: #F4EFE6;
  color: #2E2A24;
  display: flex;
  flex-direction: column;
  position: relative;
}

.ll-scroll {
  flex: 1 1 auto;
}

.ll-tabbar {
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
  display: flex;
  background: #F0E9DC;
  border-top: 1px solid #E0D6C4;
  padding: 0 0 calc(20px + env(safe-area-inset-bottom));
}

.ll-tab {
  flex: 1;
  min-height: 56px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 18px 0 8px;
}

[hidden] {
  display: none !important;
}

.ll-archive-link {
  display: block;
  text-align: center;
  margin: 4px 0 44px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #9C9284 !important;
}

.ll-archive-row {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid #E0D6C4;
  font-size: 15px;
  color: #3A342C !important;
}