:root{
    --bg1: #0f1724;
    --bg2: #071022;
    --accent: 210 90% 60%;
    --glass: rgba(255,255,255,0.06);
    --glass-2: rgba(255,255,255,0.03);
    --card-radius: 18px;
    --shadow: 0 10px 30px rgba(2,6,23,0.6);
    --blur: 18px;
    --gap: 18px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

html,body{
	height:100%;
}

body{
    margin:0;
    min-height:100%;
    display:grid;
    place-items:center;
    background: radial-gradient(1200px 600px at 10% 20%, rgba(29,78,216,0.14), transparent 10%),
                radial-gradient(1000px 500px at 90% 80%, rgba(59,130,246,0.10), transparent 12%),
                linear-gradient(180deg,var(--bg1),var(--bg2));
    overflow:hidden;
    color:#e6eef8;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* HÁTTÉR DIZÁJN */
.bg-blob{position:fixed;inset:0;pointer-events:none;z-index:0}
.blob{position:absolute;filter:blur(60px);opacity:0.8;mix-blend-mode:screen}
.blob.a{width:420px;height:420px;background:linear-gradient(135deg, rgba(99,102,241,0.65), rgba(139,92,246,0.45));left:-80px;top:-60px;animation:floatA 10s ease-in-out infinite}
.blob.b{width:360px;height:360px;background:linear-gradient(120deg, rgba(14,165,233,0.45), rgba(59,130,246,0.30));right:-120px;bottom:-40px;animation:floatB 12s ease-in-out infinite}
@keyframes floatA{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(18px) rotate(5deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes floatB{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(-6deg)}100%{transform:translateY(0) rotate(0)}}

.card{
    position:relative;
    z-index:1;
    width:min(420px,92vw);
    padding:calc(var(--gap) * 1.1);
    border-radius:var(--card-radius);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    box-shadow:var(--shadow);
    backdrop-filter: blur(var(--blur));
    border:1px solid rgba(255,255,255,0.045);
    display:flex;
    flex-direction:column;
    gap:14px;
    box-sizing:border-box;
    transition:transform 0.28s cubic-bezier(.2,.9,.2,1), box-shadow 0.28s;
}
.card:focus-within{
	transform:translateY(-6px);
	box-shadow:0 18px 45px rgba(2,6,23,0.7)
}

.logo{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.brand{display:flex;flex-direction:column;line-height:1;}
.brand h1{font-size:16px;margin:0;font-weight:600;letter-spacing:0.2px}
.brand p{margin:0;font-size:12px;opacity:0.7}

form{display:grid;gap:12px;margin-top:2px}
.field{position:relative;background:linear-gradient(180deg,var(--glass),var(--glass-2));border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,0.03)}
label.floating{position:absolute;left:16px;top:10px;pointer-events:none;font-size:13px;color:rgba(230,238,248,0.8);transform-origin:left top;transition:transform .18s ease, font-size .18s ease, opacity .18s ease}

input{width:100%;background:transparent;border:0;outline:0;color:inherit;font-size:15px;padding:18px 8px 4px 0;}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    padding: 0;
    display: inline-block;
    flex: 0 0 auto;
}

input:-webkit-autofill{box-shadow:0 0 0px 1000px transparent inset}
.field:has(input:focus) label.floating,.field:has(input:not(:placeholder-shown)) label.floating{transform:translateY(-10px) scale(.92);font-size:12px;opacity:0.95}
.field:has(input:focus){box-shadow:0 6px 30px rgba(59,130,246,0.08);border-color:rgba(59,130,246,0.35)}
.toggle{border-radius:10px;padding:6px;display:inline-grid;place-items:center;cursor:pointer;user-select:none;background:transparent;border:0;color:rgba(230,238,248,0.7)}

/* Modern styled login button */
.btn{
  margin-top:6px;
  appearance:none;
  border:0;
  padding:14px 20px;
  border-radius:14px;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  outline:0;
  color:#fff;
  background:linear-gradient(90deg,hsl(var(--accent)/0.85),hsl(calc(var(--accent)+10)/0.7));
  box-shadow:0 6px 18px rgba(59,130,246,0.25),0 8px 40px rgba(59,130,246,0.15) inset;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  position:relative;
  overflow:hidden;
  transition:all 0.28s cubic-bezier(.2,.9,.2,1);
}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 24px rgba(59,130,246,0.3),0 10px 40px rgba(59,130,246,0.2) inset;}
.btn:active{transform:translateY(1px) scale(0.98);box-shadow:0 6px 12px rgba(59,130,246,0.3),0 4px 20px rgba(59,130,246,0.15) inset;}
.btn .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg,hsl(var(--accent)/0.98),hsl(calc(var(--accent)+18)/0.82));box-shadow:0 6px 18px rgba(59,130,246,0.18);}

.helper{height:14px;font-size:12px;opacity:0.75}
.success-overlay{position:absolute;inset:0;border-radius:inherit;display:grid;place-items:center;pointer-events:none;background:linear-gradient(90deg, rgba(72,187,120,0.08), rgba(6,95,70,0.03));opacity:0;transition:opacity .35s}
.card.success .success-overlay{opacity:1}

@media (max-width:420px){.card{padding:16px;border-radius:14px}}
:focus{outline:2px solid transparent}
input:focus{outline-offset:2px}
input:focus-visible{box-shadow:0 6px 30px rgba(59,130,246,0.08)}
	
.logo-box {
	width:65px;
	height:65px;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	overflow:hidden;
	border-radius:8px;
}

.logo-box img {
	width:100%;
	height:100%;
	object-fit:contain;
}

/* Autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    background: transparent !important;           					/* átlátszó */
    -webkit-background-clip: padding-box !important; 				/* ne vágja le a szülő háttér */
    -webkit-text-fill-color: #e6eef8 !important; 					/* szöveg színe */
    caret-color: #e6eef8 !important;
    transition: background-color 5000s ease-in-out 0s !important; 	/* hosszú ideig tartó “flash” eltüntetés */
}

/* BEJELENTKEZÉS GOMB*/

.submit-btn{
	  height:45px;
	  margin-top:5px;
	  padding:12px;
	  border:none;
	  border-radius:12px;
	  background:hsl(var(--accent));
	  color:#fff;
	  cursor:pointer;
	  transition:transform 0.2s ease, box-shadow 0.2s ease;
	}
	.submit-btn:hover{
		transform:translateY(-2px) scale(1.02);
		box-shadow:0 8px 20px rgba(29,78,216,0.4);
	}
	
/* Hibás mező */
.field.error {
    border: 1.5px solid #ff4d4f;
    box-shadow: 0 0 0 1px rgba(255, 77, 79, 0.25);
}

/* Error box – alap */
.error-box {
    background: rgba(255, 77, 79, 0.15);
    border: 1px solid #ff4d4f;
    color: #ffdede;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 2px;
    text-align: center;

    opacity: 1;
    transition: opacity 1s ease;
}

/* Elhalványított állapot */
.error-box.fade-out {
    opacity: 0;
}