/* v0.24 scan to sign in (src/link.js, src/cloud.js). Island colours, solid bands. */
.lk-opt { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: #fff; border: 3px solid #14161f; border-radius: 14px; padding: 8px 10px; margin: 7px 0; cursor: pointer; font: inherit; color: #1c2033; }
.lk-opt.rec { background: #fff6d6; border-color: #b8860b; }
.lk-opt .ic { width: 38px; height: 38px; flex: none; border-radius: 10px; border: 2px solid #14161f; background: #dff0ff; display: grid; place-items: center; font-size: 20px; }
.lk-opt b { display: block; font-family: 'Lilita One', system-ui, sans-serif; font-weight: 400; font-size: 15px; }
.lk-opt b i { font: 700 10px system-ui; font-style: normal; background: #3fbf2e; color: #fff; border-radius: 6px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }
.lk-opt small { color: #6b7a90; font-size: 12px; }
.lk-note, .lk-small { font-size: 12px; color: #6b7a90; }
.lk-qr { width: 196px; max-width: 70%; margin: 6px auto; background: #fff; border: 3px solid #14161f; border-radius: 14px; padding: 6px; }
.lk-qr img { width: 100%; display: block; image-rendering: pixelated; }
.lk-code { font-family: 'Lilita One', system-ui, sans-serif; font-size: 34px; letter-spacing: .12em; color: #1b2a5c; margin: 2px 0; user-select: all; }
.lk-code.sm { font-size: 20px; letter-spacing: .08em; }
.lk-timer { display: inline-block; background: #ffe58a; border: 2px solid #b8860b; border-radius: 9px; padding: 1px 8px; font-weight: 700; color: #6b5200; }
.lk-in { width: 100%; font: 30px 'Lilita One', system-ui, sans-serif; letter-spacing: .2em; text-align: center; padding: 10px; border: 3px solid #14161f; border-radius: 14px; color: #1b2a5c; }
.lk-who { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 8px; } .lk-who b { font-family: 'Lilita One', system-ui; font-weight: 400; font-size: 18px; }
.lk-av { width: 64px; height: 64px; border-radius: 14px; border: 3px solid #14161f; background: #ffe7a8; image-rendering: pixelated; }
.lk-dev { display: flex; gap: 8px; align-items: center; text-align: left; background: #fff; border: 2px solid #d6dce8; border-radius: 12px; padding: 7px 9px; margin: 6px 0; color: #1c2033; }
.lk-dev > span:first-child { font-size: 22px; } .lk-dev b { display: block; font-size: 14px; } .lk-dev small { color: #6b7a90; font-size: 12px; } .lk-dev .btn, .lk-dev .ok { margin-left: auto; } .lk-dev .ok { color: #2b8a1f; font-weight: 700; }
.lk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; } .lk-grid .btn { font-size: 13px; }
.lk-quick { display: flex; gap: 6px; margin-top: 8px; } .lk-quick .btn { flex: 1; }
.lk-isles { display: flex; gap: 8px; margin: 8px 0; }
.lk-isle { flex: 1; text-align: left; background: #fff; border: 3px solid #14161f; border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 2px; font: 12px system-ui; color: #1c2033; cursor: pointer; }
.lk-isle b { font-family: 'Lilita One', system-ui; font-weight: 400; font-size: 14px; color: #1b2a5c; } .lk-isle small { color: #2b8a1f; font-weight: 700; }
.lk-isle.pick { background: #fff6d6; border-color: #b8860b; box-shadow: 0 0 0 3px #ffe58a; }
/* the scanner */
.lk-cam { position: fixed; inset: 0; z-index: 9500; background: #14161f; color: #fff; display: flex; flex-direction: column; }
.lk-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lk-cam-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #1b2a5c; border-bottom: 3px solid #14161f; }
.lk-cam-top b { font: 22px 'Lilita One', system-ui; color: #ffd23a; -webkit-text-stroke: 2.5px #14161f; paint-order: stroke fill; }
.lk-x { width: 36px; height: 36px; border-radius: 10px; border: 2px solid #14161f; background: #e84a4a; color: #fff; font-weight: 900; }
.lk-ret { position: absolute; left: 50%; top: 45%; width: min(64vw, 280px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 4px solid #ffd23a; border-radius: 20px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); z-index: 1; }
.lk-hint { position: absolute; left: 14px; right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 2; background: #1b2a5c; border: 3px solid #14161f; border-radius: 14px; padding: 8px 12px; text-align: center; font-size: 13px; }
.lk-hint b { display: block; font: 16px 'Lilita One', system-ui; color: #ffd23a; }
.lk-cam-foot { position: absolute; left: 14px; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 2; display: flex; gap: 8px; } .lk-cam-foot .btn { flex: 1; }
/* v0.24.1: the code box under the camera; a warning when a guest island is replaced */
.lk-cam-foot .lk-in { flex: 2; min-width: 0; margin: 0; font-size: 16px; }
.lk-warn { background: #fff1d6; border: 2px solid #c8860b; border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.35; color: #5a3a00; }
/* roby-island (8 Nov, Roby): EMAIL stands out; drawn icons (phone + QR, QR viewfinder, OTP boxes) */
.lk-opt .ic svg { width: 34px; height: 34px; display: block; }
.lk-opt .ic { background: #eef4ff; }
.lk-opt.lk-main { background: #1f73c4; border-color: #14161f; box-shadow: inset 0 -5px 0 #12508f; padding: 12px; color: #fff; }
.lk-opt.lk-main b { font-size: 19px; color: #fff; -webkit-text-stroke: 3px #14161f; paint-order: stroke fill; }
.lk-opt.lk-main small { color: #d9ecff; font-size: 12.5px; }
.lk-opt.lk-main .ic { width: 50px; height: 50px; background: #fff; }
.lk-opt.lk-main .ic svg { width: 42px; height: 42px; }
.lk-go { margin-left: auto; font: 400 30px 'Lilita One', system-ui; color: #fff; -webkit-text-stroke: 3px #14161f; paint-order: stroke fill; }
.lk-or { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font: 700 11px system-ui; color: #6b7a90; text-transform: uppercase; letter-spacing: .05em; }
.lk-or::before, .lk-or::after { content: ''; flex: 1; height: 2px; background: #d6dce8; }