:root{
	--bg:#030303;
	--card-bg: rgba(255,255,255,0.05);
	--glass: rgba(255,255,255,0.06);
	--accent:#39d353;
	--muted: rgba(255,255,255,0.6);
	--text:#eaf7ee;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;color:var(--text);background:var(--bg)}

/* Background video container */
.video-wrap{position:fixed;inset:0;overflow:hidden;z-index:0}
.bgvideo{position:absolute;left:50%;top:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translate(-50%,-50%) scale(1.05);filter:blur(6px) brightness(0.92);object-fit:cover;transition:transform 12s linear;opacity:1}
.bgvideo.play-zoom{transform:translate(-50%,-50%) scale(1.08)}
.video-filter{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.28));mix-blend-mode:multiply;pointer-events:none}

/* Layout */
.ui-root{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:32px;position:relative;z-index:2}
.auth-card{position:relative;z-index:3;width:420px;max-width:94vw;padding:36px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 10px 40px rgba(0,0,0,0.6);backdrop-filter:blur(8px) saturate(120%);border:1px solid rgba(255,255,255,0.04);overflow:hidden;animation:cardIn 800ms cubic-bezier(.2,.9,.3,1)}

.brand{margin:0;font-size:1.8rem;color:var(--accent);letter-spacing:0.02em;text-align:center}
.subtitle{color:var(--muted);text-align:center;margin-top:8px;margin-bottom:20px}

.form{display:flex;flex-direction:column;gap:12px}
.field{position:relative}
.field input{width:100%;padding:14px 12px;border-radius:9px;border:none;background:rgba(255,255,255,0.02);color:var(--text);outline:none;transition:box-shadow .18s ease, transform .18s ease}
.field input:focus{box-shadow:0 6px 18px rgba(0,0,0,0.6);transform:translateY(-2px)}
.label{position:absolute;left:12px;top:12px;color:var(--muted);pointer-events:none;transition:transform .18s ease,font-size .18s ease;transform-origin:left top}
.field input.has-value + .label,
.field input:focus + .label{transform:translateY(-22px) scale(.85);font-size:12px;color:var(--accent)}

.actions{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:8px}
.btn{padding:10px 14px;border-radius:10px;text-decoration:none;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);cursor:pointer}
.btn.primary{background:var(--accent);color:#04110a;font-weight:600;border:none;box-shadow:0 6px 20px rgba(57,211,83,0.12);transform:translateZ(0);transition:transform .14s ease}
.btn.primary:active{transform:translateY(1px) scale(.995)}
.btn.ghost{background:transparent;color:var(--muted)}

.decor{position:absolute;left:0;bottom:0;width:100%;height:80px;pointer-events:none;opacity:0.9}

/* small floating accents */
.auth-card::before{content:"";position:absolute;right:-120px;top:-60px;width:260px;height:260px;background:radial-gradient(circle at 30% 30%, rgba(57,211,83,0.08), transparent 30%);filter:blur(40px);transform:rotate(20deg)}

@keyframes cardIn{from{transform:translateY(18px) scale(.996);opacity:0}to{transform:none;opacity:1}}

/* responsive */
@media (max-width:520px){.auth-card{padding:20px;border-radius:10px}.brand{font-size:1.4rem}}

/* centered footer link */
.site-link{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:5;background:rgba(0,0,0,0.28);padding:6px 10px;border-radius:8px;font-size:13px}
.site-link a{color:var(--muted);text-decoration:none}
.site-link a:hover{color:var(--accent);text-decoration:underline}