*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;background-color:#f5f5f5;overflow-x:hidden}#root{width:100vw;height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 16px #00000026;position:relative;overflow:hidden}.app-header-content{padding:20px 32px;display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}.app-header-actions,.app-header-branding{display:flex;align-items:center;gap:16px}.app-header-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:#fff3;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);transition:all .3s ease}.app-header-icon:hover{transform:scale(1.05);background:#ffffff4d}.app-header-icon svg{color:#fff;font-size:24px}.app-header-text{display:flex;flex-direction:column;gap:2px}.app-header-title{margin:0;color:#fff;font-weight:700;font-size:28px;letter-spacing:-.5px;text-shadow:0 2px 4px rgba(0,0,0,.2)}.app-header-subtitle{color:#ffffffd9;font-size:14px;font-weight:500;margin:0;letter-spacing:.5px;text-transform:uppercase}.app-header-help-btn{background:transparent!important;border:2px solid white!important;color:#fff!important;border-radius:8px!important;padding:6px 14px!important;font-weight:500!important;transition:all .3s ease!important}.app-header-help-btn:hover{background:#fff!important;border-color:#fff!important;color:#667eea!important}.app-header-help-btn:active{transform:translateY(1px);background:#ffffffe6!important;color:#667eea!important}.app-header-help-btn *,.app-header-help-btn span,.app-header-help-btn .fui-Button__content,.app-header-help-btn .fui-Button__icon{color:inherit!important}@media (max-width: 768px){.app-header-content{padding:16px 20px;gap:12px}.app-header-branding{gap:12px}.app-header-icon{width:40px;height:40px}.app-header-icon svg{font-size:20px}.app-header-title{font-size:24px}.app-header-subtitle{font-size:12px}.app-header-help-btn{padding:6px 12px;font-size:14px}}@media (max-width: 480px){.app-header-content{flex-direction:column;gap:16px;text-align:center}.app-header-branding{flex-direction:column;gap:8px;align-items:center}.app-header-text{align-items:center}.app-header-title{font-size:22px}}.app-footer{background-color:#f8f8f8;padding:12px 24px;border-top:1px solid #e1e1e1;text-align:center;margin-top:auto}.app-footer span{color:#605e5c}.input-area{display:flex;flex-direction:column;gap:8px;padding:16px}.input-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.input-area textarea{width:100%;min-height:100px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;line-height:1.4;border:1px solid #d1d1d1;border-radius:4px;background-color:#fff}.input-area textarea.error{border-color:#d13438!important}.error-message{color:#d13438;font-size:12px;margin-top:4px}.info-message{color:#0078d4;font-size:12px;margin-top:4px;background-color:#f3f9fd;border:1px solid #b3d6fc;border-radius:4px;padding:6px 8px}.options-panel{width:300px;height:fit-content;margin-left:16px}.options-content{padding:16px;display:flex;flex-direction:column;gap:16px}.options-content .fui-Field{margin:0}.options-content .fui-Switch{justify-content:space-between}.data-uri-info{margin-top:8px;display:flex;flex-direction:column;gap:4px}.suggestion-text{color:#107c10;display:flex;align-items:center;gap:6px}.prefix-preview{color:#605e5c;word-break:break-all}.prefix-preview code{background:#f3f2f1;padding:2px 4px;border-radius:3px;font-size:11px;font-family:Consolas,Monaco,Courier New,monospace}.field-description{color:#605e5c;margin-top:4px;line-height:1.3}.preview-area{flex:1;min-height:300px;background-color:#fff;border:1px solid #e1e1e1;border-radius:8px}.preview-header{display:flex;justify-content:space-between;align-items:center;width:100%}.preview-title{display:flex;align-items:center;gap:8px}.preview-info{color:#605e5c}.preview-content{padding:16px;display:flex;flex-direction:column;gap:16px;height:100%}.preview-controls{display:flex;gap:8px}.preview-display{flex:1;min-height:300px}.preview-empty{display:flex;align-items:center;justify-content:center;height:200px;border:2px dashed #e1e1e1;border-radius:8px;color:#605e5c}.preview-text,.preview-hex{width:100%;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;line-height:1.4;resize:vertical}.preview-text-container{display:flex;flex-direction:column;gap:8px;height:100%}.text-editor-info{padding:8px 12px;background-color:#f3f9fd;border:1px solid #b3d6fc;border-radius:4px}.monaco-editor-container{border:1px solid #e1e1e1;border-radius:8px;overflow:hidden;background-color:#fff;flex:1;min-height:300px}.preview-image-container{display:flex;justify-content:center;align-items:center;min-height:200px;border:1px solid #e1e1e1;border-radius:8px;background-color:#f8f8f8;background-image:linear-gradient(45deg,#ffffff 25%,transparent 25%),linear-gradient(-45deg,#ffffff 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ffffff 75%),linear-gradient(-45deg,transparent 75%,#ffffff 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.preview-image{max-width:100%;max-height:400px;object-fit:contain;box-shadow:0 2px 8px #0000001a}.preview-hex-container{display:flex;flex-direction:column;border:1px solid #e1e1e1;border-radius:8px;padding:16px;background-color:#fff;overflow:auto;max-width:100%}.hex-editor-info{margin-bottom:12px;padding:8px 12px;background-color:#f3f9fd;border:1px solid #b3d6fc;border-radius:4px}.preview-hex-container>div:last-child{max-width:100%;overflow:auto}.preview-protobuf-container{display:flex;flex-direction:column;gap:16px;height:100%}.protobuf-controls{display:flex;flex-direction:column;gap:12px;padding:16px;background-color:#f8f9fa;border:1px solid #e1e1e1;border-radius:8px}.protobuf-mode-selector{display:flex;align-items:center;gap:12px}.protobuf-schema-section{display:flex;flex-direction:column;gap:12px}.protobuf-result{flex:1;min-height:300px}.protobuf-json-editor{display:flex;flex-direction:column;gap:8px;height:100%}.protobuf-editor-info{padding:8px 12px;background-color:#f3f9fd;border:1px solid #b3d6fc;border-radius:4px}.action-buttons{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px;flex-wrap:wrap;background-color:#f8f9fa;border-top:1px solid #e1e1e1}.upload-buttons,.action-buttons-right{display:flex;gap:8px}@media (max-width: 768px){.action-buttons{flex-direction:column;align-items:stretch}.upload-buttons,.action-buttons-right{justify-content:center}}.shortcuts-table{width:100%;margin-top:16px}.shortcuts-table code{background-color:#f3f2f1;padding:2px 6px;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px}.sample-data{padding:16px 0;border-top:1px solid #e1e1e1;margin-top:16px}.sample-data .fui-Field{margin-bottom:0}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-main{flex:1;overflow:auto;padding:24px}.app-content{max-width:1400px;margin:0 auto;display:flex;gap:24px;min-height:100%}.left-panel{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}.input-section{display:flex;flex-direction:column;gap:0;border:1px solid #e1e1e1;border-radius:8px;overflow:hidden;background-color:#fff}@media (max-width: 1024px){.app-content{flex-direction:column}.left-panel{order:1}}@media (max-width: 768px){.app-main{padding:16px}.app-content{gap:16px}.left-panel{gap:8px}}