:root {
    --bg-0: #07090f;
    --bg-1: #0e1320;
    --ink: #e9edf5;
    --ink-2: #9aa3b8;
    --line: rgba(255,255,255,0.08);
    --accent: #ffd166;
    --accent-2: #06d6a0;
    --danger: #ef4565;
    --a: #ffd166; /* oro */
    --b: #c0c4cc; /* plata */
    --c: #d28a4f; /* bronce */
    --d: #6c7488; /* acero */
    --e: #3a3f4d; /* grafito */
}

* { box-sizing: border-box; }
html, body {
    margin: 0; height: 100%; background: var(--bg-0); color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif; overflow: hidden;
}
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }

main.card {
    position: relative; z-index: 1;
    width: min(92vw, 420px);
    margin: 12vh auto 0;
    padding: 36px 32px 24px;
    background: linear-gradient(180deg, rgba(20,24,38,0.78), rgba(12,14,24,0.92));
    border: 1px solid var(--line);
    border-radius: 18px;
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
    animation: rise .55s cubic-bezier(.2,.8,.2,1) both;
}

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

.brand { text-align: center; margin-bottom: 22px; }
.brand-mark { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.brand-mark .dot {
    width: 10px; height: 10px; border-radius: 50%;
    box-shadow: 0 0 12px currentColor;
    animation: pulse 2.4s ease-in-out infinite;
}
.brand-mark .dot.a { color: var(--a); background: var(--a); animation-delay: 0s; }
.brand-mark .dot.b { color: var(--b); background: var(--b); animation-delay: .2s; }
.brand-mark .dot.c { color: var(--c); background: var(--c); animation-delay: .4s; }
.brand-mark .dot.d { color: var(--d); background: var(--d); animation-delay: .6s; }
.brand-mark .dot.e { color: var(--e); background: var(--e); animation-delay: .8s; }
@keyframes pulse {
    0%, 100% { transform: scale(1);    opacity: .9; }
    50%      { transform: scale(1.4);  opacity: 1; }
}

h1 { font-size: 22px; margin: 0; letter-spacing: .2px; }
.tag { color: var(--ink-2); margin: 6px 0 0; font-size: 13px; }

form { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink-2); }
label > span { font-weight: 500; letter-spacing: .3px; text-transform: uppercase; }
input {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255,209,102,0.05);
    box-shadow: 0 0 0 4px rgba(255,209,102,0.12);
}
button {
    margin-top: 6px;
    background: linear-gradient(180deg, #ffd87a, #f5b13b);
    color: #1a1408;
    border: 0;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: transform .12s ease, filter .15s ease;
}
button:hover { filter: brightness(1.04); }
button:active { transform: translateY(1px); }
button[disabled] { opacity: .7; cursor: progress; }

.btn-spinner {
    position: absolute; right: 14px; top: 50%; width: 16px; height: 16px;
    margin-top: -8px;
    border: 2px solid rgba(0,0,0,0.25); border-top-color: #1a1408;
    border-radius: 50%; opacity: 0; animation: spin .9s linear infinite;
}
button.is-loading .btn-spinner { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.error {
    margin: 8px 0 0; min-height: 18px; font-size: 13px; color: var(--danger);
    text-align: center;
}

footer {
    margin-top: 22px; display: flex; justify-content: space-between;
    color: var(--ink-2); font-size: 11px; letter-spacing: .3px;
}