/* The login page (public, like the page itself). The app's Aurora look: the glow, a glass card, the gradient button. */
:root {
  --bg: #09090F;
  --raised: #12111C;
  --line: rgba(255, 255, 255, .10);
  --line-hi: rgba(255, 255, 255, .14);
  --text: #F5F3FF;
  --text-2: #C9C3E6;
  --text-4: #A9A3C8;
  --pink: #FF5FA2;
  --pink-hi: #FF8FBF;
  --orange: #FF8A3D;
  --violet: #7C5CFF;
  --ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg);
       color: var(--text); font: 400 14px/1.5 var(--ui); -webkit-font-smoothing: antialiased; }
::selection { background: rgba(255, 95, 162, .4); color: #fff; }

.atmo { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow { position: absolute; left: -10%; right: -10%; top: -12%; height: 90vh;
  background: radial-gradient(60% 45% at 50% -5%, rgba(255, 95, 162, .5) 0%, rgba(255, 95, 162, 0) 70%),
              radial-gradient(40% 35% at 15% 10%, rgba(124, 92, 255, .42) 0%, rgba(124, 92, 255, 0) 70%),
              radial-gradient(40% 35% at 88% 12%, rgba(255, 138, 61, .36) 0%, rgba(255, 138, 61, 0) 70%);
  animation: aurora 38s ease-in-out infinite alternate; }
@keyframes aurora { 50% { transform: translate3d(-2.5%, 1.5%, 0) scale(1.05); } 100% { transform: translate3d(2.5%, -1%, 0) scale(1.02); } }

.card { position: relative; z-index: 1; width: 100%; max-width: 400px; padding: 32px 30px 30px; border-radius: 24px;
        background: rgba(18, 17, 28, .72); border: 1px solid var(--line-hi); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .9);
        -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; font: 800 17px/1 var(--ui); letter-spacing: -.02em; white-space: nowrap; }
.logo-mark { flex: none; width: 28px; height: 28px; border-radius: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='34' y='16.5' width='21' height='31' rx='5' fill='%2309090F' opacity='.32'/%3E%3Crect x='24' y='13' width='25' height='38' rx='6' fill='%2309090F' opacity='.5'/%3E%3Crect x='9.5' y='9' width='29' height='46' rx='7' fill='%23FFFFFF'/%3E%3Crect x='15' y='39.5' width='18.5' height='5' rx='2.5' fill='%23FF5FA2'/%3E%3Crect x='15' y='47' width='11.5' height='4' rx='2' fill='%23FF8A3D'/%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(135deg, #FF5FA2, #FF8A3D 55%, #7C5CFF);
             box-shadow: 0 6px 18px -6px rgba(255, 95, 162, .6); }
h1 { margin: 0 0 22px; font: 800 40px/1.05 var(--ui); letter-spacing: -.04em; }
.hl { background: linear-gradient(90deg, #FF8FBF, #FFB37A); -webkit-background-clip: text; background-clip: text; color: transparent; }

form { display: flex; flex-direction: column; }
label { margin: 0 0 7px; font-size: 13px; font-weight: 600; color: var(--text-2); }
input[type=text], input[type=password] { height: 46px; margin: 0 0 16px; padding: 0 14px; border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, .05); color: var(--text); font: 400 15px var(--ui); box-shadow: inset 0 0 0 1px var(--line-hi); outline: none;
  transition: box-shadow .15s, background .15s; }
input[type=text]:focus, input[type=password]:focus { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 95, 162, .6), 0 0 0 4px rgba(255, 95, 162, .14); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 14px; font-size: 13.5px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--pink); }
.btn { min-height: 50px; border: 0; border-radius: 999px; color: #1A0A12; cursor: pointer; font: 700 15px var(--ui);
       background: linear-gradient(135deg, #FF5FA2, #FF8A3D); box-shadow: 0 14px 34px -14px rgba(255, 95, 162, .85);
       transition: background .2s, box-shadow .2s, transform .15s; }
.btn:hover { background: linear-gradient(135deg, #FF70AD, #FF9A55); box-shadow: 0 18px 40px -14px rgba(255, 95, 162, 1); transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--pink-hi); outline-offset: 3px; }
.error { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 11px 14px; border-radius: 12px;
         background: rgba(255, 122, 149, .14); border: 1px solid rgba(255, 122, 149, .4); color: #FFC7D3; font-size: 13.5px; font-weight: 500; }
.error::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #FF7A95; }
.error.locked { background: rgba(255, 138, 61, .14); border-color: rgba(255, 138, 61, .45); color: #FFD2B0; }
.error.locked::before { background: var(--orange); }
@media (max-width: 420px) { .card { padding: 26px 20px 22px; border-radius: 20px; } h1 { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) { .glow { animation: none; } .btn { transition: none; } .btn:hover { transform: none; } }