*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;padding:20px}.app{max-width:900px;margin:0 auto;background-color:#fff;border-radius:8px;padding:32px;box-shadow:0 2px 8px #0000001a}h1{font-size:28px;font-weight:600;margin-bottom:32px;color:#333;text-align:center}h2{font-size:18px;font-weight:600;margin-bottom:20px;color:#555;border-bottom:2px solid #e0e0e0;padding-bottom:8px}.converter-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}@media(max-width:768px){.converter-grid{grid-template-columns:1fr}}.input-section,.output-section{display:flex;flex-direction:column}.field{margin-bottom:20px}label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;color:#555}input{width:100%;padding:10px 12px;font-size:15px;border:2px solid #ddd;border-radius:6px;transition:all .2s;font-family:Courier New,monospace}input:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 3px #4a90e21a}input.readonly{background-color:#f9f9f9;cursor:default;color:#666}input.readonly:focus{border-color:#ddd;box-shadow:none}input.error{border-color:#e74c3c;background-color:#fff5f5}input.error:focus{border-color:#e74c3c;box-shadow:0 0 0 3px #e74c3c1a}.error-hint{display:block;color:#e74c3c;font-size:12px;margin-top:4px;font-weight:500}.twos-complement-display{width:100%;padding:10px 12px;font-size:15px;border:2px solid #ddd;border-radius:6px;background-color:#f9f9f9;font-family:Courier New,monospace;color:#333;word-break:break-all;line-height:1.6;min-height:42px}.shade-0{color:#000}.shade-1{color:#4a4a4a}.shade-2{color:#8a8a8a}.shade-3{color:#b8b8b8}.shade-4{color:#d0d0d0}.info-card{margin-top:40px;padding:24px;background-color:#f8f9fa;border-radius:8px;border-left:4px solid #4a90e2}.info-card h3{font-size:20px;font-weight:600;margin-bottom:12px;color:#333}.info-card h4{font-size:16px;font-weight:600;margin-top:20px;margin-bottom:8px;color:#555}.info-card p{margin-bottom:12px;line-height:1.6;color:#666}.info-card ul{margin-left:20px;margin-bottom:12px;line-height:1.8;color:#666}.info-card li{margin-bottom:6px}.info-card code{background-color:#e9ecef;padding:2px 6px;border-radius:3px;font-family:Courier New,monospace;font-size:13px;color:#d63384}