/* Lovkart shared shell — design system for the tester portal + content pages.
   Legal-tool identity: muted navy accent, serif display, clean sans body.
   Both themes; system preference with an optional [data-theme] override. */
:root {
  --bg:#F4F6F9; --surface:#FFFFFF; --surface-2:#EEF2F7; --ink:#1B2330;
  --muted:#5A6675; --line:#D8DEE7; --accent:#2F5382; --accent-ink:#FFFFFF;
  --ok:#2E7D5B; --err:#A93B36; --radius:8px;
  --serif:Charter,"Iowan Old Style",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#141A24; --surface:#1D2531; --surface-2:#232C3A; --ink:#E8ECF2;
          --muted:#9AA6B5; --line:#303B4A; --accent:#7FA3CC; --accent-ink:#10151D;
          --ok:#6FCf9C; --err:#E88A85; }
}
:root[data-theme="light"] { --bg:#F4F6F9; --surface:#FFFFFF; --surface-2:#EEF2F7;
  --ink:#1B2330; --muted:#5A6675; --line:#D8DEE7; --accent:#2F5382; --accent-ink:#FFFFFF;
  --ok:#2E7D5B; --err:#A93B36; }
:root[data-theme="dark"] { --bg:#141A24; --surface:#1D2531; --surface-2:#232C3A;
  --ink:#E8ECF2; --muted:#9AA6B5; --line:#303B4A; --accent:#7FA3CC; --accent-ink:#10151D;
  --ok:#6FCF9C; --err:#E88A85; }

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }

header.site { border-bottom:1px solid var(--line); background:var(--surface); }
header.site .wrap { max-width:960px; margin:0 auto; padding:0.9rem 1.25rem;
  display:flex; align-items:center; gap:1rem; }
header.site .brand { font-family:var(--serif); font-weight:600; font-size:1.15rem;
  color:var(--ink); text-decoration:none; }
header.site nav { margin-left:auto; display:flex; gap:1.1rem; font-size:0.9rem; }
header.site nav a { color:var(--muted); text-decoration:none; }
header.site nav a:hover { color:var(--ink); }

main { max-width:960px; margin:0 auto; padding:2.5rem 1.25rem 4rem; }
main.narrow { max-width:26rem; }
h1 { font-family:var(--serif); font-size:1.9rem; line-height:1.2; margin:0 0 0.5rem;
  text-wrap:balance; }
h2 { font-family:var(--serif); font-size:1.2rem; margin:1.6rem 0 0.5rem; }
p { margin:0 0 0.9rem; }
.lede { color:var(--muted); font-size:1.05rem; margin-bottom:1.8rem; }

.card { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.6rem; }
.field { display:flex; flex-direction:column; gap:0.35rem; margin-bottom:1rem; }
.field label { font-size:0.85rem; color:var(--muted); }
.field input { padding:0.6rem 0.7rem; border:1px solid var(--line); border-radius:6px;
  background:var(--bg); color:var(--ink); font-size:1rem; font-family:var(--sans); }
.field input:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }

button, .btn { font-family:var(--sans); font-size:0.95rem; border-radius:6px;
  padding:0.6rem 1.1rem; border:1px solid transparent; cursor:pointer; }
.btn-primary { background:var(--accent); color:var(--accent-ink); width:100%; font-weight:600; }
.btn-primary:hover { filter:brightness(1.06); }
.btn-primary:disabled { opacity:0.55; cursor:default; }
.btn-google { background:var(--surface); color:var(--ink); border:1px solid var(--line);
  width:100%; display:flex; align-items:center; justify-content:center; gap:0.5rem; }
.btn-ghost { background:transparent; color:var(--accent); border:1px solid var(--line); }

.sep { display:flex; align-items:center; gap:0.75rem; color:var(--muted);
  font-size:0.8rem; margin:1.1rem 0; }
.sep::before, .sep::after { content:""; flex:1; height:1px; background:var(--line); }

.msg { border-radius:6px; padding:0.7rem 0.85rem; font-size:0.9rem; margin:0.9rem 0; display:none; }
.msg.show { display:block; }
.msg.err { background:color-mix(in srgb, var(--err) 12%, transparent); color:var(--err);
  border:1px solid color-mix(in srgb, var(--err) 35%, transparent); }
.msg.ok { background:color-mix(in srgb, var(--ok) 12%, transparent); color:var(--ok);
  border:1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.msg.info { background:var(--surface-2); color:var(--muted); border:1px solid var(--line); }

.foot-note { color:var(--muted); font-size:0.85rem; margin-top:1.2rem; text-align:center; }
.code-box { display:flex; gap:0.5rem; align-items:center; margin:0.6rem 0; }
.code-box code { flex:1; font-family:var(--mono); font-size:0.95rem; background:var(--surface-2);
  border:1px solid var(--line); border-radius:6px; padding:0.6rem 0.7rem; overflow-x:auto;
  word-break:break-all; }
.badge { display:inline-block; font-size:0.8rem; padding:0.15rem 0.55rem; border-radius:999px;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line); }

footer.site { border-top:1px solid var(--line); color:var(--muted); font-size:0.82rem; }
footer.site .wrap { max-width:960px; margin:0 auto; padding:1.5rem 1.25rem; display:flex;
  gap:1rem; flex-wrap:wrap; }
footer.site a { color:var(--muted); }
.spin { display:inline-block; width:1em; height:1em; border:2px solid currentColor;
  border-right-color:transparent; border-radius:50%; animation:sp 0.7s linear infinite;
  vertical-align:-2px; }
@keyframes sp { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation:none; } }