:root {
            --bg: #111;
            --card: #222;
            --muted: #ccc;
            --accent: #fff;
            --input: #ccc;
            --radius: 12px;
            --glass: rgba(255, 255, 255, 0.03);
        }

        * {
            box-sizing: border-box;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        html,
        body {
            height: 100%
        }

        body {
            margin: 0;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
            background: var(--bg);
            color: #e6eef8;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px;
        }

        .card {
            width: 100%;
            max-width: 760px;
            /* background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); */
            border-radius: var(--radius);
            padding: 28px;
            /* box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02); */
            border: 1px solid rgba(255, 255, 255, 0.03);
        }

        h1 {
            margin: 0 0 6px 0;
            font-size: 20px
        }

        p.lead {
            margin: 0 0 20px 0;
            color: var(--muted);
            font-size: 14px
        }

        form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px
        }

        .full {
            grid-column: 1 / -1
        }

        label {
            display: block;
            font-size: 13px;
            margin-bottom: 6px;
            color: var(--muted)
        }

        input[type=text],
        input[type=email],
        textarea,
        select {
            width: 100%;
            padding: 12px 14px;
            background: var(--glass);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.04);
            color: inherit;
            font-size: 14px;
            outline: none;
            transition: box-shadow 160ms, border-color 160ms, transform 160ms;
            resize: vertical;
            min-height: 44px;
            resize: none;
        }

        input:focus,
        textarea:focus,
        select:focus {
            border-color: var(--accent);
            /* box-shadow: 0 6px 20px rgba(124,58,237,0.12), 0 0 0 4px rgba(124,58,237,0.06); */
            transform: translateY(-1px);
        }

        textarea {
            min-height: 140px
        }

        .row {
            display: flex;
            gap: 10px
        }

        .help {
            font-size: 12px;
            color: var(--muted);
            margin-top: 6px
        }

        .actions {
            display: flex;
            gap: 10px;
            align-items: center
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            justify-content: center;
            padding: 10px 14px;
            border-radius: 10px;
            border: 0;
            cursor: pointer;
            font-weight: 600;
            background: linear-gradient(180deg, var(--accent));
            color: var(--card);
            box-shadow: 0 6px 18px rgba(11, 12, 18, 0.6);
            width: 100%;
        }

        .btn.secondary {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.04);
            color: var(--muted);
            font-weight: 600;
            padding: 9px 12px;
        }

        .note {
            font-size: 13px;
            color: var(--muted)
        }

        .field-error {
            color: #ffb4b4;
            font-size: 13px;
            margin-top: 6px
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0
        }

        /* responsive */
        @media (max-width:720px) {
            form {
                grid-template-columns: 1fr
            }
        }

        /* success / error banners */
        .banner {
            padding: 10px 12px;
            border-radius: 10px;
            margin-bottom: 12px;
            font-size: 14px;
            display: none
        }

        .banner.show {
            display: block
        }

        .banner.success {
            background: linear-gradient(180deg, rgba(72, 187, 120, 0.12), rgba(72, 187, 120, 0.04));
            border: 1px solid rgba(72, 187, 120, 0.12);
            color: #c9f7de
        }

        .banner.error {
            background: linear-gradient(180deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.02));
            border: 1px solid rgba(239, 68, 68, 0.08);
            color: #ffd6d6
        }

        .btn.disable {
            opacity: 0.5;
            pointer-events: none;
        }

        .loader.active::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -30px;
            margin-left: -30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 5px solid #ccc;
            border-top-color: #666;
            animation: loading 2s linear infinite;
        }

        @keyframes loading {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .loader {
            display: none;
        }

        .loader.active {
            display: block;
            width: 100%;
            height: 100vh;
            height: 100svh;
            background: #111;
            position: fixed;
            top: 0;
            overflow: hidden;
        }