.codec{background:white;border:1px solid var(--line);border-radius:18px;padding:28px;margin:28px 0}.codec-options,.codec-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:16px 0}.codec select,.codec button{font:inherit;border:1px solid var(--line);border-radius:10px;padding:10px 16px;background:white;color:var(--ink);min-height:44px}.codec button.primary{background:var(--green);color:white}.codec button:disabled{opacity:.5;cursor:default}.codec-fields{display:grid;grid-template-columns:1fr 1fr;gap:24px}.codec-fields label{display:block;font-weight:600;margin-bottom:8px}.codec textarea{display:block;width:100%;min-height:240px;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:14px;font:15px/1.6 ui-monospace,monospace;color:var(--ink);background:#fbfcf8;overflow-wrap:anywhere}.codec :focus-visible{outline:3px solid #729760;outline-offset:3px}.codec-status{min-height:26px;overflow-wrap:anywhere}.codec-options label{display:flex;align-items:center;gap:8px}.codec-options input{width:18px;height:18px}.codec-note{font-size:14px;color:var(--muted)}.tool-guide code{overflow-wrap:anywhere}.tool-guide a{text-decoration:underline}@media(max-width:740px){.codec{padding:18px}.codec-fields{grid-template-columns:1fr;gap:18px}.codec textarea{min-height:170px}.codec-options{align-items:flex-start;flex-direction:column}.codec select{max-width:100%}}
