* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #5b4bff;
    --primary-hover: #4b3df2;

    --bg1: #f8f9fc;
    --bg2: #eef2ff;

    --card: rgba(255,255,255,.92);

    --text: #1f2937;
    --muted: #6b7280;

    --border: rgba(0,0,0,.06);

    --radius: 24px;
}

html,
body {
    height: 100%;
}

body {

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(circle at top, #ffffff, var(--bg2));

    color: var(--text);

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;

}

.container {

    width: 100%;
    max-width: 460px;

    background: var(--card);

    backdrop-filter: blur(20px);

    border-radius: var(--radius);

    border: 1px solid rgba(255,255,255,.7);

    padding: 34px;

    box-shadow:
        0 20px 70px rgba(0,0,0,.08);

}

section {

    display: flex;
    flex-direction: column;
    gap: 20px;

}

[hidden]{
    display:none !important;
}

h1{

    font-size:56px;
    font-weight:800;
    text-align:center;
    letter-spacing:-2px;

}

h2{

    font-size:34px;
    font-weight:700;
    text-align:center;

}

p{

    text-align:center;
    color:var(--muted);
    line-height:1.6;

}

textarea,
input{

    width:100%;

    border:1px solid var(--border);

    border-radius:18px;

    background:#fff;

    padding:18px;

    font-size:17px;

    outline:none;

    transition:.25s;

}

textarea{

    resize:vertical;

    min-height:180px;

}

textarea:focus,
input:focus{

    border-color:var(--primary);

    box-shadow:
        0 0 0 5px rgba(91,75,255,.12);

}

button{

    height:58px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    font-size:18px;
    font-weight:700;

    color:white;

    background:
        linear-gradient(135deg,#6558ff,var(--primary));

    transition:.2s;

}

button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(91,75,255,.25);

}

button:active{

    transform:scale(.98);

}

.back{

    background:#eef2f7;

    color:#374151;

    box-shadow:none;

}

.back:hover{

    background:#e4e8ef;

}

#code{

    background:#eef2ff;

    border-radius:20px;

    padding:26px;

    text-align:center;

    font-size:56px;

    font-weight:800;

    color:var(--primary);

    letter-spacing:10px;

}

#openedMessage{

    min-height:180px;

    background:#fafbff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:24px;

    white-space:pre-wrap;

    line-height:1.8;

    font-size:18px;

}

::placeholder{

    color:#9ca3af;

}

button:focus,
textarea:focus,
input:focus{

    outline:none;

}

@media (max-width:600px){

    body{

        padding:16px;
        align-items:flex-start;

    }

    .container{

        margin-top:20px;

        padding:24px;

        border-radius:22px;

    }

    h1{

        font-size:46px;

    }

    h2{

        font-size:28px;

    }

    #code{

        font-size:42px;

        letter-spacing:6px;

        padding:22px;

    }

    button{

        height:56px;

    }

}

.subtitle{

    margin-top:-10px;
    margin-bottom:10px;

    text-align:center;

    font-size:18px;

    color:var(--muted);

}
.counter{

    text-align:right;

    color:#9ca3af;

    font-size:14px;

    margin-top:-8px;

}
#toast{

    position:fixed;

    left:50%;
    bottom:30px;

    transform:translateX(-50%) translateY(20px);

    background:#1f2937;

    color:#fff;

    padding:14px 22px;

    border-radius:14px;

    font-size:15px;

    opacity:0;

    pointer-events:none;

    transition:.3s;

    z-index:999;

}

#toast.show{

    opacity:1;

    transform:translateX(-50%) translateY(0);

}