.app{width: min(1280px, calc(100% - 32px));margin: 22px auto 20px;background:#fffdf8;border:1px solid #e2d8c8;border-radius:14px;box-shadow:0 8px 30px rgba(20,30,50,.08);display:flex;flex-direction:column;overflow:}
.intro{padding: 16px 18px 12px;}
h1{font-size: 20px; margin: 0 0 5px;}
.intro p {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}
.tool-card{width: min(1240px, calc(100% - 40px));margin: 20px auto;background:#fffdf8;border:1px solid #e2d8c8;border-radius:8px;box-shadow:0 2px 8px #0000000d;padding:20px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
button{appearance:none;border:1px solid #222;border-radius:5px;background:#171717;color:#fff;padding:9px 14px;font:600 14px/1.35 Arial,Helvetica,sans-serif;cursor:pointer;min-height:38px}
button:hover{background:#333}
button.secondary{background:#fff;color:#222;border-color:#c8c8c8}
button.secondary:hover{background:#f0f0f0}
button:focus-visible,textarea:focus-visible{outline:3px solid #1769aa40;outline-offset:2px}
.options{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0 0 16px}
.option{display:inline-flex;align-items:center;gap:7px;font-size:14px}
.option input{accent-color:#171717}
.editors{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.editor-panel{min-width:0}
.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 8px}
.panel-heading label{font-weight:700}
.panel-heading span{color:var(--muted);font-size:12px}
textarea{display:block;width:100%;min-height:360px;resize:vertical;padding:13px;border:1px solid #cfcfcf;border-radius:5px;background:#fff;color:#222;font:13px/1.55 Consolas,Monaco,"Courier New",monospace;tab-size:2;white-space:pre;overflow:auto}
#output{background:#fafafa}
.status{min-height:24px;margin-top:10px;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.status.error{color:var(--danger)}
.hint{color:var(--muted);font-size:13px;margin:16px 0 0}
footer{text-align:center;color:#777;font-size:12px;padding:18px 20px 28px}
@media(max-width:760px){.tool-card{padding:14px}.editors{grid-template-columns:minmax(0,1fr);gap:16px}textarea{min-height:260px;font-size:12px}.toolbar{gap:8px}button{padding:9px 11px}}