body { margin: 0; background-color: #121212; color: white; font-family: 'Segoe UI', sans-serif; overflow: hidden; }
.architect-ui { display: flex; height: 100vh; width: 100vw; }
.palette { width: 260px; background: #1e1e1e; border-right: 1px solid #333; padding: 15px; display: flex; flex-direction: column; z-index: 10; }
.asset-list { overflow-y: auto; flex-grow: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.asset-item { background: #2d2d2d; border: 1px solid #3e3e3e; border-radius: 4px; cursor: grab; display: flex; flex-direction: column; align-items: center; padding: 5px; }
.asset-item:hover { background: #383838; border-color: #555; }
.thumb-box { width: 100%; height: 60px; margin-bottom: 5px; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.generated-thumb { width: 100%; height: 100%; object-fit: contain; }
.fallback-color { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.asset-name { font-size: 10px; text-align: center; word-break: break-word; }
.viewport { flex-grow: 1; background: #000; position: relative; overflow: hidden; }
.export-controls { display: flex; gap: 5px; margin-bottom: 10px; }
.format-select { background: #333; color: white; border: 1px solid #555; padding: 5px; flex-grow: 1; font-size: 11px; }
.btn-save { background: #28a745; color: white; border: none; padding: 5px 10px; cursor: pointer; font-weight: bold; font-size: 11px; }

/* LEGEND OVERLAY */
.legend-panel {
    position: absolute; bottom: 20px; right: 20px;
    background: rgba(0,0,0,0.8); padding: 15px; border-radius: 8px;
    pointer-events: none; border: 1px solid #444; min-width: 180px;
}
.legend-title { font-weight: bold; margin-bottom: 8px; color: #ddd; border-bottom: 1px solid #555; padding-bottom: 4px; }
.legend-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; color: #aaa; }
.key { color: #4db8ff; font-weight: bold; margin-right: 10px; }