*
{
    box-sizing: border-box;
}

body
{
    margin:      0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background:  #f4f5f7;
    color:       #1f2328;
}

.page
{
    max-width: 1000px;
    margin:    0 auto;
    padding:   40px 20px 80px;
}

h1
{
    font-size:     24px;
    margin-bottom: 24px;
}

.editor
{
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   20px;
    margin-bottom:         20px;
}

@media (max-width: 700px)
{
    .editor
    {
        grid-template-columns: 1fr;
    }
}

.editor__col
{
    display:        flex;
    flex-direction: column;
}

.editor__col label
{
    font-size:      13px;
    font-weight:    600;
    color:          #6b7280;
    margin-bottom:  8px;
    text-transform: uppercase;
}

textarea
{
    min-height:    200px;
    resize:        vertical;
    padding:       12px;
    border:        1px solid #e2e4e9;
    border-radius: 8px;
    font-size:     14px;
    line-height:   1.5;
    font-family:   inherit;
}

textarea:focus
{
    outline:      none;
    border-color: #2f6feb;
    box-shadow:   0 0 0 3px rgba(47, 111, 235, 0.15);
}

#compare-btn
{
    appearance:    none;
    border:        none;
    background:    #2f6feb;
    color:         #fff;
    font-size:     14px;
    font-weight:   600;
    padding:       10px 20px;
    border-radius: 8px;
    cursor:        pointer;
}

#compare-btn:hover
{
    background: #1f56c4;
}

#compare-btn:disabled
{
    opacity: 0.6;
    cursor:  default;
}

#status
{
    margin-left: 12px;
    font-size:   13px;
    color:       #6b7280;
}

#status.error
{
    color: #9c1c1c;
}

#result
{
    margin-top:    24px;
    background:    #fff;
    border:        1px solid #e2e4e9;
    border-radius: 8px;
    padding:       20px;
    font-size:     15px;
    line-height:   1.9;
}

.sentence--added
{
    background:    #d9f7be;
    color:         #1f6b1f;
    border-radius: 4px;
    padding:       1px 4px;
}

.sentence--deleted
{
    background:      #ffd6d6;
    color:           #9c1c1c;
    text-decoration: line-through;
    border-radius:   4px;
    padding:         1px 4px;
}

.sentence--modified
{
    background:    #fff3b0;
    color:         #7a5b00;
    border-radius: 4px;
    padding:       1px 4px;
    cursor:        help;
}

.sentence--modified.sentence--showing-old
{
    background:      #ffe8a1;
    text-decoration: line-through;
}