/* ============================================================
   login-lamp.css — standalone styles for login.php ONLY.
   Not linked from any other page, so it never touches the
   shared dashboard theme in style.css. Uses the brand's rose
   (--navy-light in style.css, #FF5A98) as the glow accent.
   ============================================================ */

:root{
  --lg-room-1:#05070a;
  --lg-room-2:#0d1219;
  --lg-room-3:#141b24;
  --lg-lamp-warm:#ffcf87;
  --lg-lamp-warm-strong:#ffb454;
  --lg-neon:#ff4f96;              /* brand rose, used as the glow accent */
  --lg-neon-soft:rgba(255,79,150,.35);
  --lg-error:#ff5d78;
  --lg-ink:#f3edf0;
  --lg-ink-dim:#a598a1;
  --lg-font-display:'Poppins',sans-serif;
  --lg-font-body:'Inter',sans-serif;
  --lg-ease:cubic-bezier(.16,1,.3,1);
}

.lg-body{ margin:0; background:var(--lg-room-1); color:var(--lg-ink); font-family:var(--lg-font-body); overflow:hidden; height:100vh; }

.lg-stage{
  position:relative; width:100vw; height:100vh;
  display:grid; grid-template-columns:1.1fr 1fr;
  transition:opacity .9s var(--lg-ease), transform .9s var(--lg-ease), filter .9s var(--lg-ease);
}
.lg-stage.lg-fade-out{ opacity:0; transform:scale(1.04); filter:blur(10px); pointer-events:none; }
@media (max-width:820px){ .lg-stage{ grid-template-columns:1fr; grid-template-rows:auto 1fr; } }

/* ---------- room (left) ---------- */
.lg-room{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(255,180,84,.08), transparent 60%),
    linear-gradient(180deg, var(--lg-room-2), var(--lg-room-1) 70%);
}
.lg-room::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 45% 40% at 50% 22%, rgba(255,180,84,0), rgba(255,180,84,0) 60%);
  opacity:0; transition:opacity 1.1s ease, background 1.1s ease; pointer-events:none;
}
.lg-room.lg-on::before{ opacity:1; background:radial-gradient(ellipse 55% 48% at 50% 20%, rgba(255,180,84,.16), transparent 65%); }

.lg-desk{ position:absolute; bottom:0; left:0; right:0; height:22%; background:linear-gradient(180deg,#221c15,#120e0a); box-shadow:0 -1px 0 rgba(255,255,255,.04); }

.lg-scene{ position:relative; width:260px; height:320px; margin-bottom:10%; z-index:2; }
.lg-lamp{ position:absolute; inset:0; }

.lg-glow{
  position:absolute; top:40px; left:50%; width:340px; height:280px; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%, rgba(255,206,135,.5), rgba(255,206,135,0) 68%);
  opacity:0; transition:opacity 1s ease; pointer-events:none;
}
.lg-on .lg-glow{ opacity:1; }

.lg-shade{
  position:absolute; top:0; left:50%; transform:translateX(-50%); width:150px; height:74px;
  clip-path:polygon(18% 0,82% 0,100% 100%,0% 100%);
  background:linear-gradient(180deg,#e8c993,#a5804e);
  box-shadow:inset 0 -14px 24px rgba(0,0,0,.3);
  transition:filter .8s ease; z-index:3;
}
.lg-on .lg-shade{ filter:brightness(1.15); }

.lg-bulb{
  position:absolute; top:58px; left:50%; transform:translateX(-50%); width:16px; height:16px; border-radius:50%;
  background:#544e45; transition:background .7s ease, box-shadow .7s ease; z-index:1;
}
.lg-on .lg-bulb{ background:#fff1d2; box-shadow:0 0 18px 8px rgba(255,201,120,.9), 0 0 55px 28px rgba(255,180,84,.35); }

.lg-pole{ position:absolute; top:72px; left:50%; transform:translateX(-50%); width:7px; height:150px; background:linear-gradient(180deg,#3d382f,#1c1914); border-radius:4px; z-index:2; }
.lg-base{ position:absolute; top:216px; left:50%; transform:translateX(-50%); width:96px; height:16px; background:linear-gradient(180deg,#3d382f,#141210); border-radius:50%; box-shadow:0 8px 14px rgba(0,0,0,.5); z-index:2; }

.lg-cord{
  position:absolute; top:62px; left:58%; width:30px; height:112px;
  background:none; border:none; padding:0; cursor:grab;
  transform-origin:top center; animation:lgSway 4.2s ease-in-out infinite;
  z-index:4; -webkit-tap-highlight-color:transparent; touch-action:none;
  user-select:none; -webkit-user-select:none;
}
.lg-cord::before{ content:""; position:absolute; top:-24px; left:-28px; right:-28px; bottom:-24px; }
.lg-cord.lg-dragging{ animation:none; cursor:grabbing; }
.lg-cord:focus-visible .lg-knob{ box-shadow:0 0 0 3px var(--lg-neon), 0 2px 6px rgba(0,0,0,.4); }
.lg-string{ position:absolute; top:0; left:50%; width:2px; height:88px; background:linear-gradient(180deg,#cdbb95,#8b7c5b); transform:translateX(-50%); }
.lg-knob{ position:absolute; top:84px; left:50%; transform:translateX(-50%); width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #f3e8cb, #b89f6d); box-shadow:0 2px 6px rgba(0,0,0,.4); }
.lg-cord.lg-tug{ animation:lgTug .5s cubic-bezier(.34,1.56,.64,1); }

@keyframes lgSway{ 0%,100%{ transform:rotate(-5deg); } 50%{ transform:rotate(5deg); } }
@keyframes lgTug{
  0%{ transform:rotate(0deg) translateY(0); }
  35%{ transform:rotate(2deg) translateY(16px); }
  65%{ transform:rotate(-3deg) translateY(-4px); }
  100%{ transform:rotate(-5deg) translateY(0); }
}

.lg-hint{
  position:absolute; bottom:14%; left:0; right:0; text-align:center; margin:0;
  font-size:13.5px; letter-spacing:.02em; color:var(--lg-ink-dim); opacity:.85;
  transition:opacity .6s ease; z-index:2;
}
.lg-hint.lg-hidden{ opacity:0; }

/* ---------- panel (right / login) ---------- */
.lg-panel{ position:relative; background:linear-gradient(160deg, var(--lg-room-3), var(--lg-room-1) 80%); display:flex; align-items:center; justify-content:center; padding:32px; }

.lg-card{
  width:100%; max-width:360px; padding:34px 32px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(18,22,29,.78), rgba(9,11,15,.9));
  border:1px solid rgba(255,79,150,.18);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
  transition:box-shadow .45s ease, border-color .45s ease, opacity .9s var(--lg-ease), transform .9s var(--lg-ease);
  opacity:0; transform:translateX(36px) scale(.97); pointer-events:none;
}
.lg-panel.lg-revealed .lg-card{ opacity:1; transform:none; pointer-events:auto; }
.lg-card:hover{ border-color:rgba(255,79,150,.55); box-shadow:0 0 40px rgba(255,79,150,.2), 0 0 90px rgba(255,79,150,.08), 0 24px 60px rgba(0,0,0,.55); }
.lg-card.lg-shake{ animation:lgShake .45s ease; }
@keyframes lgShake{
  0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-8px); }
  40%{ transform:translateX(7px); } 60%{ transform:translateX(-5px); } 80%{ transform:translateX(4px); }
}

.lg-logo{ display:block; width:44px; height:44px; border-radius:12px; margin-bottom:14px; box-shadow:0 8px 20px -8px rgba(255,79,150,.5); }
.lg-card h1{ margin:0 0 4px; font-family:var(--lg-font-display); font-size:21px; font-weight:600; color:var(--lg-ink); letter-spacing:-.01em; }
.lg-card .lg-sub{ margin:0 0 26px; font-size:13px; color:var(--lg-ink-dim); }

.lg-field{ margin-bottom:18px; opacity:0; transform:translateY(10px); transition:opacity .6s var(--lg-ease), transform .6s var(--lg-ease); }
.lg-panel.lg-revealed .lg-field{ opacity:1; transform:none; }
.lg-panel.lg-revealed .lg-field:nth-child(2){ transition-delay:.15s; }
.lg-panel.lg-revealed .lg-field:nth-child(3){ transition-delay:.25s; }

.lg-field label{ display:block; font-size:12px; color:var(--lg-ink-dim); margin-bottom:6px; letter-spacing:.02em; }
.lg-field input{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.14);
  color:var(--lg-ink); font-size:15px; font-family:var(--lg-font-body); padding:8px 2px; outline:none;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.lg-field input::placeholder{ color:rgba(165,152,161,.55); }
.lg-field input:focus{ border-color:var(--lg-neon); box-shadow:0 10px 18px -14px var(--lg-neon-soft); }

.lg-submit{
  width:100%; margin-top:6px; padding:12px 16px; background:transparent; border:1px solid var(--lg-neon);
  color:var(--lg-neon); font-family:var(--lg-font-display); font-size:14px; font-weight:600; letter-spacing:.03em;
  border-radius:10px; cursor:pointer;
  transition:background .3s ease, box-shadow .3s ease, transform .15s ease, color .3s ease;
  opacity:0; transform:translateY(10px);
}
.lg-panel.lg-revealed .lg-submit{ opacity:1; transform:none; transition:opacity .6s var(--lg-ease) .35s, transform .6s var(--lg-ease) .35s, background .3s ease, box-shadow .3s ease, color .3s ease; }
.lg-submit:hover{ background:rgba(255,79,150,.1); box-shadow:0 0 26px rgba(255,79,150,.4); }
.lg-submit:active{ transform:translateY(1px); }
.lg-submit:disabled{ opacity:.6; cursor:default; }

.lg-error{
  min-height:18px; margin:14px 0 0; font-size:12.5px; color:var(--lg-error); opacity:0; transition:opacity .3s ease;
}
.lg-error.lg-show{ opacity:1; }

.lg-note{ margin:18px 0 0; font-size:12px; color:var(--lg-ink-dim); line-height:1.5; opacity:0; transition:opacity .6s ease .5s; }
.lg-panel.lg-revealed .lg-note{ opacity:.75; }

@media (prefers-reduced-motion:reduce){
  .lg-cord{ animation:none; }
  .lg-body *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}