:root {
    --bg-1: #0f1222;
    --bg-2: #12172b;
    --acc-1: #7c5cff;
    --acc-2: #00d4ff;
    --txt: #e5e7eb;
    --muted: #9ca3af;
    --card: #101423cc;
    --border: #ffffff1a;
    --shadow: 0 20px 50px rgba(0, 0, 0, .45);
    --radius: 18px;
}

html, body {
    height: 100%;
    color: #ffffff;
}

body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    color: var(--txt);
    background: radial-gradient(1200px 600px at 10% 10%, #222a57 0%, transparent 60%),
    radial-gradient(1000px 600px at 90% 20%, #1c375b 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
    background-attachment: fixed;
}

.navbar {
    backdrop-filter: saturate(1.2) blur(10px);
    background: #0b0f1dcc !important;
    border-bottom: 1px solid var(--border);
}

.navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    letter-spacing: .2px;
}

.brand-dot {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--acc-1), var(--acc-2));
    box-shadow: 0 0 18px #7c5cff66, 0 0 24px #00d4ff55 inset;
}

main.container {
    min-height: calc(100dvh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.glass-card {
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    overflow: hidden;
}

.accent-text {
    background: linear-gradient(135deg, var(--acc-1), var(--acc-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.btn-accent {
    background: linear-gradient(135deg, var(--acc-1), var(--acc-2));
    border: none;
    color: white;
    box-shadow: 0 10px 20px #00000040, 0 0 0 1px #ffffff14 inset;
}

.btn-accent:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.form-control, .form-check-input {
    background-color: #0c1122;
    border: 1px solid var(--border);
    color: var(--txt);
}

.form-control:focus {
    border-color: #6f6cff;
    box-shadow: 0 0 0 .25rem #7c5cff33;
    background-color: #0c1122;
    color: var(--txt);
}

.form-control:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .28rem #00d4ff33;
}

.form-floating > label {
    color: var(--muted);
}

.link-muted {
    color: var(--muted);
}

.link-muted:hover {
    color: #cfd4dc;
}

.shine {
    position: relative;
    isolation: isolate;
}

.shine::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--radius) + 2px);
    background: conic-gradient(from 180deg at 50% 50%, #ffffff10 0deg, #ffffff05 120deg, #ffffff00 180deg, #ffffff05 240deg, #ffffff10 360deg);
    mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    animation: spin 8s linear infinite;
    pointer-events: none; /* nie blokuje kliknięć */
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* === Ulepszenia czytelności pól formularza + mobile/autofill === */
.form-control,
.form-select {
    background-color: #0e1733; /* jaśniejsze tło dla lepszego kontrastu */
    color: #f2f4f8; /* jasny tekst */
    caret-color: #f2f4f8;
    border: 1px solid var(--border);
}

.form-control::placeholder {
    color: #cfd8ea;
    opacity: .4;
}

.form-floating > label {
    color: #bec7d6;
}

.form-control:focus,
.form-select:focus {
    background-color: #0e1733;
    color: #ffffff;
    border-color: #8b86ff;
    box-shadow: 0 0 0 .25rem rgba(124, 92, 255, .35);
}

/* Autofill (Chrome/Safari) – bez żółtego tła */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #0e1733 inset;
    -webkit-text-fill-color: #f2f4f8 !important;
    caret-color: #f2f4f8;
}

/* Mobile UX */
@media (max-width: 576px) {
    .form-control, .form-select {
        min-height: 52px;
        padding: .875rem 1rem;
        font-size: 16px; /* ≥16px = brak auto-zoomu iOS */
    }


    body::before {
        position: absolute;
        background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
    }
}

/* Light mode: dobry kontrast */
@media (prefers-color-scheme: light) {
    :root {
        --txt: #0b1220;
        --muted: #5b6472;
        --card: #ffffffcc;
        --bg-1: #f4f6fb;
        --bg-2: #e9eef8;
        --border: #00000010;
    }

    .navbar {
        background: #ffffffb3 !important;
    }

    .form-control, .form-select {
        background-color: #ffffff;
        color: #0b1220;
        border: 1px solid var(--border);
    }

    .form-control::placeholder {
        color: #667085;
    }

    .form-control:focus, .form-select:focus {
        border-color: #6f6cff;
        box-shadow: 0 0 0 .25rem rgba(124, 92, 255, .20);
    }

    input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
        -webkit-text-fill-color: #0b1220 !important;
    }

    body {
        background: radial-gradient(1200px 600px at 10% 10%, #cfe3ff 0%, transparent 60%),
        radial-gradient(1000px 600px at 90% 20%, #e5d8ff 0%, transparent 60%),
        linear-gradient(180deg, var(--bg-1), var(--bg-2));
    }
}

/* Navbar: lepszy kontrast linków + focus/active */
.navbar .nav-link {
    color: #dfe4ee;
    opacity: .88;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    opacity: 1;
}

.navbar .nav-link.active {
    color: #ffffff;
    position: relative;
}

.navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .45rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--acc-1), var(--acc-2));
}

.navbar-dark .navbar-toggler {
    border-color: #ffffff33;
}

.navbar-dark .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem #7c5cff44;
}

/* Logout outline: lepszy kontrast */
.btn-outline-light {
    border-color: #ffffff80;
    color: #f8fafc;
}

.btn-outline-light:hover {
    background: #ffffff1a;
}

/* Jeśli używasz .option-pill – aktywny wybór */
.btn-outline-light.option-pill.active {
    background: linear-gradient(135deg, var(--acc-1), var(--acc-2));
    border-color: transparent;
    color: #fff;
}

/* Preferencje dostępności: ogranicz animacje */
@media (prefers-reduced-motion: reduce) {
    .shine::after {
        animation: none;
    }
}

#editStepModal .modal-title {
    color: #fff;
}

#editStepModal .form-floating > label {
    color: #fff;
    opacity: .95;
}

/* Dropdown in navbar: dark glass look */
.navbar .dropdown-menu {
    background: #0b0f1dcc; /* półprzezroczysty ciemny */
    backdrop-filter: saturate(1.2) blur(10px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    color: var(--txt);
    min-width: 220px;
}

.navbar .dropdown-item {
    color: #e8ecf4;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    color: #ffffff;
    background: linear-gradient(135deg, #7c5cff22, #00d4ff22);
}

.navbar .dropdown-divider {
    border-top-color: #ffffff26;
}

@media (prefers-color-scheme: light) {
    .navbar .dropdown-menu {
        background: #ffffffcc;
        border: 1px solid var(--border);
        backdrop-filter: blur(10px);
        color: #0b1220;
    }

    .navbar .dropdown-item {
        color: #0b1220;
    }

    .navbar .dropdown-item:hover {
        background: #00000008;
    }
}

/* Glass pagination */
.pagination-glass .page-link {
    background: #0e1430cc; /* półprzezroczyste szkło */
    backdrop-filter: saturate(1.1) blur(8px);
    border: 1px solid var(--border);
    color: var(--txt);
    box-shadow: var(--shadow);
    border-radius: 999px; /* pill */
    padding: .5rem .9rem;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.pagination-glass .page-link:hover {
    transform: translateY(-1px);
    background: #141b3acc;
    color: #fff;
}

.pagination-glass .page-item.active .page-link {
    background: linear-gradient(135deg, var(--acc-1), var(--acc-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px #00000055, 0 0 0 1px #ffffff20 inset;
}

.pagination-glass .page-item.disabled .page-link {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.pagination-glass .page-link:focus {
    outline: none;
    box-shadow: 0 0 0 .25rem #7c5cff33;
}

/* Zwarta separacja: usuń przerwy między elementami, ale zostaw odstępy wizualne dzięki zaokrągleniom */
.pagination-glass .page-item:not(:last-child) .page-link {
    margin-right: .4rem;
}

/* Jasny motyw */
@media (prefers-color-scheme: light) {
    .pagination-glass .page-link {
        background: #ffffffcc;
        color: var(--txt);
        border: 1px solid var(--border);
    }

    .pagination-glass .page-link:hover {
        background: #ffffff;
    }

    .pagination-glass .page-item.active .page-link {
        color: #fff;
    }
}

.modal-content.glass-card {
    background: #101423;
    color: #ffffff;
    border: 1px solid var(--border);
}

@media (prefers-color-scheme: light) {
    .modal-content.glass-card {
        background: #ffffff;
    }
}