body { background:#202124; color:#fff; font-family:"Segoe UI",sans-serif; padding:20px; }
h1 { text-align:center; margin-bottom:10px; }
.desc { text-align:center; color:#bbb; margin-bottom:20px; }
.builder-container { position:relative; max-width:900px; margin:0 auto; background:#2a2b30; padding:20px; border-radius:10px; }
.toolbar { display:flex; justify-content:center; gap:10px; margin-bottom:20px; }
button { background:#4caf50; color:#fff; border:none; padding:8px 14px; border-radius:6px; cursor:pointer; transition:.2s; }
button:hover { background:#43a047; }
.hidden { display:none; }

.field-live { background:#333; border-radius:6px; padding:10px; margin-bottom:8px; display:flex; flex-direction:column; position:relative; }
.field-live label { font-weight:bold; margin-bottom:3px; }
.field-live .hint-toggle { font-size:.85rem; color:#aaa; margin-bottom:5px; cursor:pointer; user-select:none; text-decoration:underline; }
.field-live .bracket-warning { position:absolute; top:8px; right:10px; background:#d9534f; color:#fff; padding:2px 6px; border-radius:4px; font-size:.8rem; font-weight:bold; display:none; }
.field-live .hint-text { font-size:.85rem; color:#bbb; display:none; margin-bottom:5px; background:#2a2b30; padding:5px 8px; border-radius:4px; }
.field-live textarea { background:#444; color:#fff; border:none; border-radius:4px; padding:8px; resize:vertical; min-height:60px; font-size:14px; line-height:1.2; }

.fields-edit .field-edit { display:flex; align-items:stretch; margin:10px 0 5px; background:#333; border-radius:6px; overflow:hidden; border:1px solid #444; flex-direction:column; }
.field-edit .drag-handle { width:96%; height:40px; background:#444; cursor:grab; align-items:center; padding:10px 0 0 20px; font-size:16pt; text-align:center; margin-left:8px; }
.field-edit .field-content { flex:1; display:flex; flex-direction:column; padding:10px; }
.field-edit input, .field-edit textarea { background:#555; color:#fff; border:none; border-radius:4px; padding:5px 8px; margin-bottom:6px; }
.field-edit .field-actions { display:flex; justify-content:flex-end; background:#3a3b3f; }
.field-edit .field-actions button { background:#d9534f; border-radius:0; font-size:14px; padding:6px; }
.field-edit .field-actions button:hover { background:#c9302c; }

textarea#result { width:auto; background:#555; color:#fff; border:none; border-radius:6px; padding:10px; resize:none; overflow:hidden; margin-top:10px; transition:height .1s; }
textarea::placeholder { color:#888; }

.autocomplete-list { position:absolute; top:100%; left:0; width:100%; max-width:350px; background-color:#2a2b30; border:1px solid #444; border-radius:6px; box-shadow:0 4px 8px rgba(0,0,0,.3); font-family:inherit; font-size:14px; color:#fff; z-index:1000; overflow-y:auto; max-height:180px; display:none; }
.autocomplete-item { padding:6px 10px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:background .15s; }
.autocomplete-item:hover, .autocomplete-item.active { background-color:#3a3b3f; }
.autocomplete-item .match { font-weight:bold; color:#ffd966; }
.autocomplete-item .info { color:#aaa; font-size:12px; margin-left:5px; white-space:nowrap; }

#edit-fields-container > div.edit-toolbar { display:flex; width:80%; margin:auto; justify-content:space-around; }
#edit-fields-wrapper { margin:15px 0 0 0; }

.drop-zone { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(32,33,36,0.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); z-index:10; align-items:center; justify-content:center; }
.drop-zone:not(.hidden) { display:flex; }
.drop-zone-content { text-align:center; color:#fff; padding:40px; border:3px dashed #4caf50; border-radius:15px; background:rgba(42,43,48,0.9); max-width:400px; transition:all .2s; }
.drop-icon { font-size:64px; margin-bottom:20px; }
.drop-zone p { font-size:18px; margin:10px 0; }
.drop-hint { font-size:14px; color:#aaa; }
.drop-zone.drag-over .drop-zone-content { border-color:#ffd966; background:rgba(42,43,48,0.95); transform:scale(1.05); }