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

*{box-sizing:border-box;font-family:system-ui}


body{
    margin:0;
    background:linear-gradient(180deg,#0f141b,#0b0f14);
    color:var(--txt);
}


    html{
        font-size: clamp(14px, 2.5vw, 16px);
    }

    body{
        -webkit-text-size-adjust: 100%;
    }


.wrapper{
    max-width:520px;
    margin:60px auto;
    padding:20px;
}

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

    .wrapper{
        max-width: 520px;
        margin: 0 auto;
        padding: clamp(16px, 4vw, 28px);
    }

    .panel{
        padding: clamp(22px, 5vw, 36px);
        border-radius: 14px;
    }


h1{
    text-align:center;
    margin-bottom:10px;
}

.subtitle{
    text-align:center;
    color:var(--muted);
    margin-bottom:30px;
}

    h1{
        font-size: clamp(1.6rem, 5vw, 2.2rem);
        margin-bottom: .4em;
    }

    .subtitle{
        font-size: clamp(.95rem, 3.5vw, 1.05rem);
        margin-bottom: 2rem;
    }

    .section-title{
        font-size: clamp(1.2rem, 4vw, 1.5rem);
    }



.nav{
    display:flex;
    gap:10px;
    margin-bottom:25px;
}

.nav button{
    flex:1;
    background:var(--bg-soft);
    border:1px solid var(--border);
    color:var(--muted);
    padding:10px;
    border-radius:8px;
    cursor:pointer;
}


    .nav{
        gap: .6rem;
    }

    .nav button{
        padding: .65rem .4rem;
        font-size: clamp(.8rem, 3vw, .9rem);
        border-radius: 10px;
    }


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

.form{
    display:none;
}

.form.active{
    display:block;
}


.field{
    margin-bottom:15px;
}

label{
    display:block;
    font-size:.85rem;
    color:var(--muted);
    margin-bottom:5px;
}

input, select{
    width:100%;
    padding:10px;
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--bg-soft);
    color:var(--txt);
}


    .field{
        margin-bottom: 1rem;
    }

    label{
        font-size: clamp(.75rem, 3vw, .85rem);
        margin-bottom: .35rem;
    }

    input, select{
        padding: .75rem .7rem;
        font-size: 1rem;
        border-radius: 10px;
        min-height: 44px; /* touch standard */
    }



button.primary{
    width:100%;
    padding:12px;
    margin-top:10px;
    background:var(--accent);
    border:none;
    border-radius:25px;
    color:#fff;
    font-weight:600;
    cursor:pointer;
}


    button.primary{
        padding: .9rem;
        font-size: clamp(.9rem, 3.5vw, 1rem);
        border-radius: 999px;
        min-height: 48px;
    }


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


.helper{
    margin-top:15px;
    text-align:center;
    font-size:.85rem;
    color:var(--muted);
}


    .helper{
        font-size: clamp(.75rem, 3vw, .85rem);
        margin-top: 1rem;
    }


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


    @media (max-width: 360px){
        .nav{
            flex-direction: column;
        }
    }

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