/* Pet Care Loop sign in screens (/loop, /loop/join, /loop/password, /loop/reset) and the
   Pet Care Loop app code screen. "Field Tool" look: white, near black #121826, blue #0068FF.
   The same file ships in dogloop-app/assets/loop.css. Mobile first. */
:root {
  --dl-ink: #121826;
  --dl-blue: #0068FF;
  --dl-blue-dark: #0057D6;
  --dl-bg: #FFFFFF;
  --dl-line: #121826;
  --dl-hair: #D9DEE6;
  --dl-muted: #5B6475;
  --dl-soft: #F3F5F8;
  --dl-bluesoft: #E8F1FF;
  --dl-body: 'Inter', system-ui, -apple-system, sans-serif;
  /* old names, kept so any inline style that reads them still works */
  --dl-plum: #0068FF;
  --dl-gold: #0068FF;
  --dl-gold-dark: #0057D6;
  --dl-display: var(--dl-body);
  --dl-err-bg: #F3F5F8;
  --dl-err: #121826;
  --dl-ok-bg: #E8F1FF;
  --dl-ok: #121826;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: #fff; }
body.dl {
  min-height: 100dvh;
  font: 500 16px/1.45 var(--dl-body);
  color: var(--dl-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.dl-wrap { max-width: 440px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); min-height: 100dvh; display: flex; flex-direction: column; }
.dl-brand { display: flex; align-items: center; gap: 10px; padding: 8px 0 30px; }
.dl-brand img { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1.5px solid var(--dl-hair); padding: 3px; }
.dl-word { margin: 0; font: 800 22px/1 var(--dl-body); letter-spacing: -.02em; color: var(--dl-ink); }
.dl-word span { color: var(--dl-ink); }
.dl-tag { margin: 0 0 0 auto; color: var(--dl-muted); font-size: 13px; font-weight: 600; }
.dl-card { background: #fff; padding: 0; }
.dl-card h1 { font: 800 34px/1.05 var(--dl-body); letter-spacing: -.02em; margin: 0 0 10px; color: var(--dl-ink); }
.dl-sub { margin: 0 0 22px; color: var(--dl-muted); font-size: 15.5px; }
.dl-biz { display: flex; align-items: center; gap: 14px; border: 2px solid var(--dl-ink); border-radius: 18px; padding: 14px; margin: 0 0 22px; font: 800 18px var(--dl-body); letter-spacing: -.01em; }
.dl-biz img { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1.5px solid var(--dl-hair); padding: 3px; flex: none; }
.dl-biz small { display: block; font: 700 12px var(--dl-body); letter-spacing: .08em; text-transform: uppercase; color: var(--dl-muted); margin-bottom: 4px; }
.dl-biz b { flex: 1; min-width: 0; }
.dl-link { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; padding: 6px 4px; color: var(--dl-blue); font: 700 15px var(--dl-body); cursor: pointer; text-decoration: none; }
.dl-field { display: block; margin-bottom: 16px; }
.dl-field > span { display: block; font: 700 12px var(--dl-body); letter-spacing: .08em; text-transform: uppercase; color: var(--dl-muted); margin-bottom: 8px; }
.dl-field input { width: 100%; height: 62px; border: 2px solid var(--dl-line); border-radius: 14px; padding: 0 18px; font: 500 18px var(--dl-body); color: var(--dl-ink); background: #fff; -webkit-appearance: none; appearance: none; }
.dl-field input[readonly] { background: var(--dl-soft); border-color: var(--dl-hair); }
.dl-field input::placeholder { color: #9AA3B2; }
.dl-field input:focus { outline: none; border-color: var(--dl-blue); box-shadow: 0 0 0 4px var(--dl-bluesoft); }
.dl-pw { position: relative; }
.dl-pw input { padding-right: 80px; }
.dl-eye { position: absolute; right: 8px; top: 9px; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--dl-blue); font: 700 14px var(--dl-body); cursor: pointer; }
.dl-codebox { width: 100%; height: 96px; margin: 2px 0 20px; text-align: center; font: 800 48px var(--dl-body); font-variant-numeric: tabular-nums; letter-spacing: .5em; text-indent: .5em; color: var(--dl-ink); border: 2px solid var(--dl-line); border-radius: 18px; background: #fff; caret-color: var(--dl-blue); -webkit-appearance: none; appearance: none; }
.dl-codebox::placeholder { color: #B7BFCC; }
.dl-codebox:focus { outline: none; border-color: var(--dl-blue); box-shadow: 0 0 0 4px var(--dl-bluesoft); }
.dl-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 72px; border: 0; border-radius: 18px; background: var(--dl-blue); color: #fff; font: 800 21px var(--dl-body); letter-spacing: -.01em; cursor: pointer; text-decoration: none; }
.dl-btn:hover { background: var(--dl-blue-dark); }
.dl-btn:active { transform: translateY(1px); }
.dl-btn[disabled] { opacity: .5; cursor: default; }
.dl-err { background: #fff; color: var(--dl-ink); border: 2px solid var(--dl-ink); border-radius: 14px; padding: 12px 14px; font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.dl-ok { background: var(--dl-bluesoft); color: var(--dl-ink); border-radius: 14px; padding: 12px 14px; font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.dl-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.dl-foot { margin: auto 0 0; padding-top: 24px; text-align: center; color: var(--dl-muted); font-size: 14px; }
.dl-foot a { color: var(--dl-blue); font-weight: 700; }
.dl-install { margin-top: 18px; background: var(--dl-soft); color: var(--dl-ink); border-radius: 16px; padding: 14px 16px; font-size: 14px; }
.dl-install b { color: var(--dl-ink); }
.dl-install button { margin-top: 10px; height: 52px; width: 100%; border-radius: 14px; border: 2px solid var(--dl-ink); background: #fff; color: var(--dl-ink); font: 800 16px var(--dl-body); cursor: pointer; }
.dl-stay { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 14px; font: 600 14px var(--dl-body); }
@media (min-width: 900px) {
  .dl-wrap { justify-content: center; }
  .dl-foot { margin-top: 18px; }
}