@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');

/* ── Variables (matches VelaHere site exactly) ─────────────────────────────── */
:root {
    --bg:          #0b1220;
    --bg-soft:     #111a2f;
    --surface:     #141f36;
    --surface2:    #192340;
    --text:        #e8eefc;
    --muted:       #9eabc8;
    --accent:      #82bcff;
    --accent-strong: #5ba6ff;
    --border:      #2a3b5d;
    --radius:      0.75rem;
    --radius-sm:   0.5rem;
    --sidebar-w:   240px;
    --topbar-h:    56px;
    --card-shadow: 0 8px 20px rgba(2,10,24,.2);
    --transition:  0.18s ease;

    --badge-release-bg:     rgba(59,130,246,.17);
    --badge-release-border: rgba(96,165,250,.4);
    --badge-release-text:   #bed9ff;
    --badge-update-bg:      rgba(16,185,129,.15);
    --badge-update-border:  rgba(52,211,153,.35);
    --badge-update-text:    #bef7e0;
    --badge-blog-bg:        rgba(148,163,184,.18);
    --badge-blog-border:    rgba(148,163,184,.38);
    --badge-blog-text:      #d5dfef;
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }
body {
    font-family: Inter, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }
img { display: block; max-width: 100%; }

/* ── Login ──────────────────────────────────────────────────────────────────── */
#app-login,
#app-register {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 1rem;
    position:relative;
    overflow:hidden;
}

#app-login::before,
#app-register::before {
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(91,166,255,.08);
    filter:blur(120px);
    top:-200px;
    right:-100px;
}

.login-card {
    width:min(420px,95vw);
    max-width: 380px;
    background: rgba(20,31,54,.92);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    box-shadow: 0 24px 48px rgba(2,10,24,.5);
    animation: fadeUp .4s ease both;
}

@keyframes fadeUp {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin-bottom: 2rem;
}
.login-logo {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg,#5ba6ff,#82bcff);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 900; color: #fff;
    box-shadow: 0 4px 16px rgba(91,166,255,.35);
}
.login-title   { font-size: 1.3rem; font-weight: 700; letter-spacing:-.01em; }
.login-sub     { font-size: .85rem; color: var(--muted); }
.login-label   { font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom:.4rem; display:block; }
.login-input {
    width: 100%;
    padding: .65rem .85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: .95rem;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(130,188,255,.12); }
.login-input.input-error { border-color: #f87171; animation: shake .3s ease; }

@keyframes shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

.login-error {
    margin-top: .65rem;
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    background: rgba(248,113,113,.12);
    border: 1px solid rgba(248,113,113,.3);
    color: #fca5a5;
    font-size: .85rem;
}
.login-btn {
    width: 100%;
    margin-top: 1.25rem;
    padding: .7rem;
    border-radius: 999px;
    background: var(--accent-strong);
    color: #051122;
    font-size: .95rem;
    font-weight: 700;
    transition: transform var(--transition), box-shadow var(--transition);
}
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(91,166,255,.25); }


.login-btn-secondary{
    width:100%;
    margin-top:.75rem;
    padding:.7rem;
    border-radius:999px;
    border:1px solid var(--border);
    background:transparent;
    color:var(--text);
    font-size:.95rem;
    font-weight:700;
}

.login-btn-secondary:hover{
    border-color:var(--accent);
    color:var(--accent);
}

.hidden{
    display:none !important;
}

#loginForm,
#registerForm {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.auth-link {
    display:block;
    text-align:center;
    text-decoration:none;
}