/* Theme hồng-xanh đồng bộ KT Launcher — nền ảnh đêm pháo hoa */
:root {
    --card: rgba(12, 14, 26, .78);
    --border: rgba(150, 190, 255, .42);
    --text: #eaf0fa;
    --muted: #9fb0cf;
    --accent-pink: #ec6ea0;
    --accent-blue: #6ea8ff;
    --btn-text: #58162f;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(rgba(8, 12, 24, .50), rgba(10, 8, 20, .62)),
        url("bg.jpg") center / cover no-repeat fixed,
        linear-gradient(135deg, #0d1220 0%, #1a1430 100%);
    color: var(--text);
    font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    padding: 20px;
    overflow-x: hidden;
}

.card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 26px;
    box-shadow: 0 12px 44px rgba(0, 0, 10, .55),
                0 0 60px rgba(110, 168, 255, .07);
    backdrop-filter: blur(6px);
}

.logo {
    display: block;
    margin: 0 auto 14px;
    max-width: 230px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .7));
}

h1 {
    margin: 0 0 4px;
    font-size: 22px;
    color: #ffb4d0;
    text-align: center;
}
.sub {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

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

input {
    width: 100%;
    margin-top: 6px;
    padding: 11px 12px;
    background: #141b2e;
    border: 1px solid #3a4a6b;
    border-radius: 8px;
    color: var(--text);
    font-size: 15px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(110, 168, 255, .18);
}
input::placeholder { color: #64749a; }

.cf-turnstile { margin: 6px 0 16px; }

button {
    width: 100%;
    padding: 12px;
    border: 1px solid #aa3c69;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffb9d2 0%, var(--accent-pink) 100%);
    color: var(--btn-text);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
    transition: filter .15s, transform .05s, box-shadow .15s;
}
button:hover {
    filter: brightness(1.07);
    box-shadow: 0 0 18px rgba(236, 110, 160, .35);
}
button:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: default; filter: none; box-shadow: none; }

.msg { margin-top: 14px; font-size: 14px; min-height: 20px; text-align: center; }
.msg.ok  { color: #8ee89a; }
.msg.err { color: #ff9d96; }