*{box-sizing:border-box;margin:0;padding:0}body{font-family:Courier New,Courier,monospace;line-height:1.6;color:#333;background-color:#f8f9fa}.app{display:flex;flex-direction:column;min-height:100vh}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background-color:#2a9d8f;color:#fff;box-shadow:0 2px 4px #0000001a}.logo{display:flex;align-items:center;font-size:1.5rem;font-weight:700}.logo-image{height:30px;width:auto;margin-right:10px}.nav ul{display:flex;list-style:none;gap:1.5rem}.nav a{color:#fff;text-decoration:none;font-weight:500;padding:.5rem;border-radius:4px;transition:background-color .2s}.nav a:hover{background-color:#fff3}.content{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.page{background-color:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 8px #0000001a}h2{color:#264653;margin-bottom:1rem}p{margin-bottom:1rem}.json-formatter,.xml-formatter{display:flex;flex-direction:column;gap:1rem;width:100%}.json-input,.xml-input{width:100%;padding:1rem;border:1px solid #ccc;border-radius:4px;font-family:Courier New,Courier,monospace;resize:vertical;min-height:200px}.error-border{border-color:#e63946}.error-message{color:#e63946;font-weight:700}.button-group{display:flex;gap:1rem}.button-group button{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-family:Courier New,Courier,monospace;font-weight:700;transition:background-color .2s,opacity .2s}.format-btn{background-color:#2a9d8f;color:#fff}.format-btn:hover{background-color:#1f7a70}.copy-btn{background-color:#457b9d;color:#fff}.copy-btn:hover{background-color:#2c5282}.copy-btn:disabled{background-color:#a8a8a8;cursor:not-allowed;opacity:.7}.clear-btn{background-color:#e76f51;color:#fff}.clear-btn:hover{background-color:#c44d30}.weather-widget{background-color:#fff3;padding:.5rem 1rem;border-radius:4px;font-weight:700;min-width:80px;text-align:center}@media (max-width: 768px){.header{flex-direction:row;flex-wrap:wrap;padding:1rem}.logo{flex:1;margin-bottom:.5rem}.weather-widget{order:2;margin-left:auto}.nav{flex-basis:100%;order:3}.nav ul{gap:1rem;justify-content:center}}