/* login.css — Pagina di accesso FLAC Hub (split-screen brand + form). */

:root {
    --fhl-purple: #7c3aed;
    --fhl-purple2: #9b6dff;
    --fhl-dark: #1a1040;
    --fhl-ink: #2a2a3c;
    --fhl-muted: #8a8aa3;
    --fhl-line: #e9e7f3;
}

body.text-left { background: #f4f2fb; }

.fhl {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
    font-family: "Nunito", system-ui, sans-serif;
}

/* ---------- HERO (sinistra) ---------- */
.fhl-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1100px 600px at 15% -10%, #5b21b6 0%, transparent 55%),
                linear-gradient(150deg, #2a1466 0%, #1a1040 60%, #130d24 100%);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 56px 6vw;
}
.fhl-hero-inner { position: relative; z-index: 2; max-width: 460px; }
.fhl-logo { font-size: 26px; font-weight: 900; letter-spacing: -.5px; }
.fhl-logo .hex { color: #fbbf24; }
.fhl-logo .accent { color: var(--fhl-purple2); }
.fhl-title { font-size: 34px; line-height: 1.15; font-weight: 900; margin: 28px 0 14px; color: #fff !important; }
.fhl-lead { font-size: 16px; line-height: 1.6; color: rgba(237,233,254,.82); margin-bottom: 30px; }

.fhl-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.fhl-feats li { display: flex; align-items: center; gap: 14px; }
.fhl-ico {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.fhl-feats li div { display: flex; flex-direction: column; line-height: 1.3; }
.fhl-feats li b { font-size: 15px; font-weight: 800; }
.fhl-feats li span { font-size: 13px; color: rgba(237,233,254,.6); }
.fhl-hero-foot { margin-top: 40px; font-size: 12.5px; color: rgba(237,233,254,.5); }

/* orb decorativi */
.fhl-orb { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .5; z-index: 1; }
.fhl-orb1 { width: 320px; height: 320px; right: -90px; top: -60px; background: radial-gradient(circle, rgba(155,109,255,.55), transparent 70%); }
.fhl-orb2 { width: 260px; height: 260px; right: 10%; bottom: -110px; background: radial-gradient(circle, rgba(251,191,36,.28), transparent 70%); }

/* ---------- PANNELLO LOGIN (destra) ---------- */
.fhl-panel { display: flex; align-items: center; justify-content: center; padding: 48px 5vw; background: #f4f2fb; }
.fhl-card {
    width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--fhl-line);
    border-radius: 20px; padding: 38px 34px; box-shadow: 0 20px 60px rgba(44,28,80,.10);
}
.fhl-logo.sm { display: none; font-size: 22px; margin-bottom: 18px; color: var(--fhl-ink); }
.fhl-logo.sm .accent { color: var(--fhl-purple); }
.fhl-card h2 { font-size: 24px; font-weight: 900; color: var(--fhl-ink); margin: 0 0 4px; }
.fhl-sub { font-size: 14px; color: var(--fhl-muted); margin-bottom: 24px; }

.fhl-card .field { margin-bottom: 16px; }
.fhl-card label { display: block; font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 6px; }
.fhl-card input {
    width: 100%; padding: 13px 15px; border: 1px solid #e2e0ee; border-radius: 11px;
    font-size: 15px; font-family: inherit; outline: none; transition: .15s; background: #fbfaff;
}
.fhl-card input:focus { border-color: var(--fhl-purple); box-shadow: 0 0 0 4px rgba(124,58,237,.12); background: #fff; }

.fhl-forgot { text-align: right; margin: -4px 0 16px; }
.fhl-forgot a { font-size: 13px; color: var(--fhl-purple); text-decoration: none; font-weight: 600; }
.fhl-forgot a:hover { text-decoration: underline; }

.btn-fh {
    width: 100%; border: 0; cursor: pointer; padding: 14px; border-radius: 12px;
    background: linear-gradient(135deg, var(--fhl-purple), var(--fhl-purple2));
    color: #fff; font-size: 16px; font-weight: 800; font-family: inherit; transition: .15s;
    box-shadow: 0 8px 22px rgba(124,58,237,.30);
}
.btn-fh:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-fh:disabled { opacity: .6; cursor: default; transform: none; }

.fhl-help { text-align: center; font-size: 13.5px; color: var(--fhl-muted); margin-top: 22px; }
.fhl-help a { color: var(--fhl-purple); text-decoration: none; font-weight: 700; }

.alert-fh { padding: 11px 15px; border-radius: 11px; font-size: 13.5px; margin-bottom: 16px; }
.alert-fh.warn { background: #fff4e5; border: 1px solid #ffd8a8; color: #9a5b00; }
.alert-fh.ok { background: #e8f8ef; border: 1px solid #b6e6c9; color: #14794a; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
    .fhl { grid-template-columns: 1fr; }
    .fhl-hero { display: none; }
    .fhl-logo.sm { display: block; }
    .fhl-panel { padding: 32px 20px; align-items: flex-start; }
    .fhl-card { margin-top: 24px; }
}