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

body{

    font-family:Arial, Helvetica, sans-serif;

    background:
    linear-gradient(
        135deg,
        #eaf7ff,
        #f8f9fa
    );

    min-height:100vh;

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

    padding:20px;
}

.main-container{
    width:100%;
    max-width:900px;
}

.card{

    background:white;

    border-radius:25px;

    padding:40px;

    box-shadow:
    0 10px 40px rgba(0,0,0,0.1);

}

.top-section{
    text-align:center;
}

.mic-circle{

    width:100px;
    height:100px;

    margin:auto;

    border-radius:50%;

    background:#00adee;

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

    font-size:50px;

    color:white;

    margin-bottom:20px;
}

h1{

    font-size:42px;

    color:#222;

    margin-bottom:10px;
}

.subtitle{

    color:#666;

    font-size:18px;

    margin-bottom:30px;
}

.status-box{

    width:220px;

    margin:0 auto 30px auto;

    background:#f5f5f5;

    padding:12px 20px;

    border-radius:50px;

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

    gap:10px;

    font-weight:bold;
}

.status-dot{

    width:14px;
    height:14px;

    border-radius:50%;

    background:red;
}

.button-group{

    display:flex;
    justify-content:center;
    gap:20px;

    flex-wrap:wrap;

    margin-bottom:30px;
}

button{

    border:none;

    padding:15px 30px;

    border-radius:12px;

    font-size:18px;

    cursor:pointer;

    transition:0.3s;
}

.start-btn{

    background:#00adee;
    color:white;
}

.stop-btn{

    background:#ff4d4d;
    color:white;
}

button:hover{

    transform:translateY(-2px);
}

textarea{

    width:100%;
    height:300px;

    border:none;

    background:#f8f9fa;

    border-radius:18px;

    padding:20px;

    font-size:18px;

    resize:none;

    outline:none;
}