*{box-sizing:border-box}
:root{--green:#0d5d20;--green2:#084516;--border:#1d1d1d;--muted:#666;--danger:#a30000}
body{margin:0;background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif}
.page{width:min(1060px,calc(100% - 36px));margin:auto;padding:60px 0 34px}
.title{text-align:center;margin-bottom:42px}.title h1{margin:0;font-size:22px}.title p{font-size:13px;color:var(--muted);margin:10px 0 0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:38px 70px}
.field label,.result-head label,.preview h2{display:block;text-align:center;font-size:17px;font-weight:800}
.field label,.result-head,.preview h2{border:1px solid var(--border);padding:8px 12px 6px}
.field label,.result-head{border-bottom:0}
input,textarea{width:100%;border:1px solid var(--border);border-radius:0;background:#fff;color:#111;outline:none;font-family:Arial,Helvetica,sans-serif}
input{height:42px;padding:9px 12px;font-size:14px}
textarea{resize:vertical;min-height:172px;padding:11px 12px;font-size:14px;line-height:1.5}
input:focus,textarea:focus{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
small{display:block;color:var(--muted);font-size:11px;line-height:1.45;margin-top:7px}code{background:#f1f1f1;padding:1px 4px;border-radius:3px}
.security{margin-top:30px;border:1px solid var(--border)}
.security-head{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border);font-size:12px}.security-head span{color:var(--muted);font-weight:400;text-align:right}
.security-body{padding:12px}.security-body label{display:block;font-size:12px;font-weight:800;margin-bottom:7px}.security-body input{height:40px}
.actions{display:flex;justify-content:center;gap:12px;margin:30px 0 24px;flex-wrap:wrap}
button{border:1px solid var(--border);font-weight:800;cursor:pointer}
.primary{width:250px;height:44px;background:var(--green);color:white;border-color:var(--green);font-size:16px}.primary:hover{background:var(--green2)}
.secondary,#copy{height:44px;padding:0 18px;background:#fff;font-size:13px}.secondary:hover,#copy:hover:not(:disabled){background:#f2f2f2}
#copy:disabled{opacity:.45;cursor:not-allowed}
.result-head{position:relative}.result-head label{border:0;padding:0;margin:0}.result-head button{position:absolute;right:6px;top:4px;height:30px;padding:0 11px;font-size:11px}
#output{min-height:108px;overflow-wrap:anywhere;word-break:break-all;font:12px Consolas,"Courier New",monospace}
#status{min-height:22px;padding-top:7px;text-align:center;font-size:12px}.ok{color:var(--green2)}.error{color:var(--danger)}
.preview{margin-top:28px}.preview h2{margin:0;border-bottom:0}.preview pre{margin:0;border:1px solid var(--border);min-height:120px;padding:13px;white-space:pre-wrap;word-break:break-word;font:13px/1.5 Arial}
footer{display:flex;justify-content:space-between;gap:15px;margin-top:34px;color:#777;font-size:11px}
@media(max-width:760px){.page{width:calc(100% - 24px);padding-top:40px}.title{margin-bottom:32px}.grid{grid-template-columns:1fr;gap:24px}.security-head{align-items:flex-start;flex-direction:column}.security-head span{text-align:left}.actions{flex-direction:column}.primary,.secondary{width:100%}footer{flex-direction:column;text-align:center}}