body{
    font-family: Arial, sans-serif;
    background:#f5f7fb;
    margin:40px;
}

h1{
    margin-bottom:25px;
}

.controls{
    margin-bottom:20px;
}

button{
    padding:6px 12px;
    margin-right:6px;
    border:none;
    background:#2563eb;
    color:white;
    border-radius:5px;
    cursor:pointer;
}

button.archive{
    background:#16a34a;
}

button.show{
    background:#444;
}

.conversation{
    margin-bottom:35px;
}

.conversation h2{
    margin-bottom:15px;
    border-bottom:2px solid #ddd;
    padding-bottom:5px;
}

.phrase{
    background:white;
    border-radius:8px;
    padding:18px;
    margin-bottom:12px;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.arabic{
    font-size:24px;
    direction:rtl;
    text-align:right;
    margin-bottom:10px;
}

.pronunciation{
    color:#444;
    margin-bottom:4px;
}

.translation{
    color:#777;
    margin-bottom:10px;
}

.hidden{
    display:none;
}