:root {
  --ink:        #1a1d21;
  --ink-soft:   #4a4f57;
  --ink-faint:  #8a9099;
  --line:       #e3e1da;
  --line-soft:  #efede7;
  --paper:      #f7f5f0;
  --surface:    #ffffff;
  --accent:     #1f4e4a;   /* deep teal-slate */
  --accent-ink: #163a37;
  --accent-soft:#eaf1ef;
  --danger:     #9a3328;
  --danger-soft:#f6ece9;
  --ok:         #2f6b4f;
  --radius:     6px;
  --shadow:     0 1px 2px rgba(26,29,33,.04), 0 8px 24px rgba(26,29,33,.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.auth-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 920px) {
  .auth-wrap { grid-template-columns: 1.05fr 1fr; }
}

/* Left brand panel */
.auth-brand {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem 3.5rem;
  background: var(--accent);
  color: #eef3f1;
}
@media (min-width: 920px) { .auth-brand { display: flex; } }

.auth-brand .mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  letter-spacing: .01em;
  font-weight: 600;
}
.auth-brand .mark span { opacity: .6; font-weight: 400; }

.auth-brand h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1.2;
  margin: 0 0 1rem;
  max-width: 26rem;
}
.auth-brand p {
  color: #c3d4d0;
  max-width: 30rem;
  margin: 0;
}
.auth-brand .trust {
  display: flex;
  gap: 1.5rem;
  font-size: .82rem;
  color: #a9c0bb;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 1.5rem;
}
.auth-brand .trust b { color: #dfeae7; font-weight: 600; display: block; }

/* Right form panel */
.auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}
.auth-card {
  width: 100%;
  max-width: 25rem;
}
.auth-card .mobile-mark {
  font-family: Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 2rem;
}
@media (min-width: 920px) { .auth-card .mobile-mark { display: none; } }

.auth-card h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.7rem;
  margin: 0 0 .4rem;
  color: var(--ink);
}
.auth-card .sub {
  color: var(--ink-soft);
  font-size: .95rem;
  margin: 0 0 1.8rem;
}

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: .4rem;
  letter-spacing: .01em;
}
.field input[type=text],
.field input[type=email],
.field input[type=password] {
  width: 100%;
  padding: .7rem .85rem;
  font-size: .95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field .hint { font-size: .78rem; color: var(--ink-faint); margin-top: .35rem; }

.consent {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .85rem;
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
  line-height: 1.5;
}
.consent input { margin-top: .2rem; flex-shrink: 0; }

.btn {
  width: 100%;
  padding: .8rem 1rem;
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s;
}
.btn:hover { background: var(--accent-ink); }

.alt-line {
  text-align: center;
  font-size: .9rem;
  color: var(--ink-soft);
  margin-top: 1.5rem;
}

.notice {
  padding: .8rem 1rem;
  border-radius: var(--radius);
  font-size: .88rem;
  margin-bottom: 1.4rem;
  border: 1px solid transparent;
}
.notice.error { background: var(--danger-soft); border-color: #e8cdc7; color: var(--danger); }
.notice.ok    { background: #e9f3ee; border-color: #c9e2d4; color: var(--ok); }

.legal-foot {
  margin-top: 2.5rem;
  font-size: .76rem;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.6;
}

/* Login mode tabs (Password / Email link) */
.auth-tabs { display: flex; gap: .3rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line, #e4e0d8); }
.auth-tab { padding: .55rem .9rem; font-size: .9rem; color: var(--ink-soft, #6b6b6b); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.auth-tab:hover { color: var(--ink, #1a1d21); }
.auth-tab.active { color: var(--accent, #1f4e4a); border-bottom-color: var(--accent, #1f4e4a); font-weight: 600; }

/* Auth language switcher */
.auth-lang { display: flex; gap: 2px; justify-content: flex-end; margin-bottom: .5rem; }
.auth-lang-opt { font-size: .72rem; font-weight: 600; color: #9a978f; padding: .2rem .45rem; border-radius: 5px; text-decoration: none; letter-spacing: .03em; }
.auth-lang-opt:hover { background: rgba(0,0,0,.05); }
.auth-lang-opt.active { background: #1f4e4a; color: #fff; }