.container
{
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;

    width: 300px;
    text-align: center;
}

.logo
{
    width: 150px;
    height: auto;

    border-radius: 50%;
}

.title
{
    margin-top: 1rem;
}

.subtitle
{
    margin-top: 2rem;
}

.topic
{
    margin-top: 2rem;
}

.pix-input
{
    text-align: center;
}

.pix-input {
    width: 256px;
    max-width: 90vw;
    font-size: 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.pix-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

.hint
{
    margin-top: 0.5rem;
    font-size: 0.75rem;
}

.data-container
{
    margin-top: 2rem;
}

.data-item
{
    margin-top: 0.5rem;
}

.underline
{
    text-decoration: underline;
}