:root{
    --bg:#06101e;
    --bg2:#081526;
    --panel:#0c1a2b;
    --line:rgba(255,255,255,.08);

    --text:#f5f9ff;
    --muted:#778aa2;

    --blue:#4385ff;
    --blue2:#61c9ff;

    --green:#55e4af;
}

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html,
body{
    margin:0;
    width:100%;
    min-height:100%;
}

body{
    background:#030912;
    color:var(--text);

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

    overscroll-behavior:none;
}

button,
input{
    font:inherit;
}

button{
    color:inherit;
}

.app{
    position:relative;

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

    min-height:100dvh;

    margin:0 auto;

    display:flex;
    flex-direction:column;

    padding:
        env(safe-area-inset-top)
        22px
        calc(18px + env(safe-area-inset-bottom));

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(52,115,255,.09),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #071321 0%,
            #050e1a 100%
        );
}


/* HEADER */

.topbar{
    min-height:68px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand{
    display:flex;
    align-items:center;

    gap:11px;
}

.brand-symbol{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border-radius:12px;

    background:
        linear-gradient(
            145deg,
            #3478ff,
            #5ac8ff
        );

    color:white;

    font-size:13px;
    font-weight:800;

    letter-spacing:-.04em;

    box-shadow:
        0 10px 32px
        rgba(43,112,255,.25);
}

.brand-copy strong{
    display:block;

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

    letter-spacing:-.01em;
}

.brand-copy span{
    display:block;

    margin-top:3px;

    color:#647890;

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

    letter-spacing:.17em;
}

.header-actions{
    display:flex;
    gap:7px;
}

.icon-button{
    width:39px;
    height:39px;

    display:grid;
    place-items:center;

    padding:0;

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

    border-radius:12px;

    background:
        rgba(255,255,255,.025);
}

.icon-button svg{
    width:18px;
    height:18px;

    fill:none;

    stroke:#8496aa;
    stroke-width:1.7;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* MAIN */

.main{
    flex:1;

    display:flex;
    flex-direction:column;
}

.intro{
    padding:
        clamp(30px,7vh,60px)
        0
        27px;

    text-align:center;
}

.status{
    display:inline-flex;

    align-items:center;

    gap:7px;

    color:#6f8cae;

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

    letter-spacing:.18em;
}

.status-dot{
    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 12px
        rgba(85,228,175,.75);
}

.intro h1{
    margin:
        15px
        0
        9px;

    font-size:
        clamp(
            29px,
            8vw,
            42px
        );

    line-height:1.05;

    letter-spacing:-.055em;
}

.intro p{
    margin:0;

    color:var(--muted);

    font-size:13px;

    line-height:1.55;
}


/* LANGUAGE */

.language-bar{
    width:100%;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        55px
        minmax(0,1fr);

    align-items:center;

    padding:8px;

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

    border-radius:20px;

    background:
        rgba(255,255,255,.025);
}

.language-side{
    min-width:0;

    padding:10px 7px;

    border:0;

    background:transparent;

    text-align:left;
}

.language-side.right{
    text-align:right;
}

.language-side small{
    display:block;

    margin-bottom:7px;

    color:#60758f;

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

    letter-spacing:.12em;
}

.language-side > div{
    display:flex;

    align-items:center;

    gap:8px;
}

.language-side.right > div{
    justify-content:flex-end;
}

.language-side strong{
    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:14px;
}

.language-flag{
    flex:0 0 auto;

    font-size:23px;
}

.language-flag.auto{
    color:#69a9ff;

    font-size:18px;
}

.language-arrow{
    display:flex;

    align-items:center;

    gap:5px;
}

.language-arrow span{
    flex:1;

    height:1px;

    background:
        rgba(255,255,255,.06);
}

.language-arrow div{
    color:#5f8fce;

    font-size:16px;
}


/* VOICE */

.voice-area{
    flex:1;

    min-height:330px;

    display:flex;

    flex-direction:column;

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

    padding:
        32px
        0
        26px;
}

.voice-ring{
    position:relative;

    width:190px;
    height:190px;

    display:grid;
    place-items:center;
}

.ring{
    position:absolute;

    border-radius:50%;

    border:
        1px solid
        rgba(82,145,255,.10);

    transition:
        opacity .25s,
        transform .25s;
}

.ring-1{
    inset:0;
}

.ring-2{
    inset:20px;
}

.ring-3{
    inset:40px;
}

.voice-button{
    position:relative;

    z-index:5;

    width:100px;
    height:100px;

    display:grid;
    place-items:center;

    padding:0;

    border:
        1px solid
        rgba(124,189,255,.45);

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #2669ed,
            #35a9e7
        );

    box-shadow:
        0 18px 55px
        rgba(40,110,255,.30);

    transition:
        transform .15s,
        box-shadow .2s;
}

.voice-button:active{
    transform:scale(.96);
}

.voice-button svg{
    width:31px;
    height:31px;

    fill:none;

    stroke:white;

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.stop-icon{
    display:none;
}


/* ACTIVE VOICE */

.voice-ring.active .ring{
    animation:
        voicePulse
        2s
        ease-out
        infinite;
}

.voice-ring.active .ring-2{
    animation-delay:.25s;
}

.voice-ring.active .ring-3{
    animation-delay:.5s;
}

.voice-ring.active .voice-button{
    background:
        linear-gradient(
            145deg,
            #e44f63,
            #ff7d75
        );

    box-shadow:
        0 18px 55px
        rgba(231,76,96,.25);
}

.voice-ring.active .mic-icon{
    display:none;
}

.voice-ring.active .stop-icon{
    display:block;
}

@keyframes voicePulse{

    0%{
        transform:scale(.82);
        opacity:.65;
    }

    75%{
        transform:scale(1.08);
        opacity:.05;
    }

    100%{
        transform:scale(1.08);
        opacity:0;
    }
}

.voice-title{
    margin-top:5px;

    font-size:16px;

    font-weight:700;
}

.voice-description{
    margin:
        8px
        0
        0;

    color:var(--muted);

    font-size:11px;
}


/* LIVE */

.live-panel{
    margin:
        -12px
        0
        24px;

    padding:
        17px;

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

    border-radius:18px;

    background:
        rgba(255,255,255,.025);
}

.live-language{
    display:flex;

    align-items:center;

    gap:7px;

    color:#7da8dd;

    font-size:10px;
    font-weight:700;
}

.original-text{
    margin-top:13px;

    color:#8fa1b5;

    font-size:13px;

    line-height:1.55;
}

.translated-text{
    margin-top:8px;

    font-size:17px;
    font-weight:600;

    line-height:1.55;
}


/* FOOTER */

.footer{
    padding-top:10px;

    display:flex;

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

    gap:5px;

    color:#3e536d;

    font-size:8px;

    letter-spacing:.08em;
}

.footer strong{
    color:#58769a;
}


/* SHEET */

.sheet-backdrop{
    position:fixed;

    z-index:80;

    inset:0;

    display:none;

    background:
        rgba(0,0,0,.60);

    backdrop-filter:
        blur(3px);
}

.sheet-backdrop.open{
    display:block;
}

.language-sheet{
    position:fixed;

    z-index:90;

    left:50%;
    bottom:0;

    width:
        min(
            640px,
            100%
        );

    max-height:80dvh;

    padding:
        10px
        20px
        calc(
            20px +
            env(safe-area-inset-bottom)
        );

    transform:
        translate(
            -50%,
            105%
        );

    transition:
        transform .25s ease;

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

    border-bottom:0;

    border-radius:
        26px
        26px
        0
        0;

    background:#0a1727;
}

.language-sheet.open{
    transform:
        translate(
            -50%,
            0
        );
}

.sheet-handle{
    width:42px;
    height:4px;

    margin:
        0
        auto
        19px;

    border-radius:10px;

    background:#304158;
}

.language-sheet header{
    display:flex;

    align-items:center;
    justify-content:space-between;
}

.language-sheet header small{
    color:#6684aa;

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

    letter-spacing:.15em;
}

.language-sheet h2{
    margin:
        5px
        0
        15px;

    font-size:23px;
}

.language-sheet header button{
    width:38px;
    height:38px;

    padding:0;

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

    border-radius:50%;

    background:transparent;

    font-size:22px;
}

.language-sheet input{
    width:100%;

    padding:
        14px
        15px;

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

    border-radius:14px;

    outline:none;

    background:#0f2034;

    color:white;
}

.language-list{
    max-height:52dvh;

    margin-top:10px;

    overflow:auto;
}

.language-option{
    width:100%;

    display:flex;

    align-items:center;

    gap:13px;

    padding:
        13px
        4px;

    border:0;

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

    background:transparent;

    text-align:left;
}

.language-option .flag{
    width:31px;

    font-size:23px;

    text-align:center;
}

.language-option strong{
    display:block;

    font-size:13px;
}

.language-option small{
    display:block;

    margin-top:2px;

    color:var(--muted);

    font-size:10px;
}

.auto-option .flag{
    color:#70a9ff;
}


/* MOBILE HEIGHT */

@media(max-height:700px){

    .intro{
        padding:
            20px
            0
            18px;
    }

    .voice-area{
        min-height:275px;

        padding:
            20px
            0;
    }

    .voice-ring{
        width:160px;
        height:160px;
    }

    .voice-button{
        width:88px;
        height:88px;
    }

}

@media(min-width:700px){

    .app{
        border-left:
            1px solid var(--line);

        border-right:
            1px solid var(--line);
    }

}