*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#071A2E;
--panel:#10233A;
--panel2:#132943;
--border:#244a73;
--accent:#2d74da;
--accent2:#3e8cff;
--text:#f5f7fb;
--muted:#9fb6cf;
}
body{
background:var(--bg);
color:var(--text);
font-family:Segoe UI,Arial,sans-serif;
padding:24px;
}
.header{
max-width:1200px;
margin:0 auto 18px;
text-align:center;
padding-bottom:16px;
border-bottom:1px solid var(--border);
}
.header h1{font-size:30px;font-weight:700}
.header h2{margin-top:6px;font-size:18px;font-weight:400;color:var(--muted)}
.container{
max-width:1200px;
margin:18px auto;
display:grid;
grid-template-columns:2.2fr 1fr;
gap:16px;
align-items:start;
}
.left-column,.right-column{display:flex;flex-direction:column;gap:16px}
.card{
background:var(--panel);
border:1px solid var(--border);
border-radius:12px;
padding:16px;
}
.card h2{font-size:17px;margin-bottom:12px}
.card h3{font-size:15px;margin:14px 0 8px;color:var(--muted)}
input[type=text],textarea,select{
width:100%;
padding:10px 12px;
background:var(--panel2);
border:1px solid #355d87;
border-radius:8px;
color:#fff;
font-size:14px;
outline:none;
}
input:focus,textarea:focus,select:focus{
border-color:var(--accent2);
}
textarea{resize:vertical}
#counter{
margin-top:6px;
text-align:right;
font-size:12px;
color:var(--muted);
}
.procedure-row{
display:grid;
grid-template-columns:1fr;
gap:8px;
margin-bottom:10px;
}
label{
display:inline-flex;
align-items:center;
gap:4px;
margin-right:14px;
font-size:14px;
cursor:pointer;
}
.bottom{
max-width:1200px;
margin:0 auto;
}
.buttons{
display:flex;
gap:10px;
margin-bottom:16px;
}
button{
flex:1;
padding:12px;
border:none;
border-radius:8px;
background:var(--accent);
color:#fff;
font-size:14px;
cursor:pointer;
transition:.2s;
}
button:hover{background:var(--accent2)}
#output{
width:100%;
min-height:320px;
background:var(--panel);
border:1px solid var(--border);
border-radius:12px;
padding:14px;
color:#fff;
font-size:14px;
line-height:1.45;
}
footer{
max-width:1200px;
margin:24px auto 0;
padding-top:16px;
border-top:1px solid var(--border);
text-align:center;
font-size:11px;
line-height:1.5;
color:var(--muted);
}
@media(max-width:900px){
body{padding:12px}
.container{grid-template-columns:1fr}
.buttons{flex-direction:column}
.header h1{font-size:24px}
}