*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,Segoe UI,system-ui,sans-serif}body{background-color:#f8f9fa;color:#333;line-height:1.6}.formatter-container{max-width:1200px;margin:0 auto;padding:2rem 1rem}@media(max-width:768px){.formatter-container{padding:1rem}}header{text-align:center;margin-bottom:2rem}header h1{color:#4285f4;font-size:2.5rem;margin-bottom:.5rem}@media(max-width:768px){header h1{font-size:2rem}}header p{color:#333;font-size:1.1rem;opacity:.8}.options-panel{display:flex;align-items:center;justify-content:space-between;background-color:#fff;padding:1rem;border-radius:8px;margin-bottom:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.1);flex-wrap:wrap;gap:1rem}.options-panel .option-group{display:flex;align-items:center;gap:.5rem}.options-panel .option-group label{font-weight:600;font-size:.9rem;color:#333}.options-panel .option-group select{padding:6px 12px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-size:.9rem}.options-panel .option-group select:focus{outline:none;border-color:#4285f4}@media(max-width:768px){.options-panel{flex-direction:column;align-items:flex-start}}.editor-container{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;margin-bottom:2rem}@media(max-width:992px){.editor-container{grid-template-columns:1fr}}.input-panel,.output-panel{background-color:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);overflow:hidden}.input-panel .panel-header,.output-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;background-color:#263238;color:#f5f5f5}.input-panel .panel-header h2,.output-panel .panel-header h2{font-size:1.2rem;margin:0}.input-panel .code-editor,.output-panel .code-editor{width:100%;min-height:400px;padding:1rem;font-family:Fira Code,Consolas,monospace;font-size:14px;border:none;resize:vertical;line-height:1.5;background-color:#f5f7fa;color:#333}.input-panel .code-editor:focus,.output-panel .code-editor:focus{outline:none}.input-panel .code-editor::placeholder,.output-panel .code-editor::placeholder{color:#aaa}.input-panel .error-message,.output-panel .error-message{padding:.5rem 1rem;background-color:rgba(234,67,53,.1);color:#ea4335;font-size:.9rem;border-left:4px solid #ea4335}.action-panel{display:flex;align-items:center;justify-content:center}@media(max-width:992px){.action-panel{margin:1rem 0}}.format-btn{border:none;border-radius:4px;cursor:pointer;font-weight:600;transition:all .3s ease;background-color:#4285f4;color:#fff;font-size:1rem;padding:12px 24px}.format-btn:disabled{opacity:.5;cursor:not-allowed}.format-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.1);background-color:rgb(17.805,101.89,241.195)}@media(max-width:992px){.format-btn{width:100%}}.copy-btn{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-weight:600;transition:all .3s ease;background-color:#263238;color:#f5f5f5}.copy-btn:disabled{opacity:.5;cursor:not-allowed}.copy-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.1)}.copy-btn.copied{background-color:#34a853}.copy-btn:hover:not(:disabled){background-color:hsl(200,19.1489361702%,28.431372549%)}.copy-btn.copied:hover:not(:disabled){background-color:rgb(39.9454545455,129.0545454545,63.7590909091)}.clear-btn{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-weight:600;transition:all .3s ease;background-color:rgba(0,0,0,0);color:#f5f5f5;border:1px solid hsla(0,0%,100%,.3)}.clear-btn:disabled{opacity:.5;cursor:not-allowed}.clear-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.1);background-color:hsla(0,0%,100%,.1)}footer{text-align:center;margin-top:2rem;color:#666;font-size:.9rem}@media(prefers-color-scheme:dark){body{background-color:hsl(200,19.1489361702%,13.431372549%);color:#f5f5f5}.options-panel{background-color:#263238}.options-panel .option-group label{color:#f5f5f5}.options-panel .option-group select{background-color:hsl(200,19.1489361702%,28.431372549%);border-color:hsl(200,19.1489361702%,33.431372549%);color:#f5f5f5}.input-panel,.output-panel{background-color:#263238}.input-panel .panel-header,.output-panel .panel-header{background-color:hsl(200,19.1489361702%,23.431372549%)}.input-panel .code-editor,.output-panel .code-editor{background-color:hsl(200,19.1489361702%,21.431372549%);color:#f5f5f5}.input-panel .code-editor::placeholder,.output-panel .code-editor::placeholder{color:#888}}