:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #242119;
  background: #fffaf0;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 83% 8%, rgba(255, 208, 45, .23), transparent 29rem),
    radial-gradient(circle at 8% 94%, rgba(31, 117, 90, .08), transparent 35rem),
    #fffaf0;
}

button, input { font: inherit; }
button { cursor: pointer; }

.site-header {
  width: min(1180px, calc(100% - 44px));
  min-height: 100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand img {
  display: block;
  width: 190px;
  height: 78px;
  object-fit: contain;
}

.account-nav {
  display: flex;
  align-items: center;
  gap: 17px;
  color: #6f695c;
  font-size: .9rem;
}

.text-button {
  border: 0;
  padding: 8px 0;
  background: transparent;
  color: #1f755a;
  font-weight: 800;
}

main {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  padding: 4vh 0 10vh;
}

.auth-layout {
  min-height: calc(100vh - 150px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .75fr);
  align-items: center;
  gap: clamp(45px, 7vw, 110px);
}

.eyebrow, .card-kicker {
  margin: 0 0 10px;
  color: #bd5918;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

h1, h2 { font-family: Georgia, "Times New Roman", serif; }

.hero h1, .library-heading h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(3.1rem, 6.4vw, 6.4rem);
  line-height: .94;
  letter-spacing: -.055em;
}

.intro {
  max-width: 620px;
  margin: 26px 0 0;
  color: #565143;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.58;
}

.quiet { margin-top: 4vh; color: #817a69; font-size: .86rem; }

.auth-stage { position: relative; }
.auth-stage::before {
  content: "";
  position: absolute;
  inset: -40px;
  border-radius: 46% 54% 49% 51%;
  background: linear-gradient(145deg, rgba(255, 217, 72, .5), rgba(255, 173, 33, .17));
  transform: rotate(-3deg);
}

.auth-card {
  position: relative;
  padding: clamp(25px, 4vw, 42px);
  border: 1px solid rgba(108, 86, 27, .1);
  border-radius: 28px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 28px 75px rgba(93, 67, 18, .14);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 0 0 30px;
  padding: 5px;
  border-radius: 13px;
  background: #f4efe3;
}

.auth-tab {
  border: 0;
  border-radius: 9px;
  padding: 10px;
  background: transparent;
  color: #746d5d;
  font-weight: 800;
}

.auth-tab.active {
  background: white;
  color: #1f755a;
  box-shadow: 0 4px 13px rgba(75, 64, 36, .1);
}

.auth-form { display: grid; gap: 15px; }
.auth-form h2 { margin: 0; font-size: 2.1rem; line-height: 1.05; }
.auth-form > div > p:last-child { color: #6c6659; line-height: 1.5; }
.auth-form label { display: grid; gap: 7px; color: #5f594e; font-size: .83rem; font-weight: 800; }
.optional { color: #999184; font-weight: 500; }

.auth-form input {
  width: 100%;
  border: 1px solid #d9d0bd;
  border-radius: 11px;
  padding: 12px 13px;
  background: #fffefb;
  color: #28251e;
}

.auth-form input:focus {
  outline: 3px solid rgba(31, 117, 90, .14);
  border-color: #419276;
}

.invite-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.primary-button, .secondary-button, .card-button {
  border-radius: 12px;
  padding: 13px 17px;
  font-weight: 820;
}

.primary-button {
  border: 1px solid #1f755a;
  background: #1f755a;
  color: white;
}

.primary-button:hover { background: #185e49; }
.secondary-button, .card-button {
  border: 1px solid #d7cfbd;
  background: rgba(255,255,255,.8);
  color: #302c23;
}
.secondary-button:hover, .card-button:hover { border-color: #b9ad93; background: white; }
button:disabled { opacity: .55; cursor: wait; }

.form-note { margin: -3px 0 0; color: #8a8376; font-size: .78rem; line-height: 1.4; }
.message { min-height: 1.3em; margin: 0; color: #a14320; font-size: .85rem; line-height: 1.4; }
.message.success { color: #1f755a; }

.library { padding-top: 3vh; }
.library-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;
}
.library-heading h1 { font-size: clamp(3rem, 6vw, 5.8rem); }
.library-heading > div:first-child > p:last-child {
  max-width: 630px;
  color: #6b6558;
  font-size: 1.08rem;
  line-height: 1.55;
}
.new-actions { min-width: 220px; display: grid; gap: 10px; }
.library-message { margin: 25px 0 5px; }

.database-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.database-card {
  min-height: 255px;
  display: flex;
  flex-direction: column;
  padding: 25px;
  border: 1px solid rgba(91, 77, 43, .1);
  border-radius: 23px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 13px 38px rgba(72, 60, 30, .07);
}

.database-card::before {
  content: ".vitamine";
  align-self: flex-start;
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff1a8;
  color: #8a5b00;
  font: 750 .7rem ui-monospace, monospace;
}

.database-card h2 { margin: 20px 0 7px; font-size: 1.75rem; line-height: 1.05; }
.database-meta { margin: 0; color: #827a6b; font-size: .8rem; }
.database-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 23px; }
.database-actions .open { border-color: #1f755a; background: #1f755a; color: white; }
.card-button {
  display: inline-flex;
  align-items: center;
  padding: 9px 11px;
  font-size: .8rem;
  text-decoration: none;
}
.card-button.danger { color: #a24328; }

.empty-library {
  margin-top: 34px;
  padding: 70px 25px;
  border: 2px dashed #ded3b9;
  border-radius: 25px;
  text-align: center;
  color: #70695b;
}
.empty-library h2 { margin: 5px 0; font-size: 2rem; }
.empty-library p { margin: 8px 0 0; }
.empty-fruit { font-size: 3.2rem; }

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; padding-top: 4vh; }
  .auth-stage { width: min(520px, calc(100% - 30px)); margin: 30px auto; }
  .library-heading { align-items: flex-start; flex-direction: column; }
  .new-actions { width: 100%; grid-template-columns: 1fr 1fr; }
  .database-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .site-header, main { width: min(100% - 28px, 1180px); }
  .site-header { min-height: 82px; }
  .brand img { width: 135px; height: 60px; }
  .account-nav span { display: none; }
  .hero h1, .library-heading h1 { font-size: clamp(2.8rem, 15vw, 4.5rem); }
  .auth-stage { width: 100%; }
  .auth-stage::before { inset: -15px; }
  .auth-card { padding: 24px 20px; }
  .new-actions, .database-grid { grid-template-columns: 1fr; }
}