/* Sign in page and management panel. Tokens come from app.css. */
.login { max-width: 440px; margin: 8vh auto; padding: 0 16px; }
.login .brand { border: 0; padding: 0 0 16px; }
.login h2 { font-size: 18px; margin-bottom: 4px; }
.fl { display: block; font-size: 12px; font-weight: 650; color: var(--dim); margin: 12px 0 4px; }
input[type=tel], input[type=password], input[type=text], select { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 9px 11px; font: inherit; }
.primary { background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); border-radius: 20px; padding: 7px 18px; font-weight: 650; }
.quiet { background: var(--bg); color: var(--dim); border: 1px solid var(--line); border-radius: 20px; padding: 3px 11px; font-size: 12.5px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.msg { font-size: 12.5px; color: var(--crit); }
.enrol { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; background: var(--bg-3); }
.qr { display: block; margin: 10px auto 6px; border-radius: 8px; border: 1px solid var(--line); image-rendering: pixelated; }
.key { font: 700 17px Consolas, ui-monospace, monospace; letter-spacing: 1px; margin-top: 8px; overflow-wrap: anywhere; user-select: all; }
input#code { letter-spacing: 6px; font-size: 18px; }
.notice { margin-top: 16px; font-size: 12px; color: var(--faint); border-top: 1px solid var(--line-2); padding-top: 10px; }
.admin { max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; }
.admin header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.admin header h1 { font-size: 20px; } .admin header a { margin-left: auto; }
.add { display: grid; grid-template-columns: 2fr 1.4fr 1fr 1fr 1fr max-content; gap: 10px; align-items: end; }
#access td, #access th { text-align: center; } #access td:first-child, #access th:first-child { text-align: left; }
#access input { width: 18px; height: 18px; }
.pinbox { display: flex; gap: 6px; } .pinbox input { width: 120px; padding: 3px 8px; }
td.l, th.l { text-align: left; } td .off { color: var(--faint); }
.tagr { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 1px 7px; border: 1px solid var(--line); }
.tagr.admin { color: var(--brand); } .tagr.editor { color: var(--green); } .tagr.viewer { color: var(--dim); }
.ev { display: grid; grid-template-columns: 150px 170px 1fr; gap: 8px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--line-2); }
.ev span:first-child { color: var(--faint); } .ev.fail span:last-child { color: var(--crit); }
@media (max-width: 760px) { .add { grid-template-columns: 1fr; } .ev { grid-template-columns: 1fr; gap: 0; } }