#lock-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream, #FAF3E0);
  transition: opacity 0.5s ease;
}

[data-theme="dark"] #lock-screen {
  background: var(--color-bg-dark, #1A1008);
}

#lock-screen.lock-fade-out {
  opacity: 0;
  pointer-events: none;
}

.lock-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 2rem;
  width: min(360px, 90vw);
  text-align: center;
}

.lock-ornament {
  font-size: 1.25rem;
  color: var(--color-terracotta, #C84B31);
  letter-spacing: 0.3em;
  margin-bottom: 0.25rem;
}

.lock-title {
  font-family: 'Fraunces', 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 9vw, 3.2rem);
  font-weight: 400;
  color: var(--color-text, #2C1A0E);
  line-height: 1.1;
  margin: 0;
}

.lock-title em {
  font-style: italic;
  color: var(--color-terracotta, #C84B31);
}

[data-theme="dark"] .lock-title {
  color: var(--color-cream, #FAF3E0);
}

.lock-sub {
  font-family: 'Geist Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted, #8B7355);
  margin: 0 0 1.5rem;
}

#lock-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

#lock-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-border, #D4C5A9);
  border-radius: 6px;
  background: transparent;
  font-family: 'Geist', sans-serif;
  font-size: 1.1rem;
  color: var(--color-text, #2C1A0E);
  text-align: center;
  letter-spacing: 0.15em;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

[data-theme="dark"] #lock-input {
  border-color: #4a3728;
  color: var(--color-cream, #FAF3E0);
}

#lock-input:focus {
  border-color: var(--color-terracotta, #C84B31);
}

#lock-input::placeholder {
  letter-spacing: 0.1em;
  color: var(--color-text-muted, #8B7355);
  opacity: 0.7;
}

#lock-form button {
  width: 100%;
  padding: 0.85rem;
  background: var(--color-terracotta, #C84B31);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: 'Geist', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s;
}

#lock-form button:hover {
  opacity: 0.88;
}

#lock-error {
  font-family: 'Geist', sans-serif;
  font-size: 0.78rem;
  color: var(--color-terracotta, #C84B31);
  min-height: 1.2em;
  margin: 0;
}

@keyframes lock-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

.lock-shake {
  animation: lock-shake 0.35s ease;
}