:root {
    --bg: #07111f;
    --bg2: #0b1627;
    --surface: #0f1b31;
    --surface2: #16233d;
    --border: #263852;
    --text: #f8fafc;
    --text2: #cbd5e1;
    --muted: #94a3b8;
    --blue: #2563eb;
    --green: #22c55e;
    --red: #dc2626;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: linear-gradient(180deg,var(--bg),var(--bg2));
    color: var(--text);
    font-family: Segoe UI,Arial,sans-serif;
}

body {
    background-attachment: fixed;
}

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 12px;
    background: transparent !important;
}

/* ---------- Eingabefelder ---------- */

.form-control,
.form-select,
input[type=text],
input[type=password] {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
}

    .form-control:focus,
    .form-select:focus {
        background: var(--surface);
        color: var(--text);
        border-color: var(--blue);
        box-shadow: 0 0 0 .15rem rgba(37,99,235,.25);
    }

::placeholder {
    color: var(--muted) !important;
}

/* ---------- Checkbox ---------- */

.form-check-input {
    background-color: var(--surface2);
    border-color: #4b5563;
}

    .form-check-input:checked {
        background-color: var(--blue);
        border-color: var(--blue);
    }

.form-check-label {
    color: var(--text2);
}

/* ---------- Buttons ---------- */

.btn-outline-danger {
    color: #f87171;
    border-color: #ef4444;
}

    .btn-outline-danger:hover,
    .btn-danger {
        background: #dc2626;
        border-color: #dc2626;
    }

.btn-outline-primary {
    color: #60a5fa;
    border-color: #2563eb;
}

.btn-outline-warning {
    color: #facc15;
    border-color: #eab308;
}

/* ---------- Modals ---------- */

.modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}

.modal-header,
.modal-footer {
    border-color: var(--border);
}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #08101d;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #475569;
    }

/* =========================================================
   LOGIN
========================================================= */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,#07111f,#0b1627);
}

.login-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 20px;
}

.login-card {
    background: linear-gradient(180deg,#0b1730,#091426);
    border: 1px solid #28405f;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 12px 28px rgba(0,0,0,.45);
}

.login-logo {
    text-align: center;
    margin-bottom: 26px;
}

    .login-logo h2 {
        color: #fff;
        font-weight: 700;
        margin: 14px 0 4px;
    }

    .login-logo p {
        color: #94a3b8;
        margin: 0;
        font-size: 14px;
    }

.login-card .form-label {
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
}

.login-btn {
    height: 44px;
    border-radius: 12px;
    font-weight: 600;
}

/* Pokéball */

.pokeball {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border-radius: 50%;
    position: relative;
    background: linear-gradient(to bottom,#ef4444 0 50%,#ffffff 50% 100%);
    border: 3px solid #111827;
    box-shadow: 0 0 18px rgba(239,68,68,.35);
}

    .pokeball::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 4px;
        transform: translateY(-50%);
        background: #111827;
    }

    .pokeball::after {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        border: 4px solid #111827;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }