/* The sign-in pages, drawn in the app's own colours and fonts. */
@font-face { font-family:'IBM Plex Sans'; font-weight:400;
  src:url('/fonts/IBMPlexSans-Regular.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:500;
  src:url('/fonts/IBMPlexSans-Medium.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:600;
  src:url('/fonts/IBMPlexSans-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'DM Mono'; font-weight:400;
  src:url('/fonts/DMMono-Regular.ttf') format('truetype'); }

* { box-sizing:border-box }
html, body { margin:0; min-height:100% }
body {
  background:#f7f4ee;
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  color:#191710;
  -webkit-font-smoothing:antialiased;
  display:flex; justify-content:center; align-items:flex-start;
  padding:10vh 24px 40px;
}
.card {
  width:420px; background:#fffdf8; border:1px solid #ddd7ca; border-radius:9px;
  box-shadow:0 14px 34px rgba(25,23,16,.16), 0 2px 4px rgba(25,23,16,.08);
  overflow:hidden;
}
.card.wide { width:820px }
.head { padding:22px 22px 14px; display:flex; gap:12px; align-items:center }
.head img { width:34px; height:34px; object-fit:contain }
h1 { font-size:18px; font-weight:600; letter-spacing:-.016em; margin:0 }
.sub { font-size:13.5px; color:#5f5a4e; line-height:1.5; margin:2px 0 0 }
.body { padding:4px 22px 18px; display:flex; flex-direction:column; gap:14px }
.foot { padding:14px 22px; border-top:1px solid #e2dcd0; font-size:13px; color:#5f5a4e; line-height:1.5 }
label { font-size:13px; font-weight:500; color:#3d3a32; display:block; margin-bottom:6px }
input[type=text], input[type=password], select {
  font:400 15px 'IBM Plex Sans', system-ui, sans-serif; color:#191710;
  background:#f7f4ee; border:1px solid #d3ccbd; border-radius:6px;
  padding:11px 13px; width:100%; outline:none;
}
input:focus, select:focus { border-color:oklch(0.5 0.15 250); background:#fff }
input.wrong { border-color:oklch(0.55 0.19 25) }
.row { display:flex; gap:8px; align-items:center }
.row input { flex:1 }
.show { font:500 13px 'IBM Plex Sans'; color:#5f5a4e; background:#fffdf8; border:1px solid #ddd7ca;
  border-radius:6px; padding:11px 12px; cursor:pointer; white-space:nowrap }
.primary { font:600 15px 'IBM Plex Sans'; color:#fff; background:oklch(0.55 0.19 25);
  border:none; border-radius:6px; padding:13px 22px; cursor:pointer }
.primary:hover:not(:disabled) { background:oklch(0.48 0.19 25) }
.secondary { font:500 13.5px 'IBM Plex Sans'; color:#3d3a32; background:#fffdf8; border:1px solid #ddd7ca;
  border-radius:6px; padding:8px 12px; cursor:pointer }
.secondary:hover:not(:disabled) { background:#efeade }
button:disabled { opacity:.5; cursor:default }
.say { font-size:13.5px; line-height:1.5; color:oklch(0.45 0.17 25); margin-top:6px }
.say:empty { display:none }
.good { font-size:14px; line-height:1.55; color:#191710 }
.name { font-weight:600 }
.code { font:400 22px 'DM Mono', monospace; letter-spacing:.02em; color:#191710;
  background:#f2ede1; border-radius:6px; padding:12px 14px; text-align:center }
a { color:oklch(0.5 0.15 250); text-decoration:none }
a:hover { color:oklch(0.4 0.15 250) }
table { width:100%; border-collapse:collapse; font-size:14px }
th { text-align:left; font-size:12px; font-weight:500; color:#716c61; text-transform:uppercase;
  letter-spacing:.04em; padding:8px 6px; border-bottom:1px solid #e2dcd0 }
td { padding:10px 6px; border-bottom:1px solid #eee8dc; vertical-align:middle }
td.actions { text-align:right; white-space:nowrap }
.tag { font-size:12px; color:#716c61; background:#f2ede1; border-radius:10px; padding:2px 8px }
.never { color:oklch(0.5 0.15 60); font-weight:500 }
.message { font:400 13.5px 'IBM Plex Sans'; line-height:1.55; background:#f7f4ee; border:1px solid #ddd7ca;
  border-radius:6px; padding:12px 14px; white-space:pre-wrap; user-select:all }
.hidden { display:none !important }