.html-format-container .output-container{border:1px solid var(--grey);flex-direction:column;width:50%;display:flex;position:relative;overflow:hidden}.html-format-container .output-box{background:#f8f9fa;border-bottom:1px solid #e1e5e9;flex-wrap:wrap;align-items:center;gap:12px;padding:8px;display:flex}.html-format-container .html-input-control{background:#f8f9fa;border-bottom:1px solid #e1e5e9;justify-content:space-between;align-items:center;gap:12px;padding:8px;display:flex}.html-format-container .html-control-box{gap:8px;height:100%;display:flex}.html-format-container .output-button{cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:8px 16px;font-size:14px;transition:all .1s}.html-format-container .output-button.active{background:var(--dark);color:var(--text-light)}.html-format-container .output-button.active:hover{background:var(--dark)}.html-format-container .output-button:disabled{cursor:default}.html-format-container .output-button:hover:not(:disabled){background:#f3f4f6}.html-format-container #options-select{font-weight:700;font-family:var(--font-jet-mono);text-transform:uppercase}.html-format-container .select-box{background:#edf2f7;background:var(--blue);text-transform:uppercase;border-radius:4px;flex-direction:column;gap:4px;padding:4px;display:flex}.html-format-container .select-box span{cursor:default;color:var(--bg);font-size:12px;font-family:var(--font-jet-mono);border-radius:4px}.html-format-container .output-stats{color:var(--text-grey);font-size:12px;font-family:var(--font-jet-mono);align-items:center;gap:12px;display:flex}.html-format-container .output-stats span{cursor:default;background:#edf2f7;border-radius:4px;padding:2px 6px}.html-format-container .output-controls{gap:8px;height:100%;display:flex}.html-format-container .output-controls button.download-btn{background:var(--blue);color:var(--text-light)}.html-format-container .output-controls button.download-btn:hover:not(:disabled){background:var(--blue-hover)}.html-format-container .output-controls button:disabled{opacity:.5;cursor:not-allowed}.html-format-container .copy-btn.success{color:#fff;background:#10b981;border-color:#10b981}.html-format-container .copy-btn.success:hover{background:#10b981}.html-format-container .clear-btn{color:#fff;background:#ef4444;border-color:#ef4444}.html-format-container .clear-btn:hover:not(:disabled){background:#dc2626}.html-format-container .output-content{flex:1;display:flex}.html-format-container .output-textarea{resize:none;width:100%;font-family:var(--font-jet-mono);background:#fff;border:none;outline:none;flex:1;padding:16px;font-size:14px;line-height:1.5;position:relative}.html-format-container .output-textarea::placeholder{font-family:16px;color:var(--text-grey);font-style:italic}.html-format-container .output-accept{background:var(--blue);color:#fff;cursor:pointer;border:none;border-radius:4px;height:100%;padding:6px 18px}.html-format-container .output-accept:hover{background:var(--blue-hover)}.html-format-container .output-accept:disabled{cursor:default;background:#d1d5db}.html-format-container .processing-indicator{color:#6b7280;justify-content:center;align-items:center;gap:8px;height:200px;display:flex}.html-format-container .spinner{border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;width:16px;height:16px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
.html-format-container{flex-direction:column;height:100vh;display:flex}.html-format{flex:1;display:flex}
@media (max-width:1400px){.html-format-container .input-name{display:none}}@media (max-width:1100px){.html-format-container .html-format{flex-direction:column}.html-format-container .input-container,.html-format-container .output-container{width:100%}.html-format-container .input-container{min-height:320px}.html-format-container .input-textarea{overflow:hidden}.html-format-container .output-header{gap:8px}.html-format-container .output-accept img{transform:rotate(90deg)}.html-format-container .output-textarea{min-height:400px;overflow:hidden}.html-format-container .output-container{flex:1}}@media (max-width:555px){.html-format-container .html-input-control{flex-direction:column;align-items:start}}