*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --bg:        #0e0a1a;
    --bg-on:     #120a22;
    --lamp-off:  #2a2040;
    --lamp-on:   #c084fc;
    --shade-on:  #a855f7;
    --accent:    #a855f7;
    --accent2:   #7c3aed;
    --form-bg:   #160e2a;
    --text:      #ffffff;
    --glow:      rgba(168,85,247,0.55);
    --glow2:     rgba(168,85,247,0.18);
  }

  html, body {
    width: 100%; min-height: 100%;
    font-family: 'Nunito', sans-serif;
    background: var(--bg);
    transition: background 1s ease;
    overflow-x: hidden;
  }
  body.lights-on { background: var(--bg-on); }

  /* ── ambient glow ── */
  .floor-glow {
    position: fixed; bottom: -100px; left: 50%;
    transform: translateX(-50%);
    width: min(700px, 120vw); height: 200px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(168,85,247,0.2) 0%, transparent 70%);
    opacity: 0; transition: opacity 1s ease; pointer-events: none; z-index: 0;
  }
  body.lights-on .floor-glow { opacity: 1; }

  /* ── page layout ── */
  .page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 60px;
    position: relative; z-index: 1;
    gap: 0;
  }

  /* On wide screens: side by side */
  @media (min-width: 700px) {
    .page {
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 52px;
      padding: 40px 24px 80px;
    }
  }

  /* ══════════════ LAMP ══════════════ */
  .lamp-wrapper {
    display: flex; flex-direction: column; align-items: center;
    position: relative; user-select: none;
    flex-shrink: 0;
    /* Scale lamp down on small screens */
    --scale: 1;
    transform: scale(var(--scale));
    transform-origin: bottom center;
    margin-bottom: 36px;
  }
  @media (min-width: 700px) { .lamp-wrapper { margin-bottom: 0; } }
  @media (max-width: 380px) { .lamp-wrapper { --scale: 0.82; } }

  /* Light cone downward */
  .lamp-beam {
    position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 75px solid transparent;
    border-right: 75px solid transparent;
    border-bottom: 95px solid rgba(168,85,247,0.08);
    opacity: 0; transition: opacity 1s ease; pointer-events: none;
  }
  body.lights-on .lamp-beam { opacity: 1; }

  /* Shade */
  .lamp-shade {
    width: 145px; height: 118px; position: relative;
    clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
    background: var(--lamp-off);
    transition: background 1s ease, box-shadow 1s ease;
    z-index: 3;
  }
  body.lights-on .lamp-shade {
    background: var(--shade-on);
    box-shadow:
      0 0 55px rgba(168,85,247,0.75),
      0 0 110px rgba(168,85,247,0.35),
      inset 0 0 28px rgba(255,220,255,0.25);
  }

  /* Face */
  .lamp-face {
    position: absolute; bottom: 22px; left: 50%;
    transform: translateX(-50%); width: 72px;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
  }
  .lamp-eyes { display: flex; gap: 19px; }
  .eye {
    width: 12px; height: 12px; border-radius: 50%;
    background: rgba(0,0,0,0.45);
    position: relative; overflow: hidden; transition: all 0.5s ease;
  }
  .eye::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 55%; background: rgba(0,0,0,0.65);
    border-radius: 0 0 50% 50%; transition: height 0.45s ease;
  }
  body.lights-on .eye::after  { height: 0; }
  body.lights-on .eye         { background: #3a0060; }

  /* Z's */
  .sleep-z {
    position: absolute; color: rgba(190,160,230,0.8); font-weight: 900;
    animation: floatZ 2.2s ease-in-out infinite; transition: opacity 0.5s ease;
  }
  body.lights-on .sleep-z { opacity: 0; }
  @keyframes floatZ {
    0%,100% { transform: translateY(0) rotate(-12deg); opacity: 0.75; }
    50%      { transform: translateY(-10px) rotate(12deg); opacity: 1; }
  }

  /* Mouth */
  .lamp-mouth {
    width: 28px; height: 14px;
    border-bottom: 3px solid rgba(0,0,0,0.35);
    border-left:   3px solid rgba(0,0,0,0.35);
    border-right:  3px solid rgba(0,0,0,0.35);
    border-radius: 0 0 24px 24px;
    opacity: 0; transform: scaleX(0);
    transition: all 0.5s ease 0.35s;
  }
  body.lights-on .lamp-mouth {
    opacity: 1; transform: scaleX(1);
    border-color: rgba(80,0,120,0.5);
  }

  /* Cheeks */
  .cheeks {
    display: flex; gap: 37px; position: absolute; bottom: 26px;
    left: 50%; transform: translateX(-50%); opacity: 0;
    transition: opacity 0.6s ease 0.45s;
  }
  .cheek { width: 15px; height: 9px; border-radius: 50%; background: rgba(255,100,200,0.55); }
  body.lights-on .cheeks { opacity: 1; }

  /* Neck */
  .lamp-neck {
    width: 14px; height: 100px;
    background: linear-gradient(to right, #2a1a44, #5a4070, #2a1a44);
    transition: background 0.6s ease; z-index: 2; position: relative;
  }
  body.lights-on .lamp-neck { background: linear-gradient(to right, #8866aa, #ccaaee, #8866aa); }

  /* Base */
  .lamp-base {
    width: 88px; height: 20px;
    background: linear-gradient(to bottom, #3a2050, #22122e);
    border-radius: 44px 44px 10px 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.7);
    transition: all 0.6s ease; z-index: 2;
  }
  body.lights-on .lamp-base {
    background: linear-gradient(to bottom, #9966cc, #6633aa);
    box-shadow: 0 5px 24px rgba(168,85,247,0.35);
  }

  /* ══════════════ 3D DOOR ══════════════ */
  .cord-scene {
    position: absolute;
    left: 50%; top: 14px;
    transform: translateX(calc(-50% + 30px));
    perspective: 185px;
    perspective-origin: 50% 0%;
    cursor: pointer; z-index: 20;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .cord-string {
    width: 2px; height: 11px;
    background: linear-gradient(to bottom, rgba(190,160,230,0.3), rgba(210,180,255,0.9));
    margin: 0 auto;
  }

  .door-3d {
    width: 32px; height: 58px;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: top center;
    transform: rotateX(0deg);
  }

  @keyframes doorPull {
    0%   { transform: rotateX(0deg);  }
    45%  { transform: rotateX(70deg); }
    65%  { transform: rotateX(50deg); }
    82%  { transform: rotateX(62deg); }
    100% { transform: rotateX(56deg); }
  }
  @keyframes doorPush {
    0%   { transform: rotateX(56deg); }
    40%  { transform: rotateX(-9deg); }
    70%  { transform: rotateX(5deg);  }
    100% { transform: rotateX(0deg);  }
  }
  .door-3d.anim-pull { animation: doorPull 0.65s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
  .door-3d.anim-push { animation: doorPush 0.55s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
  .door-3d.is-pulled { transform: rotateX(56deg); }

  .dface { position: absolute; }

  /* Front */
  .d-front {
    width: 32px; height: 58px;
    background: linear-gradient(165deg, #5a3880 0%, #3d2060 45%, #2e1650 100%);
    transform: translateZ(6px);
    border-radius: 2px 2px 6px 6px;
    border: 1px solid rgba(200,150,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.35);
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end;
    padding-bottom: 10px;
    transition: background 0.6s ease;
  }
  body.lights-on .d-front {
    background: linear-gradient(165deg, #9060c8 0%, #7040a8 45%, #5a2e90 100%);
  }
  .d-front::before {
    content: ''; position: absolute;
    top: 9px; left: 5px; right: 5px; bottom: 22px;
    border: 1px solid rgba(200,150,255,0.1);
    border-radius: 2px;
  }

  /* Back */
  .d-back {
    width: 32px; height: 58px;
    background: #180e2a;
    transform: rotateY(180deg) translateZ(6px);
    border-radius: 2px 2px 6px 6px;
  }

  /* Left */
  .d-left {
    width: 12px; height: 58px;
    background: linear-gradient(to right, #160a28, #2e1650);
    left: 0;
    transform: rotateY(-90deg) translateZ(0px);
    transform-origin: left center;
  }

  /* Right */
  .d-right {
    width: 12px; height: 58px;
    background: linear-gradient(to left, #160a28, #2e1650);
    right: 0;
    transform: rotateY(90deg) translateZ(32px);
    transform-origin: right center;
  }

  /* Top */
  .d-top {
    width: 32px; height: 12px; background: #241040;
    top: 0; transform: rotateX(90deg); transform-origin: top center;
  }

  /* Bottom */
  .d-bottom {
    width: 32px; height: 12px; background: #120820;
    bottom: 0; transform: rotateX(-90deg); transform-origin: bottom center;
  }

  /* Knob */
  .door-knob-wrap { position: relative; width: 15px; height: 15px; }
  .door-knob {
    width: 15px; height: 15px; border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #e8d8ff, #a080c8 50%, #604880);
    box-shadow: 0 2px 7px rgba(0,0,0,0.8), inset 0 1px 3px rgba(255,255,255,0.45),
                0 0 0 1.5px rgba(200,150,255,0.2);
    transition: background 0.5s ease, box-shadow 0.5s ease;
  }
  body.lights-on .door-knob {
    background: radial-gradient(circle at 35% 32%, #f0d8ff, #c080f0 50%, #8040c0);
    box-shadow: 0 2px 10px rgba(168,85,247,0.85), inset 0 1px 3px rgba(255,255,255,0.45),
                0 0 0 1.5px rgba(168,85,247,0.5);
  }
  .knob-ring {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid rgba(200,160,255,0.6);
    animation: ringPulse 2s ease-in-out infinite;
  }
  body.lights-on .knob-ring { border-color: rgba(168,85,247,0.65); }
  @keyframes ringPulse {
    0%,100% { transform: translate(-50%,-50%) scale(1);   opacity: 0.7; }
    50%      { transform: translate(-50%,-50%) scale(2);   opacity: 0;   }
  }
  .cord-scene:hover .door-knob {
    box-shadow: 0 0 14px rgba(168,85,247,0.55), 0 2px 7px rgba(0,0,0,0.8),
                inset 0 1px 3px rgba(255,255,255,0.45);
  }

  /* ══════════════ LOGIN CARD ══════════════ */
  .login-card {
    background: var(--form-bg);
    border-radius: 24px;
    padding: 38px 32px;
    width: 100%;
    max-width: 360px;
    border: 1.5px solid rgba(168,85,247,0);
    box-shadow: 0 20px 60px rgba(0,0,0,0.65);
    opacity: 0;
    transform: translateY(32px) scale(0.94);
    pointer-events: none;
    transition:
      opacity      0.75s ease 0.35s,
      transform    0.75s ease 0.35s,
      border-color 0.75s ease 0.35s,
      box-shadow   0.75s ease 0.35s;
  }
  body.lights-on .login-card {
    opacity: 1; transform: translateY(0) scale(1); pointer-events: all;
    border-color: rgba(168,85,247,0.45);
    box-shadow: 0 0 40px rgba(168,85,247,0.2), 0 20px 60px rgba(0,0,0,0.55);
  }

  .login-card h2 {
    color: var(--text); font-size: clamp(22px, 5vw, 28px); font-weight: 900;
    margin-bottom: 26px; text-align: center; letter-spacing: -0.5px;
  }

  .field { margin-bottom: 16px; }
  .field label {
    display: block; color: rgba(255,255,255,0.5);
    font-size: 12px; font-weight: 700; margin-bottom: 7px;
    letter-spacing: 0.4px; text-transform: uppercase;
  }
  .field input {
    width: 100%;
    background: rgba(168,85,247,0.07);
    border: 1.5px solid rgba(168,85,247,0.18);
    border-radius: 12px; padding: 13px 16px;
    color: var(--text); font-family: 'Nunito', sans-serif;
    font-size: 14px; outline: none;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
    /* prevent zoom on focus in iOS */
    font-size: max(16px, 14px);
  }
  .field input::placeholder { color: rgba(255,255,255,0.2); }
  .field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(168,85,247,0.2);
    background: rgba(168,85,247,0.12);
  }

  .login-btn {
    width: 100%; padding: 14px;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    border: none; border-radius: 12px; color: white;
    font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 800;
    cursor: pointer; margin-top: 10px; margin-bottom: 18px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(124,58,237,0.45);
    letter-spacing: 0.3px;
  }
  .login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(124,58,237,0.65);
    background: linear-gradient(135deg, #b96bff, #8b49ff);
  }
  .login-btn:active { transform: translateY(0); }

  .forgot {
    text-align: center; color: rgba(255,255,255,0.35);
    font-size: 13px; cursor: pointer; transition: color 0.2s;
  }
  .forgot:hover { color: var(--accent); }

  /* password wrapper */
  .input-wrap {
    position: relative; display: flex; align-items: center;
  }
  .input-wrap input { padding-right: 46px; }
  .eye-toggle {
    position: absolute; right: 14px;
    background: none; border: none; cursor: pointer;
    color: rgba(168,85,247,0.5); padding: 4px;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.2s ease; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .eye-toggle:hover { color: rgba(168,85,247,1); }
  .eye-toggle svg { width: 20px; height: 20px; display: block; }

  /* hint */
  .hint {
    position: fixed; bottom: 22px; left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.25); font-size: 12px;
    font-family: 'Nunito', sans-serif; letter-spacing: 0.4px;
    transition: opacity 0.5s; pointer-events: none;
    white-space: nowrap; text-align: center;
    width: 90%; z-index: 99;
  }
  body.lights-on .hint { opacity: 0; }

  /* sparks */
  .spark {
    position: fixed; border-radius: 50%; pointer-events: none;
    animation: sparkFly 0.65s ease forwards; z-index: 500;
  }
  @keyframes sparkFly {
    0%   { transform: translate(0,0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx),var(--ty)) scale(0); opacity: 0; }
  }

  /* Scrollable on very small heights */
  @media (max-height: 600px) {
    .page { justify-content: flex-start; padding-top: 20px; }
    .lamp-wrapper { --scale: 0.7; }
  }