:root {
    --bg-1:#020312;
    --bg-2:#071a2f;
    --bg-3:#000;
    --accent-a:#00e6c3;
    --accent-b:#56b4ff;
    --text:#dcf8ff;
    --text-dim:#9ecfdf;
    --danger:#ff6f7d;
    --glass-border:rgba(255,255,255,0.05);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial}
body{
    background:
        radial-gradient(900px 500px at 12% 18%, rgba(120,160,210,0.08), transparent 60%),
        radial-gradient(800px 400px at 74% 40%, rgba(0,200,170,0.07), transparent 65%),
        linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 55%,var(--bg-3) 100%);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
}

/* ЄДИНА АНІМАЦІЯ: зорі (canvas) */
#starCanvas{
    position:fixed;inset:0;width:100%;height:100%;
    display:block;pointer-events:none;z-index:0;
}

.center{
    position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    padding:28px;z-index:2;
}
.card{
    width:440px;max-width:96%;
    background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.015));
    border:1px solid var(--glass-border);
    border-radius:18px;
    padding:26px 26px 22px;
    backdrop-filter:blur(10px) saturate(125%);
    box-shadow:0 12px 48px -10px rgba(5,10,26,0.65);
}
h1{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:.6px}
.subtitle{margin:0 0 18px;font-size:13px;color:var(--text-dim);letter-spacing:.4px}

.avatar-wrap{display:flex;justify-content:center;margin-bottom:16px}
.avatar{
    width:96px;height:96px;border-radius:50%;object-fit:cover;
    border:3px solid rgba(0,230,180,0.18);
    box-shadow:0 6px 24px -6px rgba(0,230,180,0.25);
    background:linear-gradient(180deg,#08121f,#04070c);
}

.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:#cfefff;margin-bottom:6px;letter-spacing:.4px;font-weight:500}
.field input{
    width:100%;padding:12px 14px;font-size:15px;
    border-radius:12px;background:rgba(14,20,30,0.55);
    border:1px solid rgba(255,255,255,0.05);
    color:var(--text);outline:none;
    transition:background .18s,border-color .18s;
}
.field input:focus{
    background:rgba(20,30,44,0.72);
    border-color:rgba(0,230,180,0.22);
}
.error{min-height:18px;font-size:13px;margin-top:6px;color:var(--danger);letter-spacing:.2px}

.actions{display:flex;gap:14px;align-items:center;margin-top:4px}
.btn{
    flex:1;padding:13px 16px;font-size:15px;font-weight:700;
    border:none;border-radius:12px;cursor:pointer;
    background:linear-gradient(90deg,var(--accent-a),var(--accent-b) 70%);
    color:#042;letter-spacing:.4px;
    box-shadow:0 8px 32px -10px rgba(0,230,180,0.45),0 6px 24px -10px rgba(95,180,255,0.25);
    transition:filter .18s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{filter:brightness(.95)}

.info-btn{
    width:48px;height:48px;border-radius:12px;
    border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.02);
    display:flex;align-items:center;justify-content:center;
    font-weight:600;color:var(--text-dim);cursor:pointer;
    transition:background .18s,color .18s;
}
.info-btn:hover{background:rgba(255,255,255,0.05);color:var(--text)}

.loading-dots{display:flex;gap:6px;justify-content:center;align-items:center}
.loading-dots span{
    width:8px;height:8px;border-radius:50%;background:#004;
    animation:pulse .9s ease-in-out infinite;
}
.loading-dots span:nth-child(2){animation-delay:.18s}
.loading-dots span:nth-child(3){animation-delay:.36s}
@keyframes pulse{
    0%,100%{transform:scale(.5);opacity:.55}
    50%{transform:scale(1);opacity:1}
}

.meta{
    display:flex;justify-content:space-between;gap:14px;
    font-size:13px;margin-top:14px;color:var(--text-dim);letter-spacing:.3px
}

@media (max-width:520px){
    .card{padding:22px 20px 18px;width:92%}
    h1{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
    .loading-dots span{animation-duration:1.4s}
}