:root {
  color-scheme: light only;
  --bg: #fdf6f3; --bg-soft: #fbeae4; --rose: #e8a5a0; --rose-deep: #c97870;
  --peach: #f5c9b8; --lavender: #c9b8d4; --cream: #fff9f5;
  --ink: #4a3540; --ink-soft: #7a6470; --gold: #d4a574;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: 'Nunito', sans-serif; min-height: 100vh; overflow-x: hidden; }
body {
  background-image:
    radial-gradient(at 20% 20%, rgba(232,165,160,0.25) 0%, transparent 45%),
    radial-gradient(at 80% 80%, rgba(201,184,212,0.2) 0%, transparent 50%),
    radial-gradient(at 50% 50%, rgba(245,201,184,0.15) 0%, transparent 60%);
  display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.floating-note { position: fixed; color: var(--rose); opacity: 0.3; font-size: 2rem; pointer-events: none; animation: drift 12s ease-in-out infinite; }
.fn1 { top: 10%; left: 8%; animation-delay: 0s; }
.fn2 { top: 75%; left: 12%; animation-delay: 3s; font-size: 1.5rem; }
.fn3 { top: 20%; right: 10%; animation-delay: 6s; font-size: 1.8rem; }
.fn4 { top: 65%; right: 8%; animation-delay: 9s; font-size: 2.2rem; }
.fn5 { top: 45%; left: 5%; animation-delay: 2s; font-size: 1.3rem; }
@keyframes drift { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-20px) rotate(8deg); } }
.login-container { width: 100%; max-width: 460px; position: relative; z-index: 10; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
.title-area { text-align: center; margin-bottom: 2rem; }
.logo-text { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 2.2rem; color: var(--ink); margin-bottom: 0.4rem; }
.logo-text .accent { font-style: italic; color: var(--rose-deep); }
.logo-sub { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--rose-deep); font-size: 1.05rem; }
.lock-stage { position: relative; height: 320px; margin-bottom: 2rem; display: flex; align-items: center; justify-content: center; }
.sheet { position: absolute; width: 320px; height: 220px; background: var(--cream); border-radius: 14px; box-shadow: 0 25px 50px -15px rgba(201,120,112,0.25), inset 0 0 0 1px rgba(232,165,160,0.3); overflow: hidden; }
.sheet::before, .sheet::after { content: ''; position: absolute; width: 6px; height: 6px; background: var(--rose-deep); border-radius: 50%; opacity: 0.4; }
.sheet::before { top: 12px; left: 12px; }
.sheet::after { top: 12px; right: 12px; }
.staff { position: absolute; top: 50%; left: 30px; right: 30px; transform: translateY(-50%); height: 60px; }
.staff-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--ink-soft); opacity: 0.35; }
.staff-line:nth-child(1) { top: 0; }
.staff-line:nth-child(2) { top: 15px; }
.staff-line:nth-child(3) { top: 30px; }
.staff-line:nth-child(4) { top: 45px; }
.staff-line:nth-child(5) { top: 60px; }
.staff-note { position: absolute; color: var(--ink-soft); opacity: 0.5; font-size: 1.6rem; }
.staff-note:nth-child(6) { top: 8px; left: 25%; }
.staff-note:nth-child(7) { top: 22px; left: 50%; }
.staff-note:nth-child(8) { top: 5px; left: 75%; font-size: 1.3rem; }
.clef-wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transform-origin: center center; z-index: 5; }
.clef-wrapper.shake { animation: clefShake 0.5s ease-in-out; }
.clef-wrapper.unlock { animation: clefUnlock 1.6s cubic-bezier(0.5,0,0.3,1) forwards; }
@keyframes clefShake {
  0%,100% { transform: translate(-50%,-50%) rotate(0deg); }
  20% { transform: translate(-50%,-50%) rotate(-12deg); }
  40% { transform: translate(-50%,-50%) rotate(10deg); }
  60% { transform: translate(-50%,-50%) rotate(-8deg); }
  80% { transform: translate(-50%,-50%) rotate(6deg); }
}
@keyframes clefUnlock {
  0% { transform: translate(-50%,-50%) rotate(0deg) scale(1); opacity: 1; }
  30% { transform: translate(-50%,-50%) rotate(-20deg) scale(1.08); opacity: 1; }
  60% { transform: translate(-50%,-50%) rotate(380deg) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%,-250%) rotate(720deg) scale(0.4); opacity: 0; }
}
.clef-wrapper svg { filter: drop-shadow(0 8px 20px rgba(201,120,112,0.4)); }
.burst-note { position: absolute; left: 50%; top: 50%; font-size: 1.8rem; color: var(--rose-deep); opacity: 0; pointer-events: none; z-index: 6; }
.lock-stage.opened .burst-note { animation: burst 1.4s ease-out forwards; }
.burst-note:nth-child(1) { --x: -120px; --y: -80px; animation-delay: 0.5s; }
.burst-note:nth-child(2) { --x: 100px; --y: -100px; animation-delay: 0.6s; }
.burst-note:nth-child(3) { --x: -80px; --y: 90px; animation-delay: 0.7s; }
.burst-note:nth-child(4) { --x: 130px; --y: 70px; animation-delay: 0.8s; }
.burst-note:nth-child(5) { --x: 0px; --y: -130px; animation-delay: 0.55s; font-size: 1.4rem; }
.burst-note:nth-child(6) { --x: -150px; --y: 20px; animation-delay: 0.65s; font-size: 1.4rem; }
@keyframes burst {
  0% { transform: translate(-50%,-50%) scale(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.2) rotate(20deg); opacity: 0; }
}
.success-heart { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0); color: var(--rose-deep); opacity: 0; z-index: 7; }
.lock-stage.opened .success-heart { animation: heartReveal 1s 1.2s ease-out forwards; }
@keyframes heartReveal {
  0% { transform: translate(-50%,-50%) scale(0) rotate(-180deg); opacity: 0; }
  60% { transform: translate(-50%,-50%) scale(1.3) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1) rotate(0deg); opacity: 1; }
}
.keyhole-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--ink-soft); font-size: 0.85rem; opacity: 0.7; transition: opacity 0.3s; white-space: nowrap; }
.lock-stage.opened .keyhole-hint { opacity: 0; }
.login-card { background: var(--cream); border: 1px solid rgba(232,165,160,0.3); border-radius: 24px; padding: 2rem; box-shadow: 0 20px 40px -15px rgba(201,120,112,0.18); }
.input-label { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 0.65rem; font-weight: 600; text-align: center; }
.input-wrapper { position: relative; margin-bottom: 1.25rem; }
input[type="password"] { width: 100%; padding: 1rem 1.25rem; background: var(--bg); border: 1.5px solid rgba(232,165,160,0.4); border-radius: 14px; font-family: 'Nunito', sans-serif; font-size: 1.05rem; color: var(--ink); transition: all 0.3s; letter-spacing: 0.2em; text-align: center; }
input[type="password"]:focus { outline: none; border-color: var(--rose-deep); background: var(--cream); box-shadow: 0 0 0 4px rgba(201,120,112,0.12); }
.submit-btn { width: 100%; padding: 1rem; background: var(--rose-deep); color: var(--cream); border: none; border-radius: 14px; font-family: 'Nunito', sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.submit-btn:hover { background: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 25px -8px rgba(74,53,64,0.4); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.status-msg { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 10px; font-size: 0.88rem; text-align: center; min-height: 1px; display: none; }
.status-msg.error { background: rgba(201,120,112,0.1); border-left: 3px solid var(--rose-deep); color: var(--rose-deep); display: block; }
.status-msg.success { background: rgba(122,132,102,0.12); border-left: 3px solid #7a8466; color: #4a5538; display: block; }
.login-footer { text-align: center; margin-top: 2rem; font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--ink-soft); font-size: 0.95rem; }
.login-footer .heart { color: var(--rose-deep); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 500px) {
  .lock-stage { height: 280px; }
  .sheet { width: 280px; height: 190px; }
  .login-card { padding: 1.75rem 1.25rem; }
  .logo-text { font-size: 1.8rem; }
}