/* ====================================================================== *
 * File: login-visual-polish.css
 * Location: static/css/login-visual-polish.css
 * Description: Converts the login page into a compact single-card form and removes the empty decorative half-screen panel.
 * Version: 1.1.0
 * Last Modified: Mon Aug 10 2026 - 12:40
 * Dependencies: login_pro.css
 * ====================================================================== */

/* -------------------------------------------------------------------------- *
 * 1. Remove obsolete decorative showcase
 * -------------------------------------------------------------------------- */

.login-showcase,
.login-art-halo,
.login-artwork,
.login-monogram {
  display: none !important;
}

/* -------------------------------------------------------------------------- *
 * 2. Compact single-card login shell
 * -------------------------------------------------------------------------- */

.login-page {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(560px, calc(100% - 32px));
  max-width: 560px;
  min-height: 0;
  margin: 42px auto 50px;
  overflow: hidden;
  border: 1px solid rgba(194, 205, 221, 0.92);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 24px 72px rgba(8, 30, 63, 0.14);
}

/* - - - 2.1. Small brand accent replaces the former half-screen artwork - - - */

.login-page::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(90deg, #0a2c5b 0%, #1c5597 38%, #e1b95e 72%, #b9812e 100%);
}

.login-panel {
  min-height: 0;
  padding: 54px 60px 58px;
  background:
    radial-gradient(circle at 100% 0, rgba(232, 197, 111, 0.1), transparent 29%),
    radial-gradient(circle at 0 100%, rgba(49, 95, 197, 0.055), transparent 30%),
    #ffffff;
}

.login-panel-inner {
  width: 100%;
  max-width: 390px;
  margin: auto;
}

/* -------------------------------------------------------------------------- *
 * 3. Tighten vertical rhythm
 * -------------------------------------------------------------------------- */

.login-logo {
  margin-bottom: 32px;
}

.login-panel h1 {
  margin-bottom: 24px;
}

.login-form {
  gap: 17px;
}

.login-submit {
  margin-top: 5px;
}

/* -------------------------------------------------------------------------- *
 * 4. Responsive behavior
 * -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  .login-page {
    width: min(100% - 20px, 560px);
    margin: 14px auto 28px;
    border-radius: 22px;
  }

  .login-panel {
    min-height: 0;
    padding: 38px 24px 42px;
  }

  .login-logo {
    margin-bottom: 28px;
  }

  .login-panel h1 {
    margin-bottom: 22px;
  }
}

/* ============================= End of login-visual-polish.css ============================= */