#lock{
  z-index: 50;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--sb-h) + 18px) 24px calc(var(--nav-h) + 16px);
  transition: transform var(--t-page) var(--e-out), opacity var(--t-slow) var(--e-soft), filter var(--t-slow) var(--e-soft);
  will-change: transform, opacity;
}
#device[data-state="lock"] #lock{ transform:none; opacity:1; pointer-events:auto; }
#device:not([data-state="lock"]) #lock{
  transform: translateY(-100%); opacity: 0; pointer-events:none; filter: blur(6px);
}

#lock-body{ display:grid; align-content:start; gap: 18px; }
#lock-clock{ text-align:center; padding-top: 26px; }
#lock-time{
  font-size: 78px; line-height: .96; font-weight: 250; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 26px rgba(0,0,0,.36);
}
#lock-time .d{ display:inline-block; }
#lock-date{ margin-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--fg-2); letter-spacing:.03em; }

#lock-notes{ display:grid; gap:8px; margin-top: 6px; }
.lock-note{
  border-radius: 18px; padding: 11px 14px;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  display:grid; grid-template-columns: 30px 1fr auto; gap:10px; align-items:center;
  animation: noteIn var(--t-slow) var(--e-out) both;
}
@keyframes noteIn{ from{ opacity:0; transform: translateY(14px) scale(.97); } }
.lock-note .ico{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background: var(--accent); color: var(--accent-fg); }
.lock-note .ico svg{ width:16px; height:16px; }
.lock-note .tt{ font-size:12.5px; font-weight:650; }
.lock-note .ds{ font-size:11.5px; color: var(--fg-3); margin-top:2px; }
.lock-note .tm{ font-size:10.5px; color: var(--fg-3); }

#lock-foot{ display:grid; grid-template-columns: 46px 1fr 46px; align-items:center; gap:10px; }
.lock-act{
  width:46px; height:46px; border-radius:50%;
  background: var(--glass); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--line);
  display:grid; place-items:center; color: var(--fg-2);
  transition: transform var(--t-fast) var(--e-spring), background var(--t-base);
}
.lock-act svg{ width:20px; height:20px; }
.lock-act:active{ transform: scale(.9); background: var(--glass-2); }
#lock-hint{
  text-align:center; font-size:12px; font-weight:600; color: var(--fg-3);
  animation: hintPulse 2.6s var(--e-soft) infinite;
}
@keyframes hintPulse{
  0%,100%{ opacity:.42; transform: translateY(0); }
  50%{ opacity:.9; transform: translateY(-4px); }
}

/* 密码面板 */
#passcode{
  position:absolute; inset:0; z-index: 4;
  background: rgba(8,8,9,.66);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  display:grid; align-content:center; justify-items:center; gap: 22px;
  padding: 0 34px calc(var(--nav-h) + 10px);
  animation: pcIn var(--t-slow) var(--e-out) both;
}
#passcode[hidden]{ display:none; }
@keyframes pcIn{ from{ opacity:0; backdrop-filter: blur(0); } }
#pc-title{ font-size:15px; font-weight:600; color: var(--fg-2); }
#pc-title.err{ color: var(--danger); }
#pc-dots{ display:flex; gap:16px; }
#pc-dots i{
  width:11px; height:11px; border-radius:50%;
  box-shadow: inset 0 0 0 1.4px var(--fg-3);
  transition: background var(--t-fast), transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast);
}
#pc-dots i.f{ background: var(--fg); box-shadow: inset 0 0 0 1.4px var(--fg); transform: scale(1.18); }
#passcode.shake #pc-dots{ animation: shake 460ms var(--e-soft); }
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  15%{ transform: translateX(-11px); } 30%{ transform: translateX(9px); }
  45%{ transform: translateX(-7px); } 60%{ transform: translateX(5px); }
  80%{ transform: translateX(-2px); }
}
#pc-pad{ display:grid; grid-template-columns: repeat(3, 74px); gap: 16px; justify-content:center; }
.pc-key{
  width:74px; height:74px; border-radius:50%;
  background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--line);
  font-size:26px; font-weight:350; letter-spacing:.01em;
  display:grid; place-items:center;
  transition: transform 90ms var(--e-out), background 90ms linear;
  position:relative; overflow:hidden;
}
.pc-key.wide{ grid-column: 2; }
.pc-key.fn{ font-size:13.5px; font-weight:600; background:none; box-shadow:none; color: var(--fg-2); }
.pc-key:active{ background: rgba(255,255,255,.24); transform: scale(.95); }