:root {
        --bg: #0f172a;          /* slate-900 */
        --card: #111827;        /* gray-900 */
        --text: #e5e7eb;        /* gray-200 */
        --muted: #9ca3af;       /* gray-400 */
        --accent: #8b5cf6;      /* violet-500 */
        --accent-2: #22d3ee;    /* cyan-400 */
        --ok: #22c55e;          /* green-500 */
        --warn: #f59e0b;        /* amber-500 */
        --err: #ef4444;         /* red-500 */
}
    * { box-sizing: border-box; }
    body {
        margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
        background: radial-gradient(1200px 800px at 10% 10%, rgba(139,92,246,0.15), transparent),
                    radial-gradient(1200px 800px at 90% 20%, rgba(34,211,238,0.12), transparent),
                    var(--bg);
        color: var(--text);
        min-height: 100dvh; display: grid; place-items: center; padding: 2rem;
    }
    .card {
        width: 100%; max-width: 650px; background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
        border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 1.5rem 1.25rem 1.75rem;
        backdrop-filter: blur(6px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    h1 { margin: 0 0 0.75rem; font-size: 1.75rem; letter-spacing: .3px; }
    p.lead { margin-top: 0; color: var(--muted); }
    form { margin-top: 1rem; display: grid; gap: 1rem; }
    .field { display: grid; gap: .4rem; }
    label { color: var(--muted); font-size: .95rem; }
    input[type="number"], input[type="text"] {
        background: rgba(17,24,39,0.85); border: 1px solid rgba(255,255,255,0.08); color: var(--text);
        padding: .8rem .85rem; border-radius: 12px; font-size: 1rem; outline: none;
    }
    input[type="number"]:focus, input[type="text"]:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(34,211,238,0.18); }
    .row { display: flex; gap: .7rem; flex-wrap: wrap; }
    .btn {
        border: none; background: linear-gradient(90deg, var(--accent), var(--accent-2));
        color: #0b1020; font-weight: 700; padding: .85rem 1rem; border-radius: 12px; cursor: pointer;
        transition: transform .04s ease-in-out, filter .2s ease;
    }
    .btn:hover { filter: brightness(1.08); }
    .btn:active { transform: translateY(1px); }
    .btn.secondary {
        background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,0.18);
    }
    .msg { padding: .9rem 1rem; border-radius: 12px; line-height: 1.45; }
    .msg.error { border: 1px solid rgba(239,68,68,.4); background: rgba(239,68,68,.08); color: #fecaca; }
    .msg.hint { border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.08); color: #fde68a; }
    .msg.success { border: 1px solid rgba(34,197,94,.35); background: rgba(34,197,94,.08); color: #bbf7d0; }
    .muted { color: var(--muted); font-size: .95rem; }
    .divider { height: 1px; background: rgba(255,255,255,0.08); margin: .75rem 0 0; }
    .sr { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .footer-note { margin-top: 1rem; font-size: .85rem; color: var(--muted); text-align: center; }


.s-2332dd { margin: .5rem 0 0 1rem; }

.s-5f8f4a { display:inline; }

.s-4838e7 { margin-top:.5rem; }

.s-78427c { margin-top:1rem; }