*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#121212;color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{display:flex;flex-direction:column}#root,.app{min-height:100vh}.app{background:#1a1a1a;padding:20px}.container{background:#1e1e1e;border:1px solid #d9534f;border-radius:12px;box-shadow:0 10px 30px #0000004d;margin:0 auto;max-width:1200px;overflow:hidden}.header{background:#1e1e1e;border-bottom:1px solid #d9534f;color:#fff;padding:30px;text-align:center}.header h1{font-size:2.5rem;font-weight:700;margin-bottom:10px}.header p{font-size:1.1rem;opacity:.8}.content{padding:30px}.file-input-section{background:#2b2b2b;border:2px dashed #d9534f;border-radius:8px;margin-bottom:30px;padding:20px;text-align:center;transition:all .3s ease}.file-input-section:hover{background:#3c3c3c;border-color:#e5534b}.file-input{display:none}.file-input-label{background:#d9534f;border-radius:6px;color:#fff;cursor:pointer;display:inline-block;font-weight:600;padding:12px 24px;transition:all .3s ease}.file-input-label:hover{background:#c9302c;transform:translateY(-2px)}.sample-data-btn{background:#5cb85c;border:none;border-radius:6px;color:#fff;cursor:pointer;font-weight:600;margin-left:15px;padding:12px 24px;transition:all .3s ease}.sample-data-btn:hover{background:#0a8b0a;transform:translateY(-2px)}.editor-section{margin-bottom:30px}.key-list{background:#2b2b2b;border:1px solid #444;border-radius:8px;overflow:hidden}.key-list-header{align-items:center;background:#3c3c3c;color:#fff;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;padding:15px 20px}.key-list-header,.key-list-title{font-size:1.1rem;font-weight:600}.search-container{align-items:center;display:flex;flex:1 1;gap:8px;max-width:300px}.search-input{background:#2b2b2b;border:1px solid #555;border-radius:4px;color:#f5f5f5;flex:1 1;font-size:.9rem;padding:8px 12px;transition:border-color .3s ease}.search-input:focus{border-color:#5cb85c;outline:none}.search-input::placeholder{color:#888}.clear-search-btn{background:none;border:none;border-radius:50%;color:#888;cursor:pointer;font-size:1.2rem;font-weight:700;line-height:1;padding:4px 8px;transition:all .2s ease}.clear-search-btn:hover{background-color:#d9534f;color:#fff}.key-item{align-items:flex-start;border-bottom:1px solid #444;display:flex;gap:15px;justify-content:space-between;padding:15px 20px;transition:all .2s ease}.key-item:hover{background:#444}.key-item.active{background:#4f4f4f;border-left:4px solid #d9534f;padding-left:16px}.key-item-content{cursor:pointer;flex-grow:1}.key-name{color:#f5f5f5;font-weight:600;margin-bottom:5px}.key-preview{color:#a0a0a0;font-size:.9rem;line-height:1.4;max-width:100%;overflow:visible;text-overflow:clip;white-space:normal;word-break:break-word}.variable-highlight{background:#d9534f;border-radius:3px;color:#fff;font-family:monospace;font-size:.9em;padding:2px 4px}.delete-btn{background:none;border:none;border-radius:50%;color:#888;cursor:pointer;font-size:1.5rem;font-weight:700;line-height:1;margin-top:-2px;padding:5px 8px;transition:all .2s ease}.delete-btn:hover{background-color:#d9534f;color:#fff}.json-output{align-items:center;background:#2b2b2b;border:1px solid #444;border-radius:8px;margin-top:30px;overflow:hidden}.json-header{align-items:center;background:#3c3c3c;color:#fff;display:flex;font-size:1.1rem;font-weight:600;justify-content:space-between;padding:15px 20px}.copy-btn{background:#5cb85c;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.9rem;line-height:1.6;padding:8px 16px;transition:all .3s ease}.copy-btn:hover{background:#0a8b0a}.json-content{background:#1e1e1e;color:#f5f5f5;font-family:Courier New,monospace;font-size:.9rem;line-height:1.5;max-height:400px;overflow-y:auto;padding:20px;white-space:pre-wrap;word-break:break-all}.empty-state{color:#a0a0a0;padding:60px 20px;text-align:center}.empty-state h3{font-size:1.5rem;margin-bottom:15px}.empty-state p{font-size:1.1rem;line-height:1.6}.no-search-results{background:#2b2b2b;color:#a0a0a0;padding:40px 20px;text-align:center}.no-search-results p{font-size:1rem;margin-bottom:15px}.clear-search-link{background:none;border:none;color:#d9534f;cursor:pointer;font-size:.9rem;text-decoration:underline;transition:color .2s ease}.clear-search-link:hover{color:#e5534b}.modal-overlay{align-items:center;animation:fadeIn .3s ease;background:#000000bf;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.modal{animation:slideIn .4s ease-out;background:#2b2b2b;border:1px solid #d9534f;border-radius:8px;box-shadow:0 5px 15px #00000080;display:flex;flex-direction:column;max-height:90vh;max-width:800px;width:90%}.modal-header{align-items:center;border-bottom:1px solid #444;display:flex;justify-content:space-between;padding:20px}.modal-header h2{font-size:1.5rem;margin:0}.close-btn{background:none;border:none;color:#fff;cursor:pointer;font-size:2rem;font-weight:700;line-height:1;transition:color .2s ease}.close-btn:hover{color:#d9534f}.modal-content{flex-grow:1;overflow-y:auto;padding:20px}.form-group{margin-bottom:20px}.form-label{color:#f5f5f5;display:block;font-weight:600;margin-bottom:8px}.form-input{background:#3c3c3c;border:2px solid #555;border-radius:6px;color:#f5f5f5;font-size:1rem;padding:12px;transition:border-color .3s ease;width:100%}.form-input:focus{border-color:#5cb85c;outline:none}.form-textarea{background:#3c3c3c;border:2px solid #555;border-radius:6px;color:#f5f5f5;font-family:inherit;font-size:1rem;min-height:250px;padding:12px;resize:vertical;transition:border-color .3s ease;width:100%}.form-textarea:focus{border-color:#5cb85c;outline:none}.modal-footer{background:#3c3c3c;border-top:1px solid #444;padding:15px 20px;text-align:right}.modal-save-btn{background:#5cb85c;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 24px;transition:all .3s ease}.modal-save-btn:hover{background:#0a8b0a}.editor-toolbar{align-items:center;background:#3c3c3c;border-radius:6px;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;padding:10px}.toolbar-btn{background:#555;border:1px solid #666;border-radius:4px;color:#fff;cursor:pointer;font-weight:700;padding:8px 12px}.toolbar-btn:hover{background:#666}.toolbar-group{align-items:center;display:flex;gap:5px}.toolbar-input{background:#2b2b2b;border:1px solid #555;border-radius:4px;color:#fff;padding:8px;width:100px}.rich-text-preview{background:#1e1e1e;border:1px solid #555;border-radius:6px;margin-bottom:15px;overflow:hidden}.preview-label{background:#3c3c3c;border-bottom:1px solid #555;color:#f5f5f5;font-size:.9rem;font-weight:600;padding:8px 12px}.preview-content{word-wrap:break-word;color:#f5f5f5;line-height:1.5;min-height:60px;padding:15px;white-space:pre-wrap}.preview-content strong{font-weight:700}.preview-content em{font-style:italic}.preview-content .variable-highlight{background:#d9534f;border-radius:3px;color:#fff;font-family:monospace;font-size:.9em;padding:2px 4px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.app{padding:10px}.header h1{font-size:2rem}.editor-section{gap:20px;grid-template-columns:1fr}.content{padding:20px}.key-list-header{align-items:stretch;flex-direction:column;gap:10px}.search-container{max-width:none}}