:root{
    --bg-main:#0f141b;
    --bg-panel:#161d26;
    --bg-soft:#1c2531;
    --txt:#e6e9ee;
    --muted:#a8b0bd;
    --accent:#3aa0ff;
    --accent-hover:#5bb2ff;
    --border:#2a3544;
    --error:#ff5c5c;
}

/* ================= BASE ================= */
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 
   BASE FONT:
   aumentata apposta per schermi ad alta densità
*/
html{
    font-size:17px;
}

body{
    background:linear-gradient(180deg,#0f141b,#0b0f14);
    color:var(--txt);
    line-height:1.55;
    -webkit-text-size-adjust:100%;
}

/* ================= LAYOUT ================= */
.wrapper{
    max-width:520px;
    margin:28px auto;
    padding:18px;
}

@media (min-width:480px){
    .wrapper{
        padding:24px;
    }
}

.panel{
    background:var(--bg-panel);
    border:1px solid var(--border);
    border-radius:18px;
    padding:22px;
}

@media (min-width:480px){
    .panel{
        padding:30px;
    }
}

/* ================= TITOLI ================= */
h1{
    text-align:center;
    font-size:clamp(2.1rem, 9vw, 2.8rem);
    margin-bottom:.5em;
    letter-spacing:.3px;
}

.subtitle{
    text-align:center;
    color:var(--muted);
    font-size:clamp(1.15rem, 5vw, 1.35rem);
    margin-bottom:2.2rem;
}

/* ================= NAV SWITCH ================= */
.nav{
    display:flex;
    gap:.7rem;
    margin-bottom:1.8rem;
}

.nav button{
    flex:1;
    background:var(--bg-soft);
    border:1px solid var(--border);
    color:var(--muted);
    padding:1rem .6rem;
    font-size:1.05rem;
    border-radius:14px;
    cursor:pointer;
}

.nav button.active{
    background:var(--accent);
    color:#fff;
}

/* ================= FORM ================= */
.form{
    display:none;
}

.form.active{
    display:block;
}

.field{
    margin-bottom:1.2rem;
}

label{
    display:block;
    font-size:1rem;
    color:var(--muted);
    margin-bottom:.45rem;
}

/* 
   INPUT GRANDI:
   leggibilità + touch
*/
input,
select{
    width:100%;
    padding:1rem .9rem;
    font-size:1.15rem;
    min-height:54px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--bg-soft);
    color:var(--txt);
}

/* ================= BUTTON ================= */
button.primary{
    width:100%;
    margin-top:1.2rem;
    padding:1.1rem;
    font-size:1.2rem;
    min-height:58px;
    border-radius:999px;
    border:none;
    background:var(--accent);
    color:#fff;
    font-weight:600;
    cursor:pointer;
}

button.primary:hover{
    background:var(--accent-hover);
}

/* ================= HELPER ================= */
.helper{
    margin-top:1.2rem;
    text-align:center;
    font-size:1rem;
    color:var(--muted);
}

.helper span{
    color:var(--accent);
    cursor:pointer;
}

/* ================= EXTRA SMALL ================= */
@media (max-width:360px){
    .nav{
        flex-direction:column;
    }
}

/* ================= TABLET / DESKTOP ================= */
@media (min-width:768px){
    html{
        font-size:16px;
    }

    .wrapper{
        margin-top:80px;
    }
}