/* login.php styling — extracted from the inline <style> block so the
   page can drop unsafe-inline from CSP style-src. Kept self-contained
   (its own colour palette + utilities) because login.php loads with
   no other CSS — the rest of the app's shell.css is for the
   authenticated screens. */

:root {
  --bg: #F5F0E6; --surface: #FBF7EE;
  --ink: #1F1B14; --ink2: #5C5248; --ink3: #8A7E6E;
  --line: #E2D9C5; --lineStrong: #CFC3A8;
  --acc: #B2611E; --acc-soft: #E8CBA5;
  --low-fg: #9A3A1E; --low-bd: #D18770; --low-bg: #F4D9CC;
  --ok-fg: #2D5A3D; --ok-bg: #DCEAD8;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body {
  display: flex; align-items: center; justify-content: center; padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.card {
  width: 100%; max-width: 380px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 32px 28px;
  box-shadow: 0 1px 0 rgba(255,253,247,.6) inset, 0 8px 32px rgba(31,27,20,.06);
}
.brand { display: flex; align-items: baseline; justify-content: center; gap: 1px; margin-bottom: 6px; }
.brand .a { font-family: 'Fraunces', serif; font-size: 34px; font-weight: 400; font-style: italic; color: var(--ink);  letter-spacing: -.02em; }
.brand .l { font-family: 'Fraunces', serif; font-size: 34px; font-weight: 600;                       color: var(--acc); letter-spacing: -.02em; }
.sub { text-align: center; font-size: 12px; color: var(--ink3); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 28px; }
.grp { display: flex; flex-direction: column; gap: 14px; }
label span { font-size: 12px; color: var(--ink2); letter-spacing: .04em; }
input[type=password], input[type=text] {
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: #FFFDF7; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; outline: none; transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(178,97,30,.15); }
button {
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em;
  padding: 13px 16px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--acc); color: #FBF7EE; transition: filter .15s, transform .05s;
  width: 100%;
}
button.ghost { background: transparent; color: var(--ink2); border: 1px solid var(--line); }
button:hover { filter: brightness(1.06); }
button:active { transform: translateY(1px); }
button[disabled] { opacity: .55; cursor: not-allowed; }
button.passkey { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; padding: 15px 16px; }
button.passkey svg { width: 22px; height: 22px; flex-shrink: 0; }
.err { margin: 0; font-size: 13px; color: var(--low-fg); min-height: 18px; }
.err:not(:empty) { padding: 8px 12px; background: var(--low-bg); border: 1px solid var(--low-bd); border-radius: 8px; }
.ok  { margin: 0; font-size: 13px; color: var(--ok-fg); }
.ok:not(:empty)  { padding: 8px 12px; background: var(--ok-bg);  border: 1px solid #BFD5C3;  border-radius: 8px; }
.sep { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--ink3); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.sep::before, .sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.alt-link { display: block; text-align: center; background: none; border: none; color: var(--ink2); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px; width: auto; margin: 0 auto; }
.alt-link:hover { color: var(--acc); }
.hidden { display: none; }
.new-code { padding: 14px 16px; background: #FFF8E6; border: 1px dashed var(--lineStrong); border-radius: 10px; }
.new-code .lbl  { font-size: 11px; color: var(--ink3); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.new-code .code { font-family: ui-monospace, Menlo, monospace; font-size: 18px; font-weight: 600; letter-spacing: .06em; color: var(--ink); }
.foot { margin-top: 24px; text-align: center; font-size: 11px; color: var(--ink3); letter-spacing: .02em; }