*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f5f5f5;min-height:100vh;padding:20px;color:#333}.container{max-width:1400px;margin:0 auto;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.header{background:#2c3e50;color:#fff;padding:24px 30px;border-bottom:1px solid #34495e}.header h1{font-size:1.8em;margin-bottom:6px;font-weight:600}.header p{font-size:.95em;opacity:.9;font-weight:400}.main-content{display:flex;gap:0;height:calc(100vh - 200px);min-height:600px}.sidebar{width:320px;background:#fafafa;padding:20px;overflow-y:auto;border-right:1px solid #e0e0e0}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:#999}.viewer-container{flex:1;padding:20px;background:#fff;position:relative}.section{margin-bottom:20px}.section-title{font-size:.95em;font-weight:600;margin-bottom:12px;color:#2c3e50;padding-bottom:6px;border-bottom:2px solid #e0e0e0}.control-group{margin-bottom:14px}.control-label{display:block;font-size:.85em;font-weight:500;margin-bottom:6px;color:#555}.control-input{width:100%;padding:8px 10px;border:1px solid #ddd;border-radius:4px;font-size:.9em;transition:border-color .2s;background:#fff}.control-input:focus{outline:none;border-color:#2c3e50}.control-input[type=range]{padding:0;height:4px;background:#e0e0e0;border-radius:2px;cursor:pointer;border:none}.control-input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:#2c3e50;border-radius:50%;cursor:pointer}.control-input[type=range]::-webkit-slider-thumb:hover{background:#34495e}.control-input[type=color]{height:36px;cursor:pointer;border:1px solid #ddd;padding:2px}.range-value{display:inline-block;margin-left:8px;font-weight:500;color:#2c3e50;min-width:35px;font-size:.85em}.button-group{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.btn{padding:8px 14px;border:none;border-radius:4px;font-size:.85em;font-weight:500;cursor:pointer;transition:background-color .2s;text-align:center}.btn-primary{background:#2c3e50;color:#fff}.btn-primary:hover{background:#34495e}.btn-secondary{background:#fff;color:#2c3e50;border:1px solid #2c3e50}.btn-secondary:hover{background:#f5f5f5}select.control-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%232c3e50' d='M5 7L1 3h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}textarea.control-input{resize:vertical;min-height:80px;font-family:Courier New,monospace;font-size:.85em}textarea.data-textarea{min-height:120px;max-height:200px;line-height:1.4}.code-preview{background:#1e1e1e;border-radius:6px;padding:12px;overflow:auto;max-height:300px}.code-preview pre{margin:0;white-space:pre-wrap;word-break:break-all}.code-preview code{font-family:Fira Code,Consolas,Monaco,monospace;font-size:.75em;color:#d4d4d4;line-height:1.5}.section-title{display:flex;justify-content:space-between;align-items:center}.copy-btn{padding:4px 10px;border:1px solid #2c3e50;border-radius:4px;background:#fff;color:#2c3e50;font-size:.75em;cursor:pointer;transition:all .2s}.copy-btn:hover{background:#2c3e50;color:#fff}.copy-btn.copy-success{background:#27ae60;border-color:#27ae60;color:#fff}.hex-viewer-wrapper{width:100%;height:100%;min-height:480px;border-radius:4px;overflow:hidden;border:1px solid #e0e0e0}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.info-badge{display:inline-block;background:#f0f0f0;color:#666;padding:4px 8px;border-radius:4px;font-size:.8em;font-weight:500;margin-top:6px}@media(max-width:1024px){.main-content{flex-direction:column;height:auto}.sidebar{width:100%;max-height:400px}.viewer-container{min-height:500px}}