.text-formatter-container{display:flex;flex-direction:column;gap:20px;width:100%}.format-type-selector{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}.format-button{padding:8px 16px;border-radius:6px;border:1px solid #e0e0e0;background-color:#f8f9fa;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.format-button:hover{background-color:#e9ecef}.format-button.active{background-color:#4f46e5;color:white;border-color:#4338ca}.converter-row,.input-container,.output-container{display:flex;flex-direction:column;width:100%}.input-container,.output-container{border-radius:8px;overflow:hidden}.header-area{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background-color:#f8f9fa;border:1px solid #e0e0e0;border-top-left-radius:8px;border-top-right-radius:8px}.input-label,.output-label{font-weight:600;font-size:14px}.output-controls{display:flex;align-items:center;gap:10px}.clear-button{padding:4px 8px;border-radius:4px;border:1px solid #e0e0e0;background-color:#f8f9fa;font-size:12px;cursor:pointer;transition:all .2s ease}.clear-button:hover{background-color:#e9ecef}.editor-container{display:flex;height:200px;border:1px solid #e0e0e0;border-top:none;border-bottom-left-radius:8px;border-bottom-right-radius:8px;background-color:white;overflow:hidden}.line-numbers{display:flex;flex-direction:column;padding:8px 0;background-color:#f8f9fa;border-right:1px solid #e0e0e0;min-width:40px;text-align:right;user-select:none}.line-number{padding:0 8px;color:#777}.code-editor,.line-number{font-size:14px;font-family:monospace}.code-editor{flex:1;padding:8px;resize:none;border:none;outline:none;background-color:white;width:calc(100% - 40px);overflow:auto}.error-message{color:#d32f2f;margin-top:8px;font-size:14px}