: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;
}

/* MOBILE FIRST */
html{
    font-size:14px;
}

@media (min-width:480px){
    html{ font-size:15px; }
}

@media (min-width:1024px){
    html{ font-size:16px; }
}

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

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

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

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

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

/* ===== TITOLI ===== */
h1{
    text-align:center;
    font-size:clamp(1.4rem, 7vw, 2.2rem);
    margin-bottom:.4em;
}

.subtitle{
    text-align:center;
    color:var(--muted);
    font-size:clamp(.9rem, 4.5vw, 1.05rem);
    margin-bottom:2rem;
}

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

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

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

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

.form.active{
    display:block;
}

.field{
    margin-bottom:1rem;
}

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

input,
select{
    width:100%;
    padding:.85rem .75rem;
    font-size:1rem;
    min-height:46px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--bg-soft);
    color:var(--txt);
}

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

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

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

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

/* ===== TABLET ===== */
@media (min-width:768px){
    .wrapper{
        margin-top:80px;
    }
}