* {
 box-sizing: border-box;
}





.top p {
 margin: 0;
 color: #dbeafe;
 font-size: 17px;
}



.panel {
 background: white;
 padding: 15px;
}

.columns {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 22px;
}

.heading {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 margin-bottom: 11px;
 font-weight: 750;
}

.counter {
 font-size: 12px;
 color: #64748b;
 font-weight: 500;
}

textarea {
 width: 100%;
 min-height: 270px;
 resize: vertical;
 border: 1px solid #ccd7e7;
 border-radius: 11px;
 padding: 16px;
 font: 15px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
 color: #172b4d;
 background: #fbfdff;
 outline: none;
}

textarea:focus {
 border-color: #2563eb;
 box-shadow: 0 0 0 3px #2563eb19;
}

textarea[readonly] {
 background: #f8fbff;
}

.settings {
 display: flex;
 gap: 18px;
 align-items: center;
 flex-wrap: wrap;
 padding: 21px 0 18px;
 font-size: 14px;
}

.settings label {
 display: flex;
 align-items: center;
 gap: 8px;
}

.settings select {
 border: 1px solid #cbd5e1;
 padding: 7px;
 border-radius: 7px;
 background: white;
}

.actions {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
}

button {
 border: 1px solid #cbd5e1;
 background: white;
 color: #233b61;
 padding: 12px 17px;
 border-radius: 9px;
 font-size: 14px;
 font-weight: 700;
 cursor: pointer;
 transition: .15s;
}

button:hover {
 transform: translateY(-1px);
 
}

button.primary {
 background: #2563eb;
 color: white;
 border-color: #2563eb;
}

button.primary:hover {
 background: #174bc0;
}

.status {
 min-height: 22px;
 margin-top: 14px;
 font-size: 13px;
 color: #147d53;
}

.note {
 margin: 22px 0 0;
 color: #64748b;
 font-size: 15px;
 line-height: 1.7;
}

.foot {
 text-align: center;
 color: #64748b;
 font-size: 13px;
 padding: 0 15px 25px;
}

@media (max-width: 700px) {
 .columns {
 grid-template-columns: 1fr;
 }
 
 .panel {
 padding: 17px;
 }
 
 textarea {
 min-height: 190px;
 }
 
 .top {
 padding-top: 35px;
 }
}