/* ============================================
   AUTH (login / register) — entiway.com look
   Borderless, enlarged, "pasted into the page".
   Loaded only on auth pages, so :root overrides
   here are scoped to these screens.
   ============================================ */

:root {
    /* — Surfaces (graphite, matching entiway.com) — */
    --bg:       #0a0d12;
    --bg2:      #0e131b;
    --card:     #141a24;

    /* — Text ramp — */
    --text:     #f3f6fb;
    --text2:    #a7b2c4;
    --muted:    #66728a;

    /* — Accent (blue → cyan) — */
    --accent:      #3b82f6;
    --accent-mid:  #0ea5b7;
    --accent-end:  #22d3ee;
    --accent-glow: rgba(34,211,238,0.20);
    /* keep --accent2 alias used by inline blade styles → cyan */
    --accent2:     #22d3ee;

    /* — Live accent (electric lime) — */
    --live:        #a3e635;
    --live-glow:   rgba(163,230,53,0.15);

    /* — Semantic — */
    --green:    #2ee06a;
    --red:      #fb5252;

    /* — Hairlines — */
    --border:   rgba(255,255,255,0.09);
    --border2:  rgba(255,255,255,0.16);
    --subtle:   rgba(255,255,255,0.04);

    /* — Fonts (Space Grotesk forward; Instrument Serif accent only) — */
    --display:  'Space Grotesk', system-ui, sans-serif;
    --sans:     'Space Grotesk', system-ui, -apple-system, sans-serif;
    --mono:     'JetBrains Mono', ui-monospace, monospace;

    --radius:   12px;
    --ease:     0.2s cubic-bezier(0.4,0,0.2,1);
}

/* ── PAGE — ambient instrument grid (entiway.com signature) ── */
html {
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 88% -8%, var(--accent-glow) 0%, transparent 42%),
        radial-gradient(circle at 6% 108%, var(--live-glow) 0%, transparent 46%),
        linear-gradient(var(--subtle) 1px, transparent 1px),
        linear-gradient(90deg, var(--subtle) 1px, transparent 1px);
    background-size: auto, auto, 52px 52px, 52px 52px;
    background-attachment: fixed;
}

.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: transparent;
    font-family: var(--sans);
}

/* ── WRAP — wider so the form reads as embedded, not boxed ── */
.auth-wrap {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* kontekst pozycjonowania dla switchera w prawym górnym rogu WIDGETU */
    position: relative;
}

/* Switcher języka — prawy górny róg widgetu logowania (wyrównany do prawej
   krawędzi karty), nie do rogu ekranu i nie obok środka. */
.auth-wrap__lang {
    position: absolute;
    top: 0;
    right: 0;
}

/* ── BRAND ── */
.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-bottom: 2.75rem;
}
.auth-brand__name {
    font-family: var(--display);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text);
}
.auth-brand__name span { color: var(--accent-end); }

/* ── CARD — borderless, transparent: "pasted into the page" ── */
.auth-card {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}
.auth-card__header {
    padding: 0 0 1.75rem;
    border-bottom: none;
    text-align: center;
}
.auth-card__label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-end);
    margin-bottom: 0.625rem;
}
.auth-card__title {
    font-family: var(--display);
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text);
}
.auth-card__desc {
    margin-top: 0.625rem;
    font-size: 0.9375rem;
    color: var(--text2);
    font-weight: 300;
    line-height: 1.6;
}
.auth-card__body {
    padding: 0;
}
.auth-card__footer {
    padding: 1.75rem 0 0;
    border-top: none;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--text2);
    font-weight: 300;
}
.auth-card__footer a {
    color: var(--accent-end);
    font-weight: 500;
    transition: opacity var(--ease);
}
.auth-card__footer a:hover { opacity: 0.8; }

/* ── ALERTS ── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 1.125rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.55;
}
.alert-error {
    background: rgba(251,82,82,0.08);
    border: 1px solid rgba(251,82,82,0.22);
    color: var(--red);
}
.alert-success {
    background: rgba(46,224,106,0.08);
    border: 1px solid rgba(46,224,106,0.22);
    color: var(--green);
}
.alert__icon { flex-shrink: 0; margin-top: 1px; }

/* ── FORM — enlarged ── */
.form-group { margin-bottom: 1.375rem; }
.form-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text2);
    margin-bottom: 0.55rem;
}
.form-input {
    width: 100%;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--text);
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.form-input:focus {
    border-color: var(--accent-end);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-input::placeholder { color: var(--muted); }
.form-input.is-error { border-color: var(--red); }
.form-hint {
    margin-top: 0.45rem;
    font-size: 0.8125rem;
    color: var(--muted);
    font-weight: 300;
}

/* ── BUTTON — entiway gradient + glow ── */
.btn-auth {
    width: 100%;
    padding: 0.95rem 1rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-mid));
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(37,99,235,0.2);
    transition: box-shadow var(--ease), transform var(--ease);
    margin-top: 0.75rem;
}
.btn-auth:hover {
    box-shadow: 0 0 40px rgba(37,99,235,0.35);
    transform: translateY(-1px);
}
.btn-auth:active { transform: translateY(0); }

/* ── HONEYPOT ── */
.hp-field { display: none; }