:root {
  --bg: #0c1b33;
  --bg-deep: #071126;
  --panel: #13284b;
  --panel-2: #0a162b;
  --gold: #c9a34e;
  --gold-2: #bfa252;
  --text: #e9eef7;
  --muted: #a9b6cc;
  --success: #47d18c;
  --danger: #ff6b6b;
  --info: #7dc6ff;
  --warning: #ffcc66;
  --line: rgba(233,238,247,.12);
  --radius: 22px;
  --shadow: 0 20px 60px rgba(0,0,0,.28);
  --font: "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg-deep); color:var(--text); font-family:var(--font); }
body { overflow-x:hidden; }
button, input, select, textarea { font: inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }

.splash {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: radial-gradient(circle at center, var(--panel) 0%, var(--bg-deep) 70%);
  transition: opacity .45s ease, visibility .45s ease;
}
.splash img { width: 118px; height: 118px; object-fit: cover; border-radius: 28px; box-shadow: 0 0 0 1px var(--line), 0 24px 80px rgba(0,0,0,.45); animation: pulse 1.5s ease infinite alternate; }
.splash-mark { margin-top: 170px; position: absolute; letter-spacing: .18em; font-size: .82rem; color: var(--gold); font-weight: 800; }
.splash-line { position:absolute; margin-top: 218px; width: 180px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: slide 1.2s ease infinite; }
@keyframes pulse { from { transform: scale(.98); filter: brightness(.9);} to { transform: scale(1.04); filter: brightness(1.15);} }
@keyframes slide { from { opacity:.35; width:80px;} to { opacity:1; width:220px;} }

.login {
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(circle at 15% 20%, rgba(201,163,78,.18), transparent 28%),
    radial-gradient(circle at 85% 75%, rgba(125,198,255,.13), transparent 30%),
    linear-gradient(135deg, var(--bg-deep), var(--bg));
}
.login-card {
  width:min(520px, 100%); padding:34px; border:1px solid var(--line); border-radius:32px;
  background: rgba(19,40,75,.72); backdrop-filter: blur(14px); box-shadow: var(--shadow);
}
.login-logo img { width:92px; height:92px; object-fit:cover; border-radius:22px; }
.login h1 { margin:.8rem 0 .4rem; color:var(--gold); font-size: clamp(1.6rem, 5vw, 2.3rem); }
.login p { color: var(--muted); line-height:1.5; }
label { display:block; margin:14px 0; color: var(--muted); font-weight:700; }
input, select, textarea {
  width:100%; border:1px solid var(--line); border-radius:16px; padding:12px 14px;
  color:var(--text); background:rgba(255,255,255,.055); outline:none;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,163,78,.16); }
select option { color:#111; }
.muted { color:var(--muted); }