:root {
    --bg: #0b0f1a;
    --panel: rgba(255,255,255,.06);
    --stroke: rgba(255,255,255,.12);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.72);
    --r: 18px;
    --pad: 18px;
    --shadow: 0 18px 60px rgba(0,0,0,.45);
    --ring: 0 0 0 3px rgba(143,183,255,.28);
}

body {
    margin: 0;
    font: 16px/1.5 system-ui;
    background: radial-gradient(1200px 800px at 20% 10%,rgba(143,183,255,.18),transparent 60%),var(--bg);
    color: var(--text);
}

.card {
    background: var(--panel);
    border: 1px solid var(--stroke);
    border-radius: var(--r);
    padding: var(--pad);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.08);
    color: var(--text);
    text-decoration: none;
}

    .btn:hover {
        background: rgba(255,255,255,.12);
    }

input {
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: var(--text);
    border-radius: 14px;
    padding: .7rem .8rem;
    outline: none;
}

    .btn:focus-visible, input:focus {
        box-shadow: var(--ring);
    }