.passkey-button { display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;padding:12px 16px;border:1px solid #818cf877;border-radius:16px;background:linear-gradient(115deg,#4338ca,#7e22ce);color:#fff;font:600 14px/1.6 "Noto Sans Lao",sans-serif;cursor:pointer;touch-action:manipulation; }
.passkey-button:disabled,.passkey-remove:disabled { opacity:.55;cursor:not-allowed; }
.passkey-button:focus-visible,.passkey-remove:focus-visible { outline:3px solid #22d3ee;outline-offset:3px; }
.passkey-login { margin:0 0 14px; }
.passkey-login .passkey-button { background:linear-gradient(115deg,#172554,#163848);color:#a5f3fc;border-color:#22d3ee55; }
.passkey-help { font-size:12px;line-height:1.8;color:#64748b;margin:8px 0; }
.passkey-login .passkey-help { color:#94a3b8;text-align:center; }
.passkey-status { font-size:13px;line-height:1.8;overflow-wrap:anywhere; }
.passkey-status:empty { display:none; }
.passkey-status[data-error="true"] { color:#b91c1c; }
.passkey-login .passkey-status[data-error="true"] { color:#fda4af; }
.passkey-settings { padding:22px;border:1px solid #e2e8f0;border-radius:22px;background:#fff;color:#1e293b;max-width:720px;margin:0 auto 18px;line-height:1.8; }
.passkey-settings label { display:block;margin:16px 0 8px; }
.passkey-settings input[type="password"] { display:block;width:100%;box-sizing:border-box;font-size:16px;min-height:48px;padding:10px 12px;border:1px solid #94a3b8;border-radius:12px;margin-bottom:12px; }
.passkey-settings h2 { font-size:18px;margin-top:24px; }
.passkey-list { padding:0;list-style:none; }
.passkey-list li { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #e2e8f0; }
.passkey-list small { display:block;color:#64748b;font-size:12px; }
.passkey-remove { border:1px solid #fecaca;background:#fff1f2;color:#991b1b;min-height:44px;padding:8px 16px;border-radius:12px;cursor:pointer; }
.passkey-back { display:block;margin:16px 0; }

.passkey-login[hidden] { display:none !important; }
.passkey-settings .passkey-visibility { display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc;box-sizing:border-box; }
.passkey-visibility span { flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.8; }
body #app .passkey-settings .passkey-visibility input[type="checkbox"] { width:20px !important;min-width:20px !important;max-width:20px !important;height:20px;min-height:20px;margin:3px 0 0;padding:0;flex:0 0 20px;accent-color:#7e22ce; }

.passkey-list li { flex-wrap:wrap; }
.passkey-delete-form { flex-basis:100%;min-width:0;padding:12px;background:#fff7f7;border-radius:12px;box-sizing:border-box; }
.passkey-delete-form[hidden] { display:none !important; }
.passkey-delete-form label { margin-top:0; }

.passkey-menu-control { min-width:0; }
.passkey-menu-control .student-menu-item > span { min-width:0;flex:1; }
.passkey-menu-control .student-menu-item > span a { font-size:12px;display:inline-block;margin-top:4px; }
.passkey-switch { display:flex;align-items:center;gap:5px;flex-shrink:0;min-height:44px;padding:6px;border:0;background:transparent;color:#64748b;font-size:12px;cursor:pointer; }
.passkey-switch i { display:block;position:relative;width:42px;height:24px;border-radius:20px;background:#94a3b8; }
.passkey-switch i::after { content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s; }
.passkey-switch[aria-checked="true"] i { background:linear-gradient(110deg,#6246dc,#be247e); }
.passkey-switch[aria-checked="true"] i::after { transform:translateX(18px); }
.passkey-switch:focus-visible { outline:2px solid #6366f1;border-radius:12px; }
.passkey-switch:disabled { opacity:.5;cursor:not-allowed; }
.passkey-quick-setup[hidden] { display:none !important; }
.passkey-quick-setup { margin-top:8px; }
.passkey-quick-setup .passkey-remove { margin-top:10px; }
@media(prefers-reduced-motion:reduce){.passkey-switch i::after{transition:none;}}

.passkey-menu-control .student-menu-item { gap:12px; }
.passkey-menu-control .student-menu-item > .biometric-symbol { flex:0 0 42px;display:grid;place-items:center;width:42px;height:48px;border-radius:14px;background:linear-gradient(145deg,#ede9fe,#dbeafe);color:#6941c6; }
.passkey-menu-control .student-menu-item > span:not(.biometric-symbol) { overflow-wrap:anywhere; }
.passkey-menu-control .student-menu-item strong { font-size:14px;line-height:1.6; }
.passkey-switch { flex-direction:column-reverse;gap:2px;min-width:50px;padding:5px 0; }
.passkey-switch i { width:48px;height:28px;background:#cbd5e1; }
.passkey-switch i::after { width:22px;height:22px;box-shadow:0 1px 3px #0002; }
.passkey-switch[aria-checked="true"] i::after { transform:translateX(20px); }
.passkey-switch[aria-checked="true"] { color:#6d28d9; }

body.passkey-modal-open { overflow:hidden; }
dialog.passkey-quick-setup { position:fixed;inset:0;margin:auto;width:calc(100% - 32px);max-width:420px;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;padding:24px;box-sizing:border-box;border:1px solid #ddd6fe;border-radius:24px;box-shadow:0 24px 80px #02061755;font-family:"Noto Sans Lao",sans-serif; }
dialog.passkey-quick-setup:not([open]) { display:none; }
dialog.passkey-quick-setup::backdrop { background:rgba(15,23,42,.6);backdrop-filter:blur(4px); }
dialog.passkey-quick-setup h2 { margin:0 36px 14px 0;font-size:20px;line-height:1.6;color:#312e81; }
.passkey-modal-close { position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:#f1f5f9;color:#475569;font-size:26px;cursor:pointer; }
.passkey-modal-close:focus-visible { outline:2px solid #6366f1; }

.passkey-enable-label { display:inline-block;border:0;background:transparent;color:#4338ca;font:600 13px/1.8 "Noto Sans Lao",sans-serif;min-height:44px;padding:6px 0;text-align:left;cursor:pointer;touch-action:manipulation; }
.passkey-enable-label:disabled { color:#64748b;cursor:default; }
.passkey-enable-label:focus-visible { outline:2px solid #6366f1;outline-offset:3px;border-radius:4px; }
.passkey-management-link { display:inline-block;font-size:12px;margin:6px 12px;min-height:32px;line-height:32px; }
.student-menu-page .passkey-menu-control .biometric-symbol { background:#eaf6ff;color:#0878b9; }
.student-menu-page .passkey-switch[aria-checked="true"] i { background:linear-gradient(110deg,#086ba8,#159cda); }
.student-menu-page .passkey-switch[aria-checked="true"] { color:#086ba8; }
.student-menu-page .passkey-menu-control .passkey-status:empty { display:none; }