body { display:flex; align-items:center; justify-content:center; min-height:100vh; overflow:hidden; }

  /* Fondo animado */
  .bg-deco {
    position:fixed; inset:0; z-index:0; overflow:hidden;
    background: radial-gradient(ellipse at 20% 50%, rgba(201,168,76,.07) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(62,207,207,.05) 0%, transparent 50%);
  }
  .bg-grid {
    position:absolute; inset:0;
    background-image: linear-gradient(var(--border) 1px, transparent 1px),
                      linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: .3;
  }
  .bg-glow {
    position:absolute; width:400px; height:400px; border-radius:50%;
    background: radial-gradient(circle, rgba(201,168,76,.12) 0%, transparent 70%);
    top: -100px; right: -100px;
    animation: float 8s ease-in-out infinite;
  }
  .bg-glow2 {
    position:absolute; width:300px; height:300px; border-radius:50%;
    background: radial-gradient(circle, rgba(62,207,207,.08) 0%, transparent 70%);
    bottom: -80px; left: -80px;
    animation: float 10s ease-in-out infinite reverse;
  }
  @keyframes float {
    0%,100% { transform:translateY(0) scale(1); }
    50%     { transform:translateY(-20px) scale(1.05); }
  }

  /* Card de login */
  .login-wrap {
    position: relative; z-index: 1;
    width: 100%; max-width: 420px;
    padding: 1rem;
    animation: fadeUp .5s ease both;
  }
  @keyframes fadeUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
  }

  .login-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,76,.08);
  }

  .login-logo {
    text-align: center;
    margin-bottom: 2rem;
  }
  .login-logo .logo-icon {
    width: 96px; height: 96px;
    display: block;
    margin: 0 auto .5rem;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
  }
  .login-logo h1 {
    font-size: 1.5rem;
    color: var(--gold);
    font-family: 'Playfair Display', serif;
  }
  .login-logo p {
    font-size: .8rem;
    color: var(--text3);
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .login-form { display:flex; flex-direction:column; gap:1.1rem; }

  .input-wrap { position:relative; }
  .input-icon {
    position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
    font-size:.9rem; color:var(--text3); pointer-events:none;
  }
  .input-wrap .input { padding-left:2.4rem; }

  .pass-toggle {
    position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--text3); cursor:pointer;
    font-size:.9rem; padding:.2rem;
  }
  .pass-toggle:hover { color:var(--text); }

  .login-btn {
    width:100%;
    justify-content:center;
    padding: .8rem;
    font-size:.95rem;
    border-radius: var(--radius-lg);
    margin-top:.3rem;
    background: linear-gradient(135deg, var(--gold), #a07830);
    color: #0d0f14;
    font-weight: 700;
    letter-spacing: .03em;
  }

  .error-msg {
    background: rgba(224,82,82,.1);
    border: 1px solid rgba(224,82,82,.3);
    border-radius: var(--radius);
    padding: .6rem 1rem;
    font-size: .83rem;
    color: var(--red);
    display:none;
  }
  .error-msg.show { display:block; }