/* BlackLeaf DOJ — Windows-11-artiger Sperr-/Login-Bildschirm */
:root{
  --lk-accent:#4cc2ff;
  --lk-accent-strong:#0a84ff;
  --lk-font:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,"Inter",sans-serif;
}
body.bl-lock{
  margin:0;min-height:100vh;overflow:hidden;color:#f3f3f3;font-family:var(--lk-font);
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
}
.bl-lock-bg{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1200px 900px at 18% 12%,#1c4e8a 0,transparent 55%),
    radial-gradient(1100px 800px at 82% 20%,#2a7d78 0,transparent 50%),
    radial-gradient(1000px 1000px at 60% 90%,#3a2a6b 0,transparent 55%),
    radial-gradient(900px 700px at 8% 88%,#14304f 0,transparent 55%),
    linear-gradient(160deg,#0b1b30,#0a1622 60%,#0e1320);
  background-color:#0b1622;
}
.bl-lock-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 500px at 50% 40%,rgba(120,180,255,.10),transparent 70%);mix-blend-mode:screen}

.bl-lock-top{position:fixed;top:9vh;left:0;right:0;text-align:center;pointer-events:none}
.bl-lock-time{font-size:78px;font-weight:600;letter-spacing:1px;text-shadow:0 2px 20px rgba(0,0,0,.4);line-height:1}
.bl-lock-date{font-size:20px;font-weight:500;color:#e6ecf5;margin-top:6px;text-shadow:0 1px 10px rgba(0,0,0,.4)}

.bl-lock-card{
  width:340px;max-width:90vw;padding:34px 30px 30px;border-radius:16px;text-align:center;
  background:rgba(24,24,24,.55);border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(40px) saturate(150%);-webkit-backdrop-filter:blur(40px) saturate(150%);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  animation:bl-lock-in .35s ease;
}
@keyframes bl-lock-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.bl-lock-ava{
  width:104px;height:104px;border-radius:50%;margin-bottom:12px;
  background:linear-gradient(135deg,var(--lk-accent),var(--lk-accent-strong));
  display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#04233d;
  box-shadow:0 8px 26px rgba(10,132,255,.35);overflow:hidden;
}
.bl-lock-ava img{width:78%;height:78%;object-fit:contain}
.bl-lock-name{font-size:23px;font-weight:600;margin:0}
.bl-lock-sub{font-size:12.5px;color:#c0c8d4;margin:0 0 18px}

.bl-lock-btn{
  width:100%;height:42px;border-radius:8px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);color:#f3f3f3;font-size:13.5px;font-family:var(--lk-font);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:.12s;margin-top:8px;
}
.bl-lock-btn:hover{background:rgba(255,255,255,.14)}
.bl-lock-btn.primary{background:#5865F2;border-color:#5865F2;color:#fff;font-weight:600}
.bl-lock-btn.primary:hover{background:#4752c4}
.bl-lock-btn.ghost{background:transparent}
.bl-lock-btn.ghost:hover{background:rgba(255,255,255,.08)}
.bl-lock-btn:disabled{opacity:.5;cursor:not-allowed}
.bl-lock-dev{width:100%;margin:0}

.bl-lock-msg{width:100%;margin-top:14px;padding:10px 12px;border-radius:8px;font-size:12.5px;line-height:1.35;
  background:rgba(255,120,110,.16);color:#ffc9c3;border:1px solid rgba(255,120,110,.25)}
.bl-lock-msg.info,.bl-lock-msg.success{background:rgba(110,220,140,.16);color:#b7f0c6;border-color:rgba(110,220,140,.25)}

.bl-lock-spin{margin-top:16px;font-size:12.5px;color:#c0c8d4;display:flex;align-items:center;justify-content:center;gap:9px}
.bl-lock-spin[hidden]{display:none}
.bl-lock-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--lk-accent);animation:bl-lock-spin 1s linear infinite}
@keyframes bl-lock-spin{to{transform:rotate(360deg)}}

.bl-lock-foot{position:fixed;bottom:20px;left:0;right:0;text-align:center;font-size:12px;color:rgba(230,236,245,.7)}

@media (max-width:600px){ .bl-lock-time{font-size:56px} .bl-lock-top{top:6vh} }

/* Login-Option: klassische Ansicht wählen */
.bl-lock-check{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;color:rgba(230,236,245,.82);cursor:pointer;line-height:1.3;text-align:left}
.bl-lock-check input{accent-color:var(--lk-accent);width:15px;height:15px;flex:0 0 auto}
.bl-lock-check span{flex:1}

/* "Anmelden"-Button auf dem Sperrbildschirm */
.bl-lock-btn.go{background:var(--lk-accent-strong);border-color:var(--lk-accent-strong);color:#fff;font-weight:600}
.bl-lock-btn.go:hover{background:#0a74e0;border-color:#0a74e0}