/* ══════════════════════════════════════════════════════════════════════════
   Ekrany wejścia do aplikacji: login.php i setup.php (wersja demonstracyjna).
   Ładowane tylko tam — reszta aplikacji tego arkusza nie widzi.

   Zasada marki obowiązuje dalej: zero zaokrągleń (v2.css wymusza to globalnie
   przez border-radius: 0 !important), więc kompozycja jest z prostokątów,
   a „nowoczesność" robią gradient, siatka i typografia.
   ══════════════════════════════════════════════════════════════════════════ */

.v2-auth-body {
    display: block;
    min-height: 100dvh;
    margin: 0;
    background: var(--tn-bg);
    color: var(--tn-dark);
}

.v2-auth {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    min-height: 100dvh;
}

/* ── Lewa strona: marka ─────────────────────────────────────────────────── */
.v2-auth-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(2rem, 5vw, 4.5rem);
    background:
        radial-gradient(120% 90% at 12% 8%, rgba(0, 235, 200, .22) 0%, rgba(0, 235, 200, 0) 46%),
        radial-gradient(110% 80% at 92% 92%, rgba(228, 58, 241, .28) 0%, rgba(228, 58, 241, 0) 50%),
        linear-gradient(155deg, var(--tn-dark) 0%, #000f6b 48%, var(--tn-blue) 100%);
    color: #fff;
}

/* Delikatna siatka techniczna — daje głębię bez obrazka (i bez requestu). */
.v2-auth-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(125deg, #000 8%, transparent 72%);
    -webkit-mask-image: linear-gradient(125deg, #000 8%, transparent 72%);
    pointer-events: none;
}

.v2-auth-hero > * { position: relative; z-index: 1; }

.v2-auth-hero .v2-brand,
.v2-auth-hero .v2-brand:hover {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .v2-auth-hero .v2-brand {
        background-image: linear-gradient(96deg, #ffffff 0%, #d9dcff 42%, var(--tn-turquoise) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

.v2-auth-hero .v2-brand::before {
    background: var(--tn-turquoise);
    box-shadow: 0 0 0 6px rgba(0, 235, 200, .16);
}

.v2-auth-tagline {
    margin: 1.35rem 0 0;
    max-width: 30ch;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
}

.v2-auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.75rem;
    padding: .3rem .7rem;
    border: 1px solid rgba(255, 255, 255, .28);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}

.v2-auth-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--tn-light-green);
}

.v2-auth-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .55rem;
    font-size: .92rem;
    color: rgba(255, 255, 255, .78);
}

.v2-auth-points li {
    display: flex;
    align-items: baseline;
    gap: .6rem;
}

.v2-auth-points li::before {
    content: "";
    width: 14px;
    height: 2px;
    flex: 0 0 auto;
    background: var(--tn-turquoise);
    transform: translateY(-3px);
}

/* ── Prawa strona: formularz ────────────────────────────────────────────── */
.v2-auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    background: var(--tn-white);
}

.v2-auth-form {
    width: 100%;
    max-width: 25rem;
}

.v2-auth-title {
    margin: 0 0 .4rem;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--tn-dark);
}

.v2-auth-lead {
    margin: 0 0 1.9rem;
    color: var(--tn-gray-text);
    font-size: .93rem;
    line-height: 1.55;
}

.v2-auth-field { margin-bottom: 1.1rem; }

.v2-auth-field label {
    display: block;
    margin-bottom: .4rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tn-dark);
}

.v2-auth-field input,
.v2-auth-field select {
    width: 100%;
    height: 46px;
    padding: 0 .85rem;
    border: 1px solid var(--tn-border);
    background: var(--tn-white);
    font: inherit;
    font-size: .97rem;
    color: var(--tn-dark);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.v2-auth-field input:hover,
.v2-auth-field select:hover { border-color: #b9c3d2; }

.v2-auth-field input:focus,
.v2-auth-field select:focus {
    outline: none;
    border-color: var(--tn-blue);
    box-shadow: 0 0 0 3px rgba(0, 30, 210, .14);
}

.v2-auth-hint {
    margin: .4rem 0 0;
    font-size: .78rem;
    color: var(--tn-gray-text);
}

.v2-auth-submit {
    width: 100%;
    height: 48px;
    margin-top: .6rem;
    border: none;
    background: var(--tn-blue);
    color: #fff;
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s ease, transform .06s ease;
}

.v2-auth-submit:hover {
    background: linear-gradient(96deg, var(--tn-blue) 0%, var(--tn-purple) 130%);
}

.v2-auth-submit:active { transform: translateY(1px); }

.v2-auth-submit:focus-visible {
    outline: 3px solid var(--tn-turquoise);
    outline-offset: 2px;
}

.v2-auth-alert {
    margin: 0 0 1.4rem;
    padding: .8rem .95rem;
    border: 1px solid #f3b7bd;
    border-left: 4px solid var(--tn-red);
    background: #fff5f6;
    color: #8c1b26;
    font-size: .9rem;
    line-height: 1.45;
}

.v2-auth-alert--info {
    border-color: #b9c3d2;
    border-left-color: var(--tn-blue);
    background: #f2f5ff;
    color: var(--tn-dark);
}

.v2-auth-note {
    margin: 1.6rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--tn-border);
    font-size: .82rem;
    line-height: 1.5;
    color: var(--tn-gray-text);
}

.v2-auth-sql {
    margin: .9rem 0 0;
    padding: .85rem;
    overflow-x: auto;
    background: #0f1533;
    color: #d7dcff;
    font-family: Consolas, "Courier New", monospace;
    font-size: .76rem;
    line-height: 1.5;
}

/* ── Telefon / wąskie okno ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .v2-auth { grid-template-columns: 1fr; }

    .v2-auth-hero {
        min-height: auto;
        padding: 1.75rem 1.5rem 2rem;
        gap: 1.2rem;
    }

    .v2-auth-hero::after { background-size: 34px 34px; }

    .v2-auth-points { display: none; }

    .v2-auth-tagline {
        margin-top: .9rem;
        font-size: .95rem;
    }

    .v2-auth-panel {
        padding: 1.75rem 1.5rem 2.5rem;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v2-auth-submit,
    .v2-auth-field input,
    .v2-auth-field select { transition: none; }
}