:root {
  --green: #1F3B2E;
  --green-2: #2c4f3e;
  --sage: #8FA88F;
  --sage-soft: #dfe7d9;
  --cream: #F6F3EB;
  --rose: #E8D0C9;
  --muted: #5b6b62;
  --line: #e6e0d3;
  --danger: #9b3b2f;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.7, 0, .25, 1);
  --slide: .85s;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--green);
  background:
    radial-gradient(700px 500px at 10% 0%, rgba(232, 208, 201, .55), transparent 70%),
    radial-gradient(600px 500px at 100% 100%, rgba(143, 168, 143, .3), transparent 70%),
    var(--cream);
  -webkit-font-smoothing: antialiased;
}
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }

/* Kort */
.auth {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(1000px, 100%);
  min-height: 640px;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(31, 59, 46, .45), 0 12px 28px -16px rgba(31, 59, 46, .2);
  transition: opacity .4s ease, transform .4s ease;
}
.is-checking .auth { opacity: 0; transform: translateY(8px); }

/* Formularer */
.pane {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 52px;
  transition: opacity .45s ease, transform var(--slide) var(--ease);
}
.pane-register { grid-column: 1; }
.pane-login { grid-column: 2; }

/* Skjult form glider i samme retning som grafikpanelet og fader ud */
.mode-login .pane-register { opacity: 0; transform: translateX(-18%); pointer-events: none; }
.mode-register .pane-login { opacity: 0; transform: translateX(18%); pointer-events: none; }
.mode-login .pane-login,
.mode-register .pane-register { transition-delay: .2s, 0s; }

.form { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.form h1 { font-size: 2.1rem; }
.sub { color: var(--muted); margin-bottom: 10px; }

label { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; font-weight: 600; }
input {
  font: inherit; font-weight: 400; color: inherit;
  padding: .8em 1em;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fdfcf9;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 4px rgba(143, 168, 143, .25); }
.hint { font-weight: 400; font-size: .8rem; color: var(--muted); }
.error { min-height: 1.4em; font-size: .88rem; color: var(--danger); }

.btn {
  font: inherit; font-weight: 600;
  padding: .9em 1.6em;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, color .15s ease;
}
.btn-primary { border: 0; background: var(--green); color: var(--cream); box-shadow: 0 8px 20px -8px rgba(31, 59, 46, .6); }
.btn-primary:hover { background: var(--green-2); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-outline { background: transparent; color: var(--cream); border: 1.5px solid rgba(246, 243, 235, .6); }
.btn-outline:hover { background: var(--cream); color: var(--green); }

.switch { display: none; text-align: center; font-size: .9rem; color: var(--muted); margin-top: 6px; }
.switch button { font: inherit; font-weight: 600; color: var(--green); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Grafikpanel */
.art {
  position: absolute;
  inset: 0 0 0 50%;
  z-index: 2;
  overflow: hidden;
  color: var(--cream);
  background:
    radial-gradient(420px 320px at 15% 0%, rgba(143, 168, 143, .35), transparent 70%),
    radial-gradient(380px 320px at 100% 100%, rgba(232, 208, 201, .22), transparent 70%),
    var(--green);
  transition: transform var(--slide) var(--ease);
}
.mode-login .art { transform: translateX(-100%); }

.art-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 48px;
  text-align: center;
  transition: transform var(--slide) var(--ease);
}
/* Let parallax: indholdet halter en smule efter panelet */
.mode-login .art-inner { transform: translateX(6%); }
.mode-register .art-inner { transform: translateX(-6%); }

.art-brand { display: flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; font-family: var(--serif); font-weight: 600; font-size: 1.7rem; }
.art-brand .leaf { fill: var(--sage); stroke: var(--sage); }

.illustration { width: min(280px, 70%); height: auto; overflow: visible; }
.ring { fill: none; stroke: rgba(246, 243, 235, .12); stroke-width: 1.5; }
.ring-dashed { stroke: rgba(143, 168, 143, .4); stroke-dasharray: 3 9; stroke-linecap: round; }
.table-spin { transform-origin: 160px 160px; animation: spin 90s linear infinite; }
.chairs rect { fill: var(--rose); opacity: .9; }
.tabletop { fill: var(--cream); }
.plates circle { fill: #fff; stroke: var(--sage); stroke-width: 1.5; }
.greens ellipse { fill: var(--sage); }
.flowers circle { fill: var(--rose); stroke: #fff; stroke-width: 1.5; }
.flower-dots circle { fill: #d8b3a8; }
@keyframes spin { to { transform: rotate(360deg); } }

.art-copy { display: grid; max-width: 320px; }
.copy {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transition: opacity .4s ease, transform .6s var(--ease);
}
.copy h2 { font-size: 1.6rem; }
.copy p { color: rgba(246, 243, 235, .78); margin-bottom: 8px; }
.mode-login .copy-register,
.mode-register .copy-login { opacity: 0; transform: translateY(10px); pointer-events: none; }
.mode-login .copy-login,
.mode-register .copy-register { transition-delay: .3s; }

/* Mobil: grafik øverst, formularerne skifter med fade */
@media (max-width: 820px) {
  body { padding: 0; place-items: stretch; }
  .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100vh; border-radius: 0; }
  .art { position: relative; inset: auto; grid-row: 1; grid-column: 1; transform: none !important; }
  .art-inner { flex-direction: row; justify-content: flex-start; padding: 22px 20px; transform: none !important; }
  .art-brand { font-size: 1.35rem; }
  .art-brand svg { width: 48px; height: 36px; }
  .illustration { position: absolute; right: -40px; top: 50%; width: 170px; transform: translateY(-50%); opacity: .55; }
  .art-copy { display: none; }
  .pane { grid-row: 2; grid-column: 1; padding: 36px 22px 48px; align-items: flex-start; }
  .mode-login .pane-register { transform: translateX(-8%); }
  .mode-register .pane-login { transform: translateX(8%); }
  .switch { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}