/* ═══ BOOT ═══ */
#boot{position:fixed;inset:0;z-index:9999;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  transition:opacity .8s ease;
  /* extend mode: nền phủ cả 2 màn, cube canh giữa MÀN CHÍNH (same pattern #ls-boot lockscreen.html) */
  padding-right:calc(100vw - var(--primary-w,100vw))}
#boot.out{opacity:0;pointer-events:none}
.boot-label{color:rgba(255,255,255,.65);font-size:16px;letter-spacing:4px;font-weight:400;font-family:'Audiowide',sans-serif}
.b3-p{width:150px;height:150px;display:flex;align-items:center;justify-content:center;perspective:820px;animation:bfade 1s ease}
.b3-t{transform-style:preserve-3d;transform:rotateX(12deg)}
.b3-s{width:0;height:0;transform-style:preserve-3d;animation:bspin 18s linear infinite}
.b3c{position:absolute;transform-style:preserve-3d}
.b3f{position:absolute;display:block;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:5px;
  border:1px solid rgba(255,255,255,.28);background:linear-gradient(160deg,#64d2ff,#0071e3);backface-visibility:hidden}
.b3f.f{transform:translateZ(17px)}.b3f.b{transform:rotateY(180deg) translateZ(17px);filter:brightness(.7)}
.b3f.r{transform:rotateY(90deg) translateZ(17px);filter:brightness(.92)}
.b3f.l{transform:rotateY(-90deg) translateZ(17px);filter:brightness(.82)}
.b3f.t{transform:rotateX(90deg) translateZ(17px);filter:brightness(1.15)}
.b3f.d{transform:rotateX(-90deg) translateZ(17px);filter:brightness(.68)}
@keyframes bspin{from{transform:rotateY(-35deg)}to{transform:rotateY(325deg)}}
@keyframes bfade{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}

/* ═══ LOCK ═══ */
#lock{position:fixed;inset:0;z-index:8000;display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:default}
#lock.on{display:flex}
#lock::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.50))}
.lk-time{position:relative;color:#fff;font-size:108px;font-weight:600;letter-spacing:-3px;text-shadow:0 4px 30px rgba(0,0,0,.45)}
.lk-date{position:relative;color:rgba(255,255,255,.85);font-size:21px;margin-bottom:48px}

/* user selection list */
.lk-users{position:relative;display:none;gap:24px;justify-content:center;flex-wrap:wrap;max-width:500px}
.lk-ucard{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;padding:16px 20px;border-radius:12px;transition:background .15s}
.lk-ucard:hover{background:rgba(255,255,255,.12)}
.lk-uav{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-btn));
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.4),inset 0 1px 3px rgba(255,255,255,.25)}
.lk-uav-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.lk-uav-letter{color:#fff;font-size:34px;font-weight:600}
.lk-uname{color:#fff;font-size:14px;font-weight:500}

/* login form */
.lk-login{position:relative;display:none;flex-direction:column;align-items:center;gap:12px}
.lk-av{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-btn));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:40px;font-weight:600;overflow:hidden;
  box-shadow:0 12px 36px rgba(0,0,0,.45),inset 0 1px 4px rgba(255,255,255,.30)}
.lk-av-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.lk-name{color:#fff;font-size:19px;font-weight:500}
.lk-pw-wrap{display:flex;gap:0;margin-top:4px}
.lk-pw{width:220px;height:40px;border:1px solid rgba(255,255,255,.3);border-right:none;border-radius:20px 0 0 20px;
  background:rgba(255,255,255,.1);color:#fff;padding:0 16px;font-size:14px;outline:none;backdrop-filter:blur(8px)}
.lk-pw:focus{border-color:var(--accent);background:rgba(255,255,255,.15)}
.lk-pw::placeholder{color:rgba(255,255,255,.4)}
.lk-pw-btn{width:40px;height:40px;border:1px solid rgba(255,255,255,.3);border-left:none;border-radius:0 20px 20px 0;
  background:rgba(255,255,255,.14);color:#fff;font-size:16px;cursor:pointer;backdrop-filter:blur(8px);transition:background .14s}
.lk-pw-btn:hover{background:rgba(255,255,255,.28)}
.lk-err{color:#ff6b6b;font-size:12px;min-height:18px}
.lk-back{background:none;border:none;color:rgba(255,255,255,.6);font-size:12px;cursor:pointer;padding:4px 8px;border-radius:4px}
.lk-back:hover{color:#fff;background:rgba(255,255,255,.1)}
@keyframes lkShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.lk-shake{animation:lkShake .35s ease}

/* Lock bottom bar */
.lk-bottom{position:absolute;bottom:24px;right:24px;display:flex;gap:8px;z-index:1}
.lk-sys-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);transition:background .15s}
.lk-sys-btn:hover{background:rgba(255,255,255,.22)}

/* Eye toggle */
.lk-eye{width:36px;height:40px;border:none;border-top:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);transition:color .15s;padding:0}
.lk-eye:hover{color:#fff}
.lk-eye.on{color:var(--accent)}

/* Power menu */
.lk-pwr-menu{position:absolute;bottom:72px;right:24px;background:rgba(30,30,32,.92);border:1px solid rgba(255,255,255,.15);
  border-radius:10px;padding:4px 0;z-index:10;backdrop-filter:blur(20px);display:none;min-width:160px;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.lk-pwr-menu.on{display:block}
.lk-pwr-opt{padding:8px 16px;color:rgba(255,255,255,.85);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .1s}
.lk-pwr-opt:hover{background:rgba(255,255,255,.1)}
.lk-pwr-opt.danger:hover{background:rgba(255,80,80,.15)}

/* Network info */
.lk-net-info{position:absolute;bottom:72px;right:72px;background:rgba(30,30,32,.92);border:1px solid rgba(255,255,255,.15);
  border-radius:10px;padding:12px 16px;z-index:10;backdrop-filter:blur(20px);display:none;min-width:200px;box-shadow:0 8px 32px rgba(0,0,0,.5);
  color:rgba(255,255,255,.85);font-size:12px;line-height:1.6}
.lk-net-info.on{display:block}
.lk-net-title{font-weight:600;font-size:13px;margin-bottom:6px;color:#fff;display:flex;align-items:center;gap:6px}
.lk-net-row{display:flex;justify-content:space-between;gap:12px}