/* lock/style.css — minimal opaque lock UI */
:root{
  --overlay-bg: rgba(6,10,18,1);
  --panel-bg: #071018;
  --muted: #9fb0b6;
  /* Accent color switched to blue for buttons and accents */
  --accent: #2563eb; /* blue-600 */
}

.overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-bg);
  z-index: 9999;
}

.overlay .panel{
  display: flex;
  /* tighter, more compact banner */
  width: min(620px, calc(100% - 48px));
  max-width: 720px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: none;
  background: linear-gradient(180deg, rgba(9,12,16,0.98), rgba(5,7,10,0.98));
  border: 1px solid rgba(255,255,255,0.03);
  transform: translateY(6px);
  opacity: 0;
  animation: panel-in .36s cubic-bezier(.2,.9,.3,1) forwards;
}

@keyframes panel-in{
  to{ transform: translateY(0); opacity: 1 }
}

.overlay .panel .left{
  flex: 0 0 240px;
  display:flex;align-items:center;justify-content:center;padding:20px 22px;background:linear-gradient(180deg, rgba(37,99,235,0.06), transparent 40%);
}

.overlay .panel .left .logo{ width:220px; height:auto; filter: none; }

.overlay .panel .right{ flex:1;padding:20px 20px 22px 18px;color:#dfeff0 }
.overlay h1{ margin:0 0 8px 0;font-size:22px; letter-spacing:0.2px }
.overlay .muted{ color:var(--muted);margin:0 0 12px 0 }

/* small info tag shown beneath the description for session info */
.info-tag{
  display:block; /* ensure it occupies its own line */
  width:100%;
  margin:8px 0 28px 0; /* increased bottom margin for clear separation */
  color: #e6f0ff; /* light blue text */
  background: rgba(37,99,235,0.06); /* subtle blue tint */
  border: 1px solid rgba(37,99,235,0.10);
  padding:8px 12px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  box-shadow: none;
}

.inputRow{ display:flex; gap:12px; align-items:center; width:100% }
.inputRow input[type="password"]{ flex:3 1 0%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background: rgba(255,255,255,0.02); color:#eaf6f6; min-width:0 }
.actions{ flex:1 0 0; display:flex; align-items:center; justify-content:flex-end }
.inputRow input::placeholder{ color: rgba(230,246,246,0.45); opacity: 1; }
.inputRow input:-ms-input-placeholder{ color: rgba(230,246,246,0.45); }
.inputRow input::-ms-input-placeholder{ color: rgba(230,246,246,0.45); }
.inputRow input:focus{ outline: none; box-shadow: none; border-color: rgba(37,99,235,0.6); }

.actions{ display:flex; align-items:center; margin-left:8px }
.actions .btn{ padding:10px 14px; border-radius:10px; border:none; cursor:pointer; background:var(--accent); color:white; font-weight:700; box-shadow: none }
.actions .btn:active{ transform: translateY(1px) }
.btn.primary{ background:var(--accent); color:#fff }

.status{ margin-top:12px; min-height:18px; color: #ff6b6b; font-size:13px }
.sr-only{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

@media (max-width:800px){ .overlay .panel{ flex-direction:column; width:calc(100% - 24px) } .overlay .panel .left{ padding:18px } .overlay .panel .left .logo{ width:120px } }

@media (max-width:560px){
  .inputRow input[type="password"]{ flex-basis:100% }
  .actions{ width:100%; justify-content:flex-end; margin-left:0; margin-top:8px }
  .actions .btn{ width:128px }
}