/* ========== Liquid Glass (Apple-like) ========== */
:root{
    /* colori dal logo */
    --lg-yellow: rgba(255, 209, 77, .55);
    --lg-blue:   rgba( 46, 173, 232, .40);
    --lg-green:  rgba(142, 201,  60, .35);
    --lg-orange: rgba(244,  95,  52, .28);
    --lg-pink:   rgba(232, 140, 190, .28);
    --lg-teal:   rgba(120, 210, 205, .22);

    /* base chiara “iOS” */
    --lg-bg: #f6f8ff;
    --lg-bg-2: #ffffff;

    /* vetro più chiaro (su sfondo chiaro) */
    --lg-glass: rgba(255,255,255,.55);
    --lg-glass-2: rgba(255,255,255,.35);
    --lg-stroke-soft: rgba(0,0,0,.08);

    --lg-text: rgba(12,18,28,.92);
    --lg-text-dim: rgba(12,18,28,.68);
    --lg-shadow: 0 18px 60px rgba(16,24,40,.18);
}

/* Sfondo “colorato” coerente col logo */
.lg-page{
    min-height: 100vh;
    color: var(--lg-text);
    background:
            radial-gradient(900px 520px at 15% 18%, var(--lg-yellow), transparent 60%),
            radial-gradient(820px 520px at 85% 15%, var(--lg-blue), transparent 58%),
            radial-gradient(820px 560px at 18% 82%, var(--lg-orange), transparent 62%),
            radial-gradient(900px 560px at 85% 82%, var(--lg-pink), transparent 62%),
            radial-gradient(700px 520px at 52% 55%, var(--lg-green), transparent 65%),
            linear-gradient(180deg, var(--lg-bg), var(--lg-bg-2));
    position: relative;
    overflow: hidden;
}

/* grana leggerissima */
.lg-page::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    opacity:.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* card glass: su sfondo chiaro meglio “milky glass” */
.lg-card{
    background: linear-gradient(180deg, var(--lg-glass), var(--lg-glass-2));
    border: 1px solid var(--lg-stroke-soft);
    box-shadow: var(--lg-shadow);
    border-radius: 26px;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Bordo “lucido” in alto + riflesso */
.lg-card::before{
    content:"";
    position:absolute; inset:0;
    border-radius: 26px;
    padding:1px;
    background: linear-gradient(180deg,
    rgba(255,255,255,.35),
    rgba(255,255,255,.08) 35%,
    rgba(255,255,255,.06));
    -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events:none;
    opacity:.65;
}

/* Glow morbido dietro la card */
.lg-glow{
    position: relative;
}
.lg-glow::after{
    content:"";
    position:absolute;
    inset:-70px -90px;
    background:
            radial-gradient(520px 260px at 20% 20%, var(--lg-yellow), transparent 60%),
            radial-gradient(520px 260px at 85% 25%, var(--lg-blue), transparent 62%),
            radial-gradient(520px 260px at 30% 92%, var(--lg-orange), transparent 65%),
            radial-gradient(520px 260px at 78% 92%, var(--lg-pink), transparent 65%),
            radial-gradient(560px 280px at 55% 55%, var(--lg-green), transparent 68%);
    filter: blur(18px);
    z-index:-1;
    opacity:.95;
}

/* Tipografia più “iOS” */
.lg-page h1, .lg-page h2, .lg-page p, .lg-page label, .lg-page a{
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.lg-page h1{
    letter-spacing: .2px;
}
.lg-page h2{
    color: var(--lg-text);
}
.lg-page p{
    color: var(--lg-text-dim);
}

/* Inputs glass */
.lg-page .inputContainer{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding: 10px 12px;
    transition: transform .12s ease, border-color .18s ease, background .18s ease;
}

.lg-page .inputContainer:focus-within{
    transform: translateY(-1px);
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.22);
}

.lg-page input{
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    color: var(--lg-text) !important;
}

.lg-page input::placeholder{
    color: rgba(255,255,255,.55);
}

/* Bottoni in stile “capsule” */
.lg-page .button,
.lg-page .elevatedButton,
.lg-page .outlinedButton,
.lg-page .textButton{
    border-radius: 999px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Primary button: “liquid” */
.lg-page .button{
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 10px 28px rgba(0,0,0,.32);
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.lg-page .button:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(0,0,0,.40);
}
.lg-page .button:active{
    transform: translateY(0px) scale(.99);
}

/* Outlined: vetro leggero */
.lg-page .outlinedButton{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
}

/* Link più “soft” */
.lg-page a{
    color: rgba(190,220,255,.95);
    text-decoration: none;
}
.lg-page a:hover{
    text-decoration: underline;
}

/* Modals: anche loro glass */
.lg-page .modal-content{
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 22px !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 20px 70px rgba(0,0,0,.5) !important;
}

/* Toast/notification banner in vetro */
.lg-page .notificationBanner{
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 14px 45px rgba(0,0,0,.35);
}

/* rende più “pulita” la divisione sinistra/destra */
.lg-page .Login-container-left,
.lg-page .Login-container-right{
    background: transparent !important;
}

/* Accessibilità: se l’utente riduce trasparenze */
@media (prefers-reduced-transparency: reduce){
    .lg-card,
    .lg-page .modal-content,
    .lg-page .notificationBanner{
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(20,30,50,.92) !important;
    }
}

.lg-page .inputContainer{
    background: rgba(255,255,255,.60);
    border: 1px solid rgba(0,0,0,.08);
}

.lg-page input::placeholder{
    color: rgba(12,18,28,.45);
}